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

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

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

　　.pubBg{

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

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

　　}

　　.box{

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

　　}

　　...

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

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

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

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

　　…

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

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

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

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

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

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

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

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

　　例如：

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

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

　　…

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

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

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

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

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

　　…

　　7、在客戶(hù)端和服務(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)客戶(hù)端和服務(wù)器端都支持JSON格式數(shù)據(jù)的處理，處理起來(lái)非常的方便

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

　　8、采用CDN加速

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

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

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

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

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

　　[操作DOM弊端]

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

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

　　…

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

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

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

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

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

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

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

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

　　…

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

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

　　.box{

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

　　}

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

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

　　8、JS中避免使用eval

　　1)性能消耗大

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

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

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

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

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

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

　　事件委托(事件代理)

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

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

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

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