前端優化總結

第一部分：HTTP請求

• 最關鍵的地方就是爲了減小請求，因此爲了減小請求，全部就有三點

  • 我不但願請求，無論怎麼樣，我能不請求就不去請求

    • 因此這就涉及到了緩存，之前請求過的，我已經放到本地了，我也不會再去服務器請求了，因此你直接拿這個就行，添加 Expires 頭，配置 ETag，使 Ajax 可緩存

      • 例子：當初作一個圖片裁剪的，裁剪後由於命名是統一的，因此即便向服務求請求了，返回的圖片的名字仍是同樣，結果DOM就是不渲染，後來只好在圖片的後綴加上隨機時間才行

      • 強緩存：在 web 服務器返回的響應中添加 Expires 和 Cache-Control Header。
        協商緩存：經過【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】這兩對 Header 分別管理。

    • 避免HTTP重定向

      • HTTP重定向及其耗時，特別是把客戶端定向到一個徹底不一樣的域名的狀況下，還會致使額外的DNS查詢、TCP鏈接延遲，等等

  • 你要我請求，那我能不走就不走，一旦我要走，我就能在最近請求到就拿最近的

    • 因此就涉及到 CDN的問題了，CDN能夠根據網絡流量和負載情況，以及用戶的距離，將用戶的請求導向到離用戶最近的服務節點上

      • 騰訊面試考過一個點，若是CDN掛掉了怎麼辦，方法是查詢請求的JS或者CSS的變量是否存在，若是不存在，就請求服務器上的資源

  • 即便我就請求一次，那麼這一次，我請求的東西都但願他的大小是很小的，因此

    • 開啓 GZip，合併腳本和樣式表，精簡 JavaScript，移除重複腳本，圖像優化

  • 可是，就是還有可是是不，我說我不想請求，但你非要請求，還一次性請求那麼多，那我也要作好措施對不，

    • 因此防止首次加載過多，就實現懶加載，圖片到達視線的時候，把屬性裏面的圖片地址放到src 中就能夠了

第二部分：非 HTTP請求

上面都是涉及到 HTTP 的，因此數據請求到了呢，我這邊又須要怎麼作呢

• CSS放在頂部，JS放在底部

  • 由於在瀏覽器在執行JavaScript代碼時，不能同時作其它事情，即每次出現都會讓頁面等待腳本的解析和執行（不論JavaScript是內嵌的仍是外鏈的），JavaScript代碼執行完成後，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。

• 減小 DOM 操做

  • DOM操做是比較耗性能的

第三部分：瀏覽器自身的優化

• 瀏覽器自身具有的優化

  • 資源預取和排定優先次序

  文檔、CSS 和 JavaScript 解析器能夠與網絡協議層溝通，聲明每種資源的優先
  級：初始渲染必需的阻塞資源具備最高優先級，而低優先級的請求可能會被臨時
  保存在隊列中。

  • DNS • 預解析

  對可能的域名進行提早解析，避免未來 HTTP 請求時的 DNS 延遲。預解析能夠
  經過學習導航歷史、用戶的鼠標懸停，或其餘頁面信號來觸發。

  • TCP • 預鏈接

  DNS 解析以後，瀏覽器能夠根據預測的 HTTP 請求，推測性地打開 TCP 鏈接。
  若是猜對的話，則能夠節省一次完整的往返（TCP 握手）時間。

  • 頁面預渲染 •

  某些瀏覽器可讓咱們提示下一個可能的目標，從而在隱藏的標籤頁中預先渲染
  整個頁面。這樣，當用戶真的觸發導航時，就能當即切換過來。

• 利用瀏覽器的優化而採起的優化措施

  • 頁面結構

    • CSS和JavaScript等重要資源應該儘早在文檔中出現

    • 應該儘早交付CSS，從而解除渲染阻塞並讓JavaScript 執行

    • 非關鍵性JavaScript應該推遲，以免阻塞DOM和CSSDOM構建

    • HTML文檔由解析器遞增解析，從而保證文檔能夠間隙性發送，以求得最佳性能

  • 非頁面結構

    <link rel="dns-prefetch" href="//hostname_to_resolve.com"> ➊
    <link rel="subresource" href="/javascript/myapp.js"> ➋
    <link rel="prefetch" href="/images/big.jpeg"> ➌
    <link rel="prerender" href="//example.org/next_page.html"> ➍
    
    
    ➊ 預解析特定的域名
    ➋ 預取得頁面後面要用到的關鍵性資源
    ➌ 預取得未來導航要用的資源
    ➍ 根據對用戶下一個目標的預測，預渲染特定頁面

參考

• 前端工程與性能優化 關於討論戳這

• 移動H5前端性能優化指南

• Web 性能權威指南