web前端性能優(yōu)化

elliott_hu 發(fā)布于2019-08-23 17:07 / 992人閱讀

摘要：前言性能優(yōu)化是每個(gè)項(xiàng)目都需要注意的問題，在這里結(jié)合項(xiàng)目實(shí)際情況較為系統(tǒng)的整理下前端性能優(yōu)化簡(jiǎn)單可以概括為以下幾點(diǎn)減少需要加載資源的體積按需加載就是每個(gè)頁面之加載需要的內(nèi)容，這一點(diǎn)在多頁應(yīng)用中一般都有注意，單頁應(yīng)用可以用的與的異步組件實(shí)現(xiàn)由于

前言

性能優(yōu)化是每個(gè)項(xiàng)目都需要注意的問題，在這里結(jié)合項(xiàng)目實(shí)際情況較為系統(tǒng)的整理下

web前端性能優(yōu)化簡(jiǎn)單可以概括為以下幾點(diǎn)

1 減少需要加載資源的體積 1.1 按需加載

就是每個(gè)頁面之加載需要的內(nèi)容，這一點(diǎn)在多頁應(yīng)用中一般都有注意，單頁應(yīng)用可以用webpack的import與vue的異步組件實(shí)現(xiàn)；react由于本人不熟，肯定也有相應(yīng)的解決方案

1.2 資源壓縮

在目前的webpack4+中，只要將mode設(shè)置為production，webpack就會(huì)將對(duì)應(yīng)的資源（html、css、js）進(jìn)行壓縮；gulp也有對(duì)應(yīng)的模塊（html-min,uglify）

1.3 懶加載

將首屏不需要展示內(nèi)容做懶加載處理，在需要展示時(shí)（比如滾動(dòng)屏幕）再加載需要的內(nèi)容

2 加快加載的速度 2.1 css精靈圖

這是一種比較常用的技術(shù)，就是jiang將頁面需要展示的小圖片圖標(biāo)集中到一整張圖片中，通過background-position設(shè)置來展示，原理是由于瀏覽器對(duì)同一域名下的請(qǐng)求有并發(fā)個(gè)數(shù)限制（一般在4-10個(gè)）

2.2 cdn加速

cdn原理簡(jiǎn)單來說就是通過dns的負(fù)載均衡，將訪問解析到最近的服務(wù)器，該服務(wù)器首次會(huì)到目標(biāo)服務(wù)器加載內(nèi)容，同時(shí)會(huì)緩存該內(nèi)容，此后該地區(qū)訪問此資源的時(shí)候就能直接讀取服務(wù)器上的緩存內(nèi)容；從而塊加載的速度；同時(shí)還可以突破瀏覽器的并發(fā)個(gè)數(shù)限制于服務(wù)器的帶寬限制

3 http協(xié)議相關(guān)(需要對(duì)服務(wù)器軟件進(jìn)行相應(yīng)配置) 3.1 緩存

3.1.1 Last-Modified(http1.0)與ETag(http1.1)，瀏覽器會(huì)對(duì)響應(yīng)頭中有此兩個(gè)字段的內(nèi)容進(jìn)行緩存，下次訪問此資源的時(shí)候會(huì)帶上f-Modified-Since(與Last-Modified相對(duì)應(yīng))If-None-Match(與ETag相對(duì)應(yīng));服務(wù)器在識(shí)別到文件沒有變化的時(shí)候，會(huì)返回狀態(tài)碼304,同時(shí)也不會(huì)返回響應(yīng)體；瀏覽器接收到服務(wù)器返回的內(nèi)容后就會(huì)從緩存中讀取相應(yīng)內(nèi)容；
關(guān)于為什么會(huì)有兩個(gè)字段，http1.0與http1.1各一個(gè)，因?yàn)閔ttp1.0中的約定會(huì)有服務(wù)器于客戶端時(shí)間不一致的情況；下同

3.1.2 Expires（http1.0）與Cache-Control: max-age=86400（http1.1），此個(gè)字段與3.1.1類似，不同的是瀏覽器讀到對(duì)應(yīng)緩存后，如果沒過期，就不會(huì)請(qǐng)求服務(wù)器，直接使用緩存里的內(nèi)容

3.1.3 keep-alive，與tcp協(xié)議的三次握手相關(guān)，有此字段將會(huì)保持tcp鏈接，省去再次握手的過程；保持的時(shí)間可通過服務(wù)器軟件進(jìn)行配置

3.1.4 Accept-Encoding，這個(gè)需要瀏覽器處理

4 瀏覽器相關(guān) 4.1 defer與async

由于script會(huì)阻塞瀏覽器對(duì)html的解析，對(duì)與沒有依賴關(guān)系的script加上defer或async

4.2 圖片用背景圖的形式展示

此方法是由于img標(biāo)簽會(huì)阻塞html的解析

結(jié)語

性能優(yōu)化認(rèn)證道遠(yuǎn)，目前只想到這些，算是拋磚引玉了，有沒涉及到或者錯(cuò)誤之處請(qǐng)大佬們不吝指正，謝謝~~