前端性能優化

時間 2019-11-06

原文原文鏈接

頁面交互全過程

從輸入URL到頁面加載完成的過程：css

首先經過DNS（域名解析）把URL解析爲對應的IP地址，
而後與該IP地址肯定的服務器創建起TCP網絡鏈接。
隨後向服務器發送HTTP請求
服務器處理完HTTP請求後把目標數據放在HTTP響應裏面呈現給客戶端
瀏覽器拿到目標數據的後開始渲染把頁面呈現給用戶，而且時時等待響應用戶的操做。

概括爲: 
    一、DNS解析
    二、TCP鏈接
    三、HTTP請求
    四、服務端處理，HTTP響應返回        
    五、拿到目標數據，解析數據並渲染結果，向用戶展現結果
複製代碼

前端性能優化

前端性能優化點以下:

其中DNS解析和TCP網絡鏈接，前端能作的很是有限。因此HTTP請求優化就成爲咱們優化的核心了。

前端主要優化點:

一、webpack性能調優與Gzip原理優化
  二、瀏覽器的緩存機制和緩存策略
  三、圖片優化——質量和性能的平衡點
  四、本地存儲——Cookie、Web Storage、IndexDB
  五、CDN的緩存和回源機制
  六、服務端渲染
  七、瀏覽器運行機制
  八、DOM優化原理與實踐
  九、Event Loop與異步更新策略
 十、迴流和重繪
 十一、首屏優化
複製代碼

圖片優化

圖片格式的不一樣

大小比較：一般地，PNG ≈ JPG > GIF
透明性：PNG > GIF > JPG
色彩豐富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG
複製代碼

優化圖片

1、雪碧圖(精靈圖)

即css sprites，就是把不少小圖片製做成一個大圖，而後做爲背景圖片使用，定位便可。
優勢：很明顯：減小了大量的http請求。
缺點：背景定位較爲麻煩，其實不算缺點。

2、圖片壓縮

圖片壓縮是很簡單的，就是無損壓縮了。
相關知識可閱讀圖片格式規範
推薦一個壓縮圖片的網站—智圖: 智圖壓縮圖好快

1. 優先使用png而不是GIF
2. 壓縮png
3. 去掉jpg的metadata
4. 壓縮gif動畫
5. 嘗試使用png8
6. 避免使用AlphaImageLoader
7. 壓縮動態生成的圖像
8. 使 favicon 更小，可緩存
9. 使用css sprites 
複製代碼

3、響應式圖片

不論是pc仍是移動端，都會有不少不一樣尺寸的圖片，若是你作的是響應式網站和移動端的話，那麼你就更須要考慮圖片尺寸的選擇問題了
移動端的屏幕分辨率和尺寸太多，因此就可能須要不一樣的尺寸加載不一樣尺寸的圖片，這樣就節省了網站的訪問流量，以及頁面渲染的效率先展現如今設備的分辨率等的圖
若是想查看更多的話，就去devices

經過css定義來加載不一樣的背景bg圖片html

@media only screen and (max-width : 480px) {
    .img {background-image: url(bg-480.jpg);}
}
@media only screen and (max-width : 360px) {
    .img {background-image: url(bg-360.jpg);}
}
複製代碼

Img的srcset和sizes的方法前端

這兩個img屬性是html5的屬性，有瀏覽器的兼容問題
srcset指定圖片的地址和對應的圖片質量。sizes用來設置圖片的尺寸零界點
對於srcset和sizes，詳解點擊查看

<img class="img"  src="imgbg-320.jpg"
     srcset="imgbg-320.jpg 320w, imgbg-360.jpg 360w, imgbg-480px.jpg 480w"
     sizes="(max-width: 480px) 480px, 320px">
複製代碼

4、base64

base64編碼的大小比原圖大小更大一些，可是能夠減小http請求。通常是原圖大小的4/3;

5、延遲加載 (懶加載)

圖片延遲加載也稱懶加載，一般應用於圖片比較多的網頁，若是一個頁面圖片比較多，且頁面高度或寬度有好幾屏，頁面初次加載時，只顯示可視區域的圖片（非可視區域圖片使用1*1的圖片佔位，圖片大小css控制），當頁面滾動的時候，圖片進入了可視區域再進行加載（修改src），這樣能夠顯著的提升頁面的加載速度，更少的圖片併發請求數也能夠減輕服務器的壓力。若是用戶僅僅在首屏停留，還能夠節省流量。具體的實現方法能夠看一個插件，就叫lazeload。

6、圖標字體

用過bootstrap的同窗確定對方便的fontawesome圖標字體印象深入，能夠無損放大縮小，能夠修改顏色，只要加個類名就可使用圖標，感受是否是很爽🌚。優點呢。。。矢量&方便好用，不過圖標沒有必定的量可能不大須要，並且矢量圖可能美工壓力也比較大，咱們只要知道怎麼用就行啦，有的時候用現成的圖標減輕一下美工同窗的工做量也是極好的。能夠看一下一個專門用來作圖標字體的網站。

7、SVG

svg做爲矢量圖，和iconfont對比起來優點可能就是字體可能在樣式修改方面受限較多，其次字體文件通常都弄的挺大的，而後兼容性差點。svg也能夠認爲就是圖片，使用方法也很簡單。

8、圖片顯示優化

首先，固定圖片外層div的高度和寬度，而後img設置爲100%（寬高都是如此），背景顏色要有，這樣，即便沒有顯示出來，也是能夠看得。重要，設置圖片的 onload 事件，首先要設置圖片爲display: none；而後當圖片onload以後，咱們再將之加載出來，而且加載時透明度能夠是一個遞增的過程。代碼大體以下（vue項目寫的）：

**html代碼**
 <img src="picture" alt=""  style="display: none;" v-on:load="getSomething($event)" >

**js代碼**
getSomething (e) {
    var target = e.currentTarget;
    target.style.opacity = 0;
    target.style.display = 'block'
    var timer = setInterval(function () {
        target.style.opacity = parseFloat(target.style.opacity) + 0.01;
        if (parseFloat(target.style.opacity) >= 0.98) {
        clearInterval(timer);
        }
    }, 30);
}
複製代碼