摘要：幾個月前面試的時候問我性能優化我可能會開始背誦雅虎軍規，加點，代碼層面稍稍講點，現在系統的梳理下性能優化的方方面面本文涉及方面有代碼優化網絡請求過程角度入手解析建立鏈接網絡往返時延數據傳輸網絡問題角度入手請求數量流量性能優化測試工具代碼優化

幾個月前面試的時候問我性能優化我可能會開始背誦雅虎軍規，加點webp，代碼層面稍稍講點，現在系統的梳理下性能優化的方方面面

本文涉及方面有:

代碼優化

網絡請求過程角度入手

DNS解析

TCP建立鏈接

網絡往返時延(RTT)

數據傳輸

網絡問題角度入手

請求數量

流量

性能優化測試工具

CSS3添加了復雜的屬性選擇器，可以通過類正則表達式的方式對元素的屬性值進行匹配。當然這些類型的選擇器定是會影響性能的，正則表達式匹配會比基于類別的匹配會慢很多。大部分情況下我們應盡量避免使用 *=， |=， ^=， $=， 和 ~=語法的屬性選擇器。

除了壓縮的方式，我們還可以通過少寫CSS屬性來達到減少CSS字節的目的

css的繼承機制也可以幫我們再一定程度上縮減字節數，我們知道CSS有很多屬性是可以繼承的即在父容器設置了默寫屬性，子容器會默認也使用這些屬性，因此如果我們希望全文字體尺寸是14px，大可不必為每個容器設置，只需要在body上設置就可以了。應用這個技巧，把CSS屬性在可能的情況下提到父容器是可以幫我們節省CSS字節的，順便說一下哪些屬性可以繼承

所有元素可繼承：visibility和cursor

內聯元素和塊元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

塊狀元素可繼承：text-indent和text-align

列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image

表格元素可繼承：border-collapse

不可繼承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before

javaScript是解釋性語言，相比編譯性語言執行速度要慢。瀏覽器已經實現的方法，就不要再去實現一遍了。另外，瀏覽器已經實現的方法在算法方面已經做了很多優化

JavaScript是動態類型，但如果你想提高速度不要使用該功能。盡量保持變量的類型一致。這也適用于數組，盡管主要是由瀏覽器都進行了優化,但盡量不要混用不同類型的數組

優化編譯器不支持一些特定的語句, 使用這些語法會使包含它的函數無法得到優化.
有一點請注意, 即使這些語句無法到達或者不會被執行, 它們也會使相關函數無法被優化
目前不會被優化的有:

generator 函數

包含 for...of 語句的函數

包含 try...catch 的函數

包含 try...finally 的函數

包含復合 let 賦值語句的函數 (原文為 compound let assignment)

包含復合 const 賦值語句的函數 (原文為 compound const assignment)

包含含有 __proto__ 或者 get/set 聲明的對象字面量的函數

可能永遠不會被優化的有:

包含 debugger 語句的函數

包含字面調用 eval() 的函數

包含 with 語句的函數

之前提到過的一些語句在生產環境中是無法避免的, 比如 try...finally 和 try...catch. 為了是代價最小, 它們必須被隔離到一個最小化的函數, 以保證主要的代碼不受影響.

通常開發者都會使用JavaScript類庫，如jQuery、Mootools、YUI、Dojo等，但是開發者往往只是使用JavaScript類庫中的部分功能。為了更大的提升性能，應盡量避免使用這類大而全的類庫，而是按需使用微類庫來輔助開發

直接用true和false做標記，不要使用數字或者字符串的1和0來做標記。

jquery最佳實踐筆記

正常的一次網絡請求會經歷4個過程，分別是：DNS解析 -> TCP建立鏈接 -> 網絡往返時延(RTT) -> 數據傳輸，面臨的挑戰可以總結為時延較高、帶寬有限、流量有成本，具體各過程面臨的挑戰和優化措施如下。

DNS解析

主要挑戰：解析耗時長

優化措施

減少域名

首屏在3個域名內

減少DNS查找，避免重定向。瀏覽器DNS緩存 、計算機DNS緩存、 服務器DNS緩存、使用Keep-Alive特性 來減少DNS查找。

參考資料: DNS解析

TCP連接

主要挑戰：除了TCP握手會多一次網絡往返，另外在移動端網絡建立TCP鏈接前，還需要進行信令的交互，在2G環境下影響最為明顯

優化措施（復用）

HTTP2.0多路復用
HTTP/2 可以很容易的去實現多流并行而不用依賴建立多個 TCP 連接，HTTP/2 把 HTTP 協議通信的基本單位縮小為一個一個的幀，這些幀對應著邏輯流中的消息。并行地在同一個 TCP 連接上雙向交換消息。

   單連接多資源的方式，減少服務端的鏈接壓力,內存占用更少,連接吞吐量更大
   由于 TCP 連接的減少而使網絡擁塞狀況得以改善，同時慢啟動時間的減少,使擁塞和丟包恢復速度更快

HTTP1.1持久連接

參考資料：知乎HTTP2.0

網絡往返時延(RTT)

主要挑戰：耗時長

優化措施（復用、合并、就近接入）

就近接入

靜態資源：接入CDN

動態數據
接入移動運營商和小運營商反向代理進行加速

合并請求，減少請求數量

首屏禁止301、302跳轉

合并樣式和腳本

使用css圖片精靈

首屏必須小圖片使用base64格式內嵌入HTML

初始首屏之外的圖片資源按需加載，靜態資源延遲加載

合并外聯代碼

緩存

抽出公共代碼復用緩存

使用LocalStorage等緩存數據

圖片/外鏈代碼開啟緩存

參考資料：知乎合并 HTTP 請求是否真的有意義？

數據傳輸

主要挑戰：帶寬有限、流量有成本

優化措施（復用、壓縮、分包）

壓縮

圖片優化

不需要背景透明的采用jpg代替png
使用webp
使用合適尺寸的圖片，而不是對圖片進行拉伸

開啟GZIP

壓縮代碼

靜態資源使用不帶cookie的域名

復用
HTTP 304

頁面在網絡上遇到的問題可以總結為一個或多個網絡請求以及每個請求的流量問題，在請求數量以及每個請求的流量固定的情況下，可以通過優化請求順序以及合理劃分流量來提升用戶體驗，請求順序和流量劃分通常遇到的問題和優化措施如下。

請求

主要挑戰：
沒有充分利用有限的并發數量，串行加載數據
可以預先加載的操作沒有預先加載
無用請求搶占并發數量

優化

DNS的預解析
可以通過用meta信息來告知瀏覽器, 我這頁面要做DNS預解析

可以使用link標簽來強制對DNS做預解析:

HTTP管線化
HTTP管線化可以克服同域并行請求限制帶來的阻塞，它是建立在持久連接之上，是把所有請求一并發給服務器，但是服務器需要按照順序一個一個響應，而不是等到一個響應回來才能發下一個請求，這樣就節省了很多請求到服務器的時間。不過，HTTP管線化仍舊有阻塞的問題，若上一響應遲遲不回，后面的響應都會被阻塞到。

刪除無用請求

流量

主要挑戰：各種流量混在一起加載，流量之間沒有優先級

優化措施（延遲加載）

延遲加載非首屏代碼(拆分首屏css，首屏js)

延遲加載非首屏數據
懶加載，屏幕滾動到才加載

延遲加載非首屏圖片
輪播圖片等第一張圖片加載后再加載后面其他圖片

YSLOW
會按照雅虎軍規分析網站
Page Speed Online
Google Page Speed 是當下很流行的在線測試網站性能工具，基于Google的一套最佳的前端性能的規則，你可以很方便得到大量的性能信息，甚至還提供了移動設備的最佳實踐報告。
Show Slow
它能從三個流行的測試工具YSlow，Page Speed和DynaTrace定期獲取測試數據進行總結對比，免費，但需要注冊。