web前端性能優化

前言

性能優化是每一個項目都須要注意的問題，在這裏結合項目實際狀況較爲系統的整理下

web前端性能優化簡單能夠歸納爲如下幾點

1 減小須要加載資源的體積

1.1 按需加載

就是每一個頁面之加載須要的內容，這一點在多頁應用中通常都有注意，單頁應用能夠用webpack的import與vue的異步組件實現；react因爲本人不熟，確定也有相應的解決方案

1.2 資源壓縮

在目前的webpack4+中，只要將mode設置爲production，webpack就會將對應的資源（html、css、js）進行壓縮；gulp也有對應的模塊（html-min,uglify）

1.3 懶加載

將首屏不須要展現內容作懶加載處理，在須要展現時（好比滾動屏幕）再加載須要的內容

2 加快加載的速度

2.1 css精靈圖

這是一種比較經常使用的技術，就是jiang將頁面須要展現的小圖片圖標集中到一整張圖片中，經過background-position設置來展現，原理是因爲瀏覽器對同一域名下的請求有併發個數限制（通常在4-10個）

2.2 cdn加速

cdn原理簡單來講就是經過dns的負載均衡，將訪問解析到最近的服務器，該服務器首次會到目標服務器加載內容，同時會緩存該內容，此後該地區訪問此資源的時候就能直接讀取服務器上的緩存內容；從而塊加載的速度；同時還能夠突破瀏覽器的併發個數限制於服務器的帶寬限制

3 http協議相關(須要對服務器軟件進行相應配置)

3.1 緩存

3.1.1 Last-Modified(http1.0)與ETag(http1.1)，瀏覽器會對響應頭中有此兩個字段的內容進行緩存，下次訪問此資源的時候會帶上f-Modified-Since(與Last-Modified相對應)If-None-Match(與ETag相對應);服務器在識別到文件沒有變化的時候，會返回狀態碼304,同時也不會返回響應體；瀏覽器接收到服務器返回的內容後就會從緩存中讀取相應內容；
關於爲何會有兩個字段，http1.0與http1.1各一個，由於http1.0中的約定會有服務器於客戶端時間不一致的狀況；下同

3.1.2 Expires（http1.0）與Cache-Control: max-age=86400（http1.1），此個字段與3.1.1相似，不一樣的是瀏覽器讀到對應緩存後，若是沒過時，就不會請求服務器，直接使用緩存裏的內容

3.1.3 keep-alive，與tcp協議的三次握手相關，有此字段將會保持tcp連接，省去再次握手的過程；保持的時間可經過服務器軟件進行配置

3.1.4 Accept-Encoding，這個須要瀏覽器處理

4 瀏覽器相關

4.1 defer與async

因爲script會阻塞瀏覽器對html的解析，對與沒有依賴關係的script加上defer或async

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

此方法是因爲img標籤會阻塞html的解析

結語

性能優化認證道遠，目前只想到這些，算是拋磚引玉了，有沒涉及到或者錯誤之處請大佬們不吝指正，謝謝~~