第18篇—移動端性能優化

性能優化的幾個重要指標

• 頁面加載
• 圖片優化
• CSS優化
• 腳本優化

H5性能考量

• 瀏覽器性能
  • 傳統網站性能檢測的幾種方式
    • 藉助傳統的開發者工具查看網絡請求，也就是說使用瀏覽器的開發者工具
    • 使用侵入式的JavaScript代碼檢測DOM事件的發生
    • 使用第三方的服務工具，例如： webPagetest Pingdom
  • 以上的這幾種測試方式的測量指標都是比較單一的，基本只是起到流量計算和計時的做用，對於其餘一些指標，如電池的狀態等方面的測試沒有檢測體現，並且按照傳統的方式是很難實現的
  • 爲了解決這個問題，W3c推出了一套性能測試API標準，目前各瀏覽器對這套標準的支持都是很是 成熟的，這套標準的目的是簡化開發者對網站性能進行精確分析與控制的過程，最終實現性能的提升
  • 例如：Navigation Timing API(導航計時),可以幫助網站開發者檢測真實用戶數據，例如：帶寬、延遲或主頁的總體加載時間
• 網絡性能
  • 爲用戶節省流量是移動開發中須要考慮的問題，在前端技術中，須要一些既能節省帶寬又能讓頁面體驗良好的策略。
  • 常見的網路性能問題有如下幾種：
    • DNS問題：
      • DNS被劫持或者失效
      • DNS解析慢或者失敗
    • TCP鏈接問題：DNS成功後得到目的IP地址，即可以發起TCP鏈接，所以TCP鏈接的成功和耗時也成爲網絡性能的一個因素。TCP鏈接中常見的問題有TCP端口被封以及TCP鏈接超時
    • 傳輸負載過大： 傳的多就傳的慢，若是沒有作特別的優化，傳輸負載可能會比實際須要的大的多，對於總體網 絡耗時影響很是大，所以須要特別注意控制頁面體積大小，避免負載過大
    • 複雜的國內外網絡狀況，國內運營商互聯和海外訪問國內帶寬低，傳輸慢的問題也是很是棘手的。
• 開發效率
  • 開發效率能夠從幾個方面考慮：更好的代碼複用，簡潔的頁面，模塊化
  • 庫和框架的選型：常見的庫：Animate.css、jquery、Vue.js、React.js、underscore.js、Bootstrap、backbone.js、Font Awesome（字體圖標庫）、zepto.js(主要針對於移動端，和jquery很是類似)、jade | ejs、normalize.css、compass(Sass的工具庫)、Angular
  • 構建工具
    • webpack:模塊打包器，目前使用最普遍的一個
    • gulp.js:基於流的自動化構建工具
  • JavaScript/CSS模塊發開發：分而治之是軟件工程中重要的思想，是複雜系統開發和維護的基石
  • 組件化開發：組件化開發具備較高的通用性，不管是前端喧嚷的單頁面仍是後端模板渲染的多頁面應用，組件開發思想都是可使用的。

加載優化

• 對於一個移動端產品功能和加載速度是用戶體驗中不可或缺的一部分，最佳打開時間1-2s。對於網站的開發者來講，提高用戶體驗是整個網站的核心價值，其中提升網站的加載速度是最基本的用戶體驗。
• 減小http請求從下面兩方面入手
  • 域名收斂：通常狀況下一個頁面產生的域名解析數不能超過5個
  • 減小請求數
    • 將腳本和樣式表合併，這就是開發思想中的治，發佈的時候須要將多個模塊合併成單一的文件，這有webpack幫咱們實現
    • CSS Sprites: CSS圖片合成技術，將多個小圖片能夠合併成一個合成圖，經過背景定位的方式定位到須要的圖片
• 充分利用緩存
  • 使用緩存能夠減小向服務器的請求數，節省加載時間，因此全部靜態資源都要在服務器端設置緩存，而且儘可能使用長cache，長cache資源的更新可使用不一樣時間戳來更新。合理設置資源的過時時間，尤爲對一些靜態的不須要改變的資源，將其緩存時間設置的長一些
  • 使用CDN
  • 添加緩存頭：瀏覽器經過緩存減小HTTP的請求數量，使得web頁面加載更快，對於實時性不高的資源，服務器經過向其設置緩存頭部信息，告訴客戶端的瀏覽器可使用緩存再瀏覽器本地的組件。
• 壓縮
  • 較少資源大小不只能夠減少存儲空間，還能夠在網絡傳輸文件時較少傳輸時間，加快網頁顯示速度，所以要對HTML CSS JavaScript等資源進行代碼壓縮
  • 文本數據壓縮：文本數據（HTML CSS JavaScript）的優化與壓縮分爲3個階段，即發佈準備（去除註釋，合併css 去除不被執行的JavaScript代碼）、編譯期壓縮(合併文件，去除空格，混淆)和傳輸期壓縮(gzip)。注意點：gzip是使用無損壓縮算法的一種，最先用於Unix系統的文件壓縮，它屬於服務器端代碼壓縮，通常純文本內容可壓縮到原大小的40%
  • 圖片壓縮：常見的圖片格式.jpeg/.jpg .png .gif webp
  • 優化JavaScript加載性能
    • 一個頁面從開始到呈現完畢主要經歷的四個階段

      

    • 無阻塞加載：關鍵在於頁面加載完成後才加載JavaScript代碼，這也就覺得着window對象的onload事件觸發後再下載腳本，defer和async也是能夠的方案，可是太老的瀏覽器不支持這兩個屬性，須要注意的是在使用async的狀況下，js腳本一但下載好就會當即執行，若是js腳本有先後的依賴性，極可能會出錯，所以使用過程要當心。
  • 首屏加載優化、按需加載
    • 首屏加載因遵循一個「秒出法則」
    • 按需加載的兩種實現方式
      • 懶加載：經過相關的懶加載庫來實現
      • 響應式加載：經過JavaScript或者媒體查詢來判斷分辨率，從而實現不一樣尺寸的圖片等對應資源進行加載引入
  • 預加載：經過用戶行爲判斷用戶下一步能夠進行的操做，提早在首屏渲染結束以後預加載相應的資源，實現方式：預加載一個頁面：<link rel = "prefetch" href= "www.example.com">，預加載一個圖片：<link rel="prefetch" href="image.jpg">。和預加載對應的另外一種技術是DNS與解析技術（DNS Prefetch）當用戶瀏覽網頁時，瀏覽器會在加載網頁的域名進行解析緩存，這樣在用戶點擊網頁中的鏈接的時候就無需再次進行DNS解析，減小用戶等待實現，提升用戶體驗
• 其餘加載優化
  • 優化cookie
    • 衆所周知，http是一個無狀態協議，因此客戶端每次發出請求時，下一次請求沒法得知上一次請求所包含的狀態數據，如何把一個用戶的狀態關聯起來，cookie是解決這個問題的方法之一，下圖是服務器與瀏覽器之間cookie的處理與傳遞

      

    • 經過上圖咱們能夠看出，cookie在訪問對應域名下的時候會經過http請求發送到服務器，因此經過合理的設計cookie，減小cookie的體積，可以減小http請求報文的大小，提升響應速度
    • 咱們知道一個問題，瀏覽器發起http請求的時候，都會把cookie也附加上一次發送過去，咱們有沒有什麼辦法能夠解決，不須要cookie的時候，不要讓它發送過去。解決辦法就是用專門的主機存儲相應的文件。例如用專門的主機存儲相關的資源，例如：圖片均使用gw.example.coom存儲，而JavaScript資源使用g.example.com存儲，ajax請求使用api.m.example.com存儲，這樣在訪問這些資源的時候就不會發送多餘的cookie
  • 避免重定向
    • 重定向是用於將用戶從一個URL從新路由到另外一個URL。
    • 301：永久重定向，這個狀態碼錶示用戶請求的資源被移動到了另外的位置，客戶收到此響應後，須要發起另一個請求去下載所需的資源
    • 302：臨時重定向：也須要發起另一個請求去下載所需的資源
    • 304：Not Modify：主要用於當瀏覽器在器緩存中保留了一個組件的副本，同時組件已通過期，這是瀏覽器就會生成一個條件get請求，若是服務器的組件並無修改過，則會返回304狀態碼，同時不攜帶主體，告知瀏覽器能夠重用這個副本，減小響應大小
    • 下圖是衝定向對頁面的影響

      

CSS優化

• CSS優化目的：不只僅是減少CSS文件的大小，還能讓CSS代碼更優條理，更高效，編寫好的CSS代碼有助於提高網頁的渲染速度。實際上，瀏覽器渲染引擎須要解析的CSS規則越少，性能越好。
• 頁面的渲染過程：

  

• 避免在HTML標籤中寫style屬性，通常狀況下都是HTML了，CSS分開寫，不然會增長HTML的體積，注意點：若是所指望用戶只訪問一次該頁面，例如對於一些臨時活動來講毫不會指望有回訪客出現，那麼使用內聯樣式可以幫助減小http請求，但這會增長HTML的體積
• 引發佈局和繪製過程的有一下幾方面的緣由:
  • 元素的追加、修改和刪除
  • 使用動畫
  • 修改樣式
  • 修改元素的class屬性值
  • hover僞類選擇器所觸發的元素狀態的改變
  • 有用戶在input元素中的輸入而引發的文字節點的改變
  • 使用offsetWidth、offsetHeight或getComponentedStyle取的樣式屬性值
  • 文字字體的改變
  • 窗口尺寸的表明
  • 元素透明度的改變
  • 頁面或元素內的滾動
• 在移動端中，用戶對頁面上的操做更加頻繁，因此減小布局過程和繪製過程的觸發次數是很是重要

圖片優化

• 使用CSS3代替圖片
  • 使用CSS3代替圖片，咱們在開發中可能常常會碰到圓角、陰影、漸變填充等，這些都是可使用純粹的HTML CSS SVG IconFont等來實現，咱們不妨在使用讀片的時候多問本身一句，此處真的須要圖片才能實現須要的結果嗎？
  • 減小圖片能減小http的請求成熟，同時較少頁面的大小，更容易維護。
  • 雖然CSS3能夠減小http的請求，可是增長了瀏覽器的處理複合。下面是幾個常見CSS3處理時間

    

• 使用Data URL代替圖片
  • Data URL給了咱們一種很巧妙的將圖片「嵌入」到HTML中的方法。跟傳統的用img標記將服務器上的圖片引用到頁面中的方式不同，在DataURL協議中，圖片被轉換成base64編碼的字符串形式，並存儲在URL中
• 使用CSS sprite 或者字體圖標
• 使用SVG代替圖片
  • IconFont與SVG的對比

    

• 壓縮圖片格式
  • 若是頁面須要顯示的效果只能經過圖片來表示，那麼選擇合適的圖片格式是圖片優化的第一步，下面是一些常見的圖片格式

    

• 使用srcset