移動web性能優化從入門到進階--基礎篇

時間 2019-11-05

標籤移動 web 性能優化入門進階基礎欄目無線简体版

原文原文鏈接

關於前端性能優化相關的技術知識，網上隨便搜一些就有不少，本文將系統性的從初級到高級的思路，總結移動前端性能優化各個方面的相關技術點，內容來自筆者以往經驗的總結，但願讀者能夠花些時間看看。javascript

在目前大多數剛從事前端開發，或者是正在學習前端開發的同窗來講，性能優化對於他們可能還比較遠，可是脫穎而出，拉開差距的點，每每就在與性能優化，和理論知識不一樣，性能優化每每來自平常的工做經驗中總結而來，也是目前大廠面試前端必問的知識點，因此重要性就不言而喻了。php

一，入門篇

1.資源合併與壓縮

爲何要壓縮？css

不一樣於大部分放在服務端的後臺代碼，前端全部的文件程序代碼都是要經過瀏覽器下載下來運行使用，這就牽扯到網絡和請求延時，因此前端文件的精簡和壓縮決定了前端性能的第一步。html

介於目前的前端框架類庫，webpack，vue-cli等等，已經能夠直接將這一步操做集成到咱們的系統項目中了，能夠直接查看各個框架的文檔來進行配置，單純的使用原生技術，能夠參考下面：前端

html的壓縮

HTML代碼壓縮就是壓縮這些在文本文件中有意義，可是在HTML中不顯示的字符，包括空格,製表符,換行符等，還有一些其餘意義的字符，如HTML註釋也能夠被壓縮。vue

Nodejs的html-minifier。
在線壓縮工具，站長工具等等。

CSS和JavaScript文件的壓縮

JavaScript壓縮，主要是去除多餘的換行和空格等等，對於語法來講，JavaScript能夠選擇混淆壓縮和非混淆壓縮，不管哪一種壓縮都是爲了減小JavaScript的文件大小，固然出於前端代碼保護來看，混淆壓縮會大大破壞原有的閱讀邏輯，增長壓縮比，從而給代碼添加一層保護。 CSS壓縮，同理是去除多餘的換行和空格等等，因爲CSS文件的特殊性暫時沒法實現混淆壓縮，壓縮主要是將大量的換行去除，能夠減小很多的文件大小。java

Nodejs的uglifyjs2是一個強大的JavaScript壓縮庫。
Nodejs的clean-css是一個強大的CSS壓縮庫。
在線壓縮工具，站長工具等等。

圖片的壓縮

對於常見的前端項目，關於圖片的使用，主要有如下兩種：node

固定圖標，背景，按鈕icon等等，這些圖片有一個特色就是固定和用戶無關，通常是放在源碼包裏面，由前端代碼直接引入。
人物頭像，文章配圖，內容圖片等等，這些非固定圖片通常由用戶上傳，有很強的用戶性，這些圖片通常放在CDN上，前端經過連接請求。

對於固定圖片，推薦tinypng.com/在線壓縮以後再進行引入，支持png，jpeg類型的圖片，屬於有損壓縮，去除圖片一些沒必要要的元數據，把類似像素的24bit位用8bit位來表示，肉眼很難區分，壓縮率70%。
採用CSS雪碧圖：把你的網站用到的一些圖片整合到一張單獨的圖片中：優勢：減小HTTP請求的數量(經過backgroundPosition定位所需圖片)。缺點：整合圖片比較大時，加載比較慢(若是這張圖片沒有加載成功，整個頁面會失去圖片信息)。
對於非固定圖片，常見的優化壓縮主要有如下幾種原則：優先使用壓縮率高的jpeg類型圖片，缺點是不支持透明。有條件的話使用webP(一種Google開發的新類型)類型圖片是最佳選擇，相比於jpeg，有更小的文件尺寸和更高的圖像質量。

資源合併

在前端編碼的時候將css、js等靜態資源文件合併壓縮以外，咱們還能夠在頁面中將多個css、js的請求合併爲一個請求。文件的合併帶來的是http請求數的減小，尤爲是在移動端，每個http請求帶來的是慢啓動，三次握手，鏈接創建，因此資源的合併是由爲重要的，合併和不合並對比： webpack

2.瀏覽器加載原理優化

HTML頁面加載渲染的過程： git

根據上圖咱們來屢一下整個流程：

當瀏覽器從服務器接收到了HTML文檔，並把HTML在內存中轉換成DOM樹，在轉換的過程當中若是發現某個節點(node)上引用了CSS或者 IMAGE，就會再發1個request去請求CSS或image,而後繼續執行下面的轉換，而不須要等待request的返回，當request返回後，只須要把返回的內容放入到DOM樹中對應的位置就OK。
但當引用了JS的時候，瀏覽器發送1個js request就會一直等待該request的返回。
由於瀏覽器須要1個穩定的DOM樹結構，而JS中頗有可能有代碼直接改變了DOM樹結構，瀏覽器爲了防止出現JS修改DOM樹，須要從新構建DOM樹的狀況，因此就會阻塞其餘的下載和呈現。那麼如何解決和避免阻塞的問題呢，咱們經過測試代碼分別測試不一樣狀況下引入js和css的問題以下：

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel=」stylesheet」 type=」text/css」 href=」stylesheet.css」 media=」screen」>
      <link rel=」stylesheet」 type=」text/css」 href=」page-animation.css」 media=」screen」>
      <script type =」text/javascript」 > var f = 1; f++; </script > </head> <body> <img src=」download-button.png」> </body> </html> 複製代碼

測試過程省略，能夠參考這裏，咱們能夠獲得以下的結論：

瀏覽器存在併發加載：資源請求是併發請求的。
瀏覽器中能夠支持併發請求，不一樣瀏覽器所支持的併發數量不一樣（以域名劃分），以Chrome爲例，併發上限爲6優化點：把CDN資源分佈在多個域名下。
css 在head中經過link引入會阻塞頁面的渲染，處於頁面樣式，咱們必須這樣放置。
直接經過<script src>引入的外部js會阻塞後面節點的渲染，因此外部js儘可能放在body底部。
在head裏面儘可能不要引入js。
若是要引入js 儘可能將js內嵌。
把內嵌js放在全部link引入css的前面。
對於要阻塞後續內容的的外部js<script src>，須要增長defer來解決。

3.緩存優化

若是一個H5頁面沒有利用任何緩存，那麼這個頁面將沒有任何存在的意義。

從從HTTP協議緩存，到瀏覽器緩存，再到APP Cache，一直在最近比較火的Service worker，咱們能夠選擇多種的緩存方式，入門基原本說說HTTP協議緩存：

強緩存：Expires&Cache-Control

當瀏覽器對某個資源的請求命中了強緩存時，返回的HTTP狀態爲200，在chrome的開發者工具的network裏面 size會顯示爲from disk cache，這種狀況下是不用發送任何請求，以下圖

Expires：指定了在瀏覽器上緩衝存儲的頁距過時還有多少時間，等同Cache-control中的max-age的效果，若是同時存在，則被Cache-Control的max-age覆蓋。
Cache-Control：
- public：響應被緩存，而且在多用戶間共享。
- private：默認值，響應只可以做爲私有的緩存(e.g., 在一個瀏覽器中)，不能再用戶間共享；
- no-cache：響應不會被緩存,而是實時向服務器端請求資源。
- max-age：數值，單位是秒，從請求時間開始到過時時間之間的秒數。基於請求時間（Date字段）的相對時間間隔，而不是絕對過時時間；

協商緩存：Last-Modified&Etag

當瀏覽器對某個資源的請求沒有命中強緩存，就會發一個請求到服務器，驗證協商緩存是否命中，若是協商緩存命中，請求響應返回的http狀態爲304而且會顯示一個Not Modified的字符串，好比你打開京東的首頁，按f12打開開發者工具，再按f5刷新頁面，查看network，能夠看到有很多請求就是命中了協商緩存的：

Last-Modified/If-Modified-Since：本地文件在服務器上的最後一次修改時間。緩存過時時把瀏覽器端緩存頁面的最後修改時間發送到服務器去，服務器會把這個時間與服務器上實際文件的最後修改時間進行對比，若是時間一致，那麼返回304，客戶端就直接使用本地緩存文件。
Etag/If-None-Match：(EntityTags)是URL的tag，用來標示URL對象是否改變，通常爲資源實體的哈希值。和Last-Modified相似，若是服務器驗證資源的ETag沒有改變（該資源沒有更新），將返回一個304狀態告訴客戶端使用本地緩存文件。Etag的優先級高於Last-Modified，Etag主要爲了解決
Last-Modified 沒法解決的一些問題。
- 文件也許會週期性的更改，可是他的內容並不改變，不但願客戶端從新get；
- If-Modified-Since能檢查到的粒度是s級；
- 某些服務器不能精確的獲得文件的最後修改時間。

4.懶加載與預加載

懶加載對於移動web端，尤爲是最多見的滾動加載場景是一項很是重要的優化措施。而預加載則經常應用於多tab場景的頁面，讓用戶更快的看到打開的下一個頁面。

懶加載

圖片進入可視區域以後請求圖片資源。
對於電商等圖片不少，頁面很長的業務場景適用。
減小無效資源的加載。
併發加載的資源過多會會阻塞js的加載，影響網站的正常使用。 img src被設置以後，webkit解析到以後纔去請求這個資源。因此咱們但願圖片到達可視區域以後，img src纔會被設置進來，沒有到達可視區域前並不現實真正的src，而是相似一個1px的佔位符。