中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

前端開發(fā)中提高頁面加載速度的小技巧講解

2020-08-06    分類: 網(wǎng)站建設(shè)

在進(jìn)行網(wǎng)站前端開發(fā)的時(shí)候,網(wǎng)頁加載速度往往是讓我們頭疼的問題,如何提高頁面加載速度呢?成都網(wǎng)站開發(fā)技術(shù)人員告訴你答案:

頁面中每發(fā)送一次HTTP請(qǐng)求,都需要完成請(qǐng)求+響應(yīng)這個(gè)完整的HTTP事務(wù),會(huì)消耗一些時(shí)間,也可能會(huì)導(dǎo)致HTTP鏈接通道的堵塞,為了提高頁面加載速度和運(yùn)行的性能,我們應(yīng)該減少HTTP的請(qǐng)求次數(shù)和減少請(qǐng)求內(nèi)容的大小(請(qǐng)求的內(nèi)容越大,消耗的時(shí)間越長)

1、采用CSS雪碧圖(CSS Sprit / CSS 圖片精靈)技術(shù),把一些小圖合并在一張大圖上,使用的時(shí)候通過背景圖片定位,定位到具體的某一張小圖上

.pubBg{

background:url('../img/sprit.png') no-repeat;

background-size:x y; /*和原圖的大小保持一致*/

}

.box{

background-position:x y; /*通過背景定位,定位到具體的位置,展示不同的圖片即可*/

}

...

2、真實(shí)項(xiàng)目中,我們最好把CSS或者JS文件進(jìn)行合并壓縮;尤其是在移動(dòng)端開發(fā)的時(shí)候,如果CSS或者JS內(nèi)容不是很多,我們可以采取內(nèi)嵌式,以此減少HTTP請(qǐng)求的次數(shù),加快頁面加載速度;

1)CSS合并成一個(gè),JS也最好合并成一個(gè)

2)首先同過一些工具(例如:webpack)把合并后的CSS或者JS壓縮成 xxx.min.js,減少文件大小

3)服務(wù)器端開啟資源文件的GZIP壓縮

通過一些自動(dòng)化工具完成CSS以及JS的合并壓縮,或者再完成LESS轉(zhuǎn)CSS,ES6轉(zhuǎn)ES5等操作,我們把這種自動(dòng)化構(gòu)建模式,稱之為前端“工程化”開發(fā)

3、采用圖片懶加載技術(shù),在頁面開始加載的時(shí)候,不請(qǐng)求真實(shí)的圖片地址,而是用默認(rèn)圖占位,當(dāng)頁面加載完成后,在根據(jù)相關(guān)的條件依次加載真實(shí)圖片(減少頁面首次加載HTTP請(qǐng)求的次數(shù))

真實(shí)項(xiàng)目中,我們開始圖片都不加載,頁面首次加載完成,先把第一屏幕中可以看見的圖片進(jìn)行加載,隨著頁面滾動(dòng),在把下面區(qū)域中能夠呈現(xiàn)出來的圖片進(jìn)行加載

根據(jù)圖片懶加載技術(shù),我們還可以擴(kuò)充出,數(shù)據(jù)的懶加載

1)開始加載頁面的時(shí)候,我們只把首屏或者前兩屏的數(shù)據(jù)從服務(wù)器端進(jìn)行請(qǐng)求(有些網(wǎng)站首屏數(shù)據(jù)是后臺(tái)渲染好,整體返回給客戶端呈現(xiàn)的)

2)當(dāng)頁面下拉,滾動(dòng)到哪個(gè)區(qū)域,在把這個(gè)區(qū)域需要的數(shù)據(jù)進(jìn)行請(qǐng)求(請(qǐng)求回來做數(shù)據(jù)綁定以及圖片延遲加載等)

3)分頁展示技術(shù)采用的也是數(shù)據(jù)的懶加載思想實(shí)現(xiàn)的:如果我們請(qǐng)求獲取的數(shù)據(jù)是很多的數(shù)據(jù),我們最好分批請(qǐng)求,開始只請(qǐng)求第一頁的數(shù)據(jù),當(dāng)用戶點(diǎn)擊第二頁(微博是下拉到一定距離后,再請(qǐng)求第二頁數(shù)據(jù)…)的時(shí)候在請(qǐng)求第二頁數(shù)據(jù)…

4、對(duì)于不經(jīng)常更新的數(shù)據(jù),最好采用瀏覽器的304緩存做處理(主要由服務(wù)器端處理)

例如:

第一次請(qǐng)求CSS和JS下來,瀏覽器會(huì)把請(qǐng)求的內(nèi)容緩存起來,如果做了304處理,用戶再次請(qǐng)求CSS和JS,直接從緩存中讀取,不需要再去服務(wù)器獲取了(減少了HTTP請(qǐng)求次數(shù))

當(dāng)用戶強(qiáng)制刷新頁面(CTRL+F5)或者當(dāng)前緩存的CSS或者JS發(fā)生了變動(dòng),都會(huì)從新從服務(wù)器端拉取

對(duì)于客戶端來講,我們還可以基于localStorage來做一些本地存儲(chǔ),例如:第一次請(qǐng)求的數(shù)據(jù)或者不經(jīng)常更新的CSS和JS,我們都可以把內(nèi)容存儲(chǔ)在本地,下一次頁面加載,我們從本地中獲取即可,我們?cè)O(shè)定一定的期限或者一些標(biāo)識(shí),可以控制在某個(gè)階段重新從服務(wù)器獲取

5、使用字體圖標(biāo)代替一些頁面中的位圖(圖片),這樣不僅做適配的時(shí)候方便,而且更加輕量級(jí),而且減少了HTTP請(qǐng)求次數(shù)(類似于雪碧圖)

6、如果當(dāng)前頁面中出現(xiàn)了AUDIO或者VIDEO標(biāo)簽,我們最好設(shè)置它們的preload=none:頁面加載的時(shí)候,音視頻資源不進(jìn)行加載,播放的時(shí)候再開始加載(減少頁面首次加載HTTP請(qǐng)求的次數(shù))

preload=auto:頁面首次加載的時(shí)候就把音視頻資源進(jìn)行加載了

preload=metadata:頁面首次加載的時(shí)候只把音視頻資源的頭部信息進(jìn)行加載

7、在客戶端和服務(wù)器端進(jìn)行數(shù)據(jù)通信的時(shí)候,我們盡量采用JSON格式進(jìn)行數(shù)據(jù)傳輸

[優(yōu)勢(shì)]

1)JSON格式的數(shù)據(jù),能夠清晰明了的展示出數(shù)據(jù)結(jié)構(gòu),而且也方便我們獲取和操作

2)相對(duì)于很早以前的XML格式傳輸,JSON格式的數(shù)據(jù)更加輕量級(jí)

3)客戶端和服務(wù)器端都支持JSON格式數(shù)據(jù)的處理,處理起來非常的方便

真實(shí)項(xiàng)目中,并不是所有的數(shù)據(jù)都要基于JSON,我們盡可能這樣做,但是對(duì)于某些特殊需求(例如:文件流的傳輸或者文檔傳輸),使用JSON就不合適了

8、采用CDN加速

CDN:分布式(地域分布式)

關(guān)于編寫代碼時(shí)候的一些優(yōu)化技巧

除了減少HTTP請(qǐng)求次數(shù)和大小可以優(yōu)化性能,我們?cè)诰帉懘a的時(shí)候,也可以進(jìn)行一些優(yōu)化,讓頁面的性能有所提升(有些不好的代碼編寫習(xí)慣,會(huì)導(dǎo)致頁面性能消耗太大,例如:內(nèi)存泄漏)

1、在編寫JS代碼的時(shí)候,盡量減少對(duì)DOM的操作(VUE和REACT框架在這方面處理的非常不錯(cuò))

在JS中操作DOM是一個(gè)非常消耗性能的事情,但是我們又不可避免的操作DOM,我們只能盡量減少對(duì)于它的操作

[操作DOM弊端]

1)DOM存在映射機(jī)制(JS中的DOM元素對(duì)象和頁面中的DOM結(jié)構(gòu)是存在映射機(jī)制的,一改則都改),這種映射機(jī)制,是瀏覽器按照W3C標(biāo)準(zhǔn)完成對(duì)JS語言的構(gòu)建和DOM的構(gòu)建(其實(shí)就是構(gòu)建了一個(gè)監(jiān)聽機(jī)制),操作DOM是同時(shí)要修改兩個(gè)地方,相對(duì)于一些其它的JS編程來說是消耗性能的

2)頁面中的DOM結(jié)構(gòu)改變或者樣式改變,會(huì)觸發(fā)瀏覽器的回流(瀏覽器會(huì)把DOM結(jié)構(gòu)重新進(jìn)行計(jì)算,這個(gè)操作很耗性能)和重繪(把一個(gè)元素的樣式重新渲染)

2、編寫代碼的時(shí)候,更多的使用異步編程

同步編程會(huì)導(dǎo)致:上面東西完不成,下面任務(wù)也做不了,我們開發(fā)的時(shí)候,可以把某一個(gè)區(qū)域模塊都設(shè)置為異步編程,這樣只要模塊之間沒有必然的先后順序,都可以獨(dú)立進(jìn)行加載,不會(huì)受到上面模塊的堵塞影響(用的不多)

尤其是AJAX數(shù)據(jù)請(qǐng)求,我們一般都要使用異步編程,最好是基于promise設(shè)計(jì)模式進(jìn)行管理(項(xiàng)目中經(jīng)常使用 fetch、vue axios 等插件來進(jìn)行AJAX請(qǐng)求處理,因?yàn)檫@些插件中就是基于promise設(shè)計(jì)模式對(duì)ajax進(jìn)行的封裝處理)

3、在真實(shí)項(xiàng)目中,我們盡可能避免一次性循環(huán)過多數(shù)據(jù)(因?yàn)檠h(huán)操作是同步編程),尤其是要避免while導(dǎo)致的死循環(huán)操作

4、CSS選擇器優(yōu)化

1)盡量減少標(biāo)簽選擇器的使用

2)盡可能少使用ID選擇器,多使用樣式類選擇器(通用性強(qiáng))

3)減少選擇器前面的前綴,例如:.headerBox .nav .left a{ } (選擇器是從右向左查找的)

5、避免使用CSS表達(dá)式

/*CSS表達(dá)式*/

.box{

background-color:expression((new Date()).getHours()%2?'red':'blue')

}

6、減少頁面中的冗余代碼,盡可能提高方法的重復(fù)使用率:“低耦合高內(nèi)聚”

7、最好CSS放在HEAD中,JS放在BODY尾部,讓頁面加載的時(shí)候,先加載CSS,在加載JS(先呈現(xiàn)頁面,在給用戶提供操作)

8、JS中避免使用eval

1)性能消耗大

2)代碼壓縮后,容易出現(xiàn)代碼執(zhí)行錯(cuò)亂問題

9、JS中盡量減少閉包的使用

1)閉包會(huì)形成一個(gè)不銷毀的棧內(nèi)存,過多的棧內(nèi)存累積會(huì)影響頁面的性能

2)還會(huì)容易導(dǎo)致內(nèi)存的泄漏

閉包也有自己的優(yōu)勢(shì):保存和保護(hù),我們只能盡量減少,但是無可避免

10、在做DOM事件綁定的時(shí)候,盡量避免一個(gè)個(gè)的事件綁定,而是采用性能更高的事件委托來實(shí)現(xiàn)

事件委托(事件代理)

把事件綁定給外層容器,當(dāng)里面的后代元素相關(guān)行為被觸發(fā),外層容器綁定的方法也會(huì)被觸發(fā)執(zhí)行(冒泡傳播機(jī)制導(dǎo)致),通過事件源是誰,我們做不同的操作即可

11、盡量使用CSS3動(dòng)畫代替JS動(dòng)畫,因?yàn)镃SS3的動(dòng)畫或者變形都開啟了硬件加速,性能比JS動(dòng)畫好

12、編寫JS代碼的時(shí)候盡可能使用設(shè)計(jì)模式來構(gòu)建體系,方便后期的維護(hù),也提高了擴(kuò)充性等

13、CSS中減少對(duì)濾鏡的使用,頁面中也減少對(duì)于FLASH的使用

文章題目:前端開發(fā)中提高頁面加載速度的小技巧講解
本文網(wǎng)址:http://m.rwnh.cn/news0/84800.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、軟件開發(fā)定制開發(fā)、品牌網(wǎng)站設(shè)計(jì)企業(yè)網(wǎng)站制作、用戶體驗(yàn)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化
徐州市| 高雄县| 金昌市| 肃北| 章丘市| 永宁县| 东兰县| 会同县| 青海省| 滨州市| 闵行区| 汽车| 桐庐县| 金堂县| 丹阳市| 家居| 镇原县| 莱芜市| 绿春县| 雅安市| 都安| 大足县| 蒙城县| 金乡县| 三门峡市| 武义县| 凌源市| 西乌珠穆沁旗| 韶关市| 祁阳县| 元江| 临颍县| 南岸区| 广平县| 博客| 喀喇| 明光市| 铜鼓县| 南昌市| 青浦区| 会昌县|