摘要：幾個月前面試的時候問我性能優(yōu)化我可能會開始背誦雅虎軍規(guī)，加點(diǎn)，代碼層面稍稍講點(diǎn)，現(xiàn)在系統(tǒng)的梳理下性能優(yōu)化的方方面面本文涉及方面有代碼優(yōu)化網(wǎng)絡(luò)請求過程角度入手解析建立鏈接網(wǎng)絡(luò)往返時延數(shù)據(jù)傳輸網(wǎng)絡(luò)問題角度入手請求數(shù)量流量性能優(yōu)化測試工具代碼優(yōu)化

幾個月前面試的時候問我性能優(yōu)化我可能會開始背誦雅虎軍規(guī)，加點(diǎn)webp，代碼層面稍稍講點(diǎn)，現(xiàn)在系統(tǒng)的梳理下性能優(yōu)化的方方面面

本文涉及方面有:

代碼優(yōu)化

網(wǎng)絡(luò)請求過程角度入手

DNS解析

TCP建立鏈接

網(wǎng)絡(luò)往返時延(RTT)

數(shù)據(jù)傳輸

網(wǎng)絡(luò)問題角度入手

請求數(shù)量

流量

性能優(yōu)化測試工具

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

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

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

所有元素可繼承：visibility和cursor

內(nèi)聯(lián)元素和塊元素可繼承：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是解釋性語言，相比編譯性語言執(zhí)行速度要慢。瀏覽器已經(jīng)實(shí)現(xiàn)的方法，就不要再去實(shí)現(xiàn)一遍了。另外，瀏覽器已經(jīng)實(shí)現(xiàn)的方法在算法方面已經(jīng)做了很多優(yōu)化

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

優(yōu)化編譯器不支持一些特定的語句, 使用這些語法會使包含它的函數(shù)無法得到優(yōu)化.
有一點(diǎn)請注意, 即使這些語句無法到達(dá)或者不會被執(zhí)行, 它們也會使相關(guān)函數(shù)無法被優(yōu)化
目前不會被優(yōu)化的有:

generator 函數(shù)

包含 for...of 語句的函數(shù)

包含 try...catch 的函數(shù)

包含 try...finally 的函數(shù)

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

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

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

可能永遠(yuǎn)不會被優(yōu)化的有:

包含 debugger 語句的函數(shù)

包含字面調(diào)用 eval() 的函數(shù)

包含 with 語句的函數(shù)

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

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

直接用true和false做標(biāo)記，不要使用數(shù)字或者字符串的1和0來做標(biāo)記。

jquery最佳實(shí)踐筆記

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

DNS解析

主要挑戰(zhàn)：解析耗時長

優(yōu)化措施

減少域名

首屏在3個域名內(nèi)

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

參考資料: DNS解析

TCP連接

主要挑戰(zhàn)：除了TCP握手會多一次網(wǎng)絡(luò)往返，另外在移動端網(wǎng)絡(luò)建立TCP鏈接前，還需要進(jìn)行信令的交互，在2G環(huán)境下影響最為明顯

優(yōu)化措施（復(fù)用）

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

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

HTTP1.1持久連接

參考資料：知乎HTTP2.0

網(wǎng)絡(luò)往返時延(RTT)

主要挑戰(zhàn)：耗時長

優(yōu)化措施（復(fù)用、合并、就近接入）

就近接入

靜態(tài)資源：接入CDN

動態(tài)數(shù)據(jù)
接入移動運(yùn)營商和小運(yùn)營商反向代理進(jìn)行加速

合并請求，減少請求數(shù)量

首屏禁止301、302跳轉(zhuǎn)

合并樣式和腳本

使用css圖片精靈

首屏必須小圖片使用base64格式內(nèi)嵌入HTML

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

合并外聯(lián)代碼

緩存

抽出公共代碼復(fù)用緩存

使用LocalStorage等緩存數(shù)據(jù)

圖片/外鏈代碼開啟緩存

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

數(shù)據(jù)傳輸

主要挑戰(zhàn)：帶寬有限、流量有成本

優(yōu)化措施（復(fù)用、壓縮、分包）

壓縮

圖片優(yōu)化

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

開啟GZIP

壓縮代碼

靜態(tài)資源使用不帶cookie的域名

復(fù)用
HTTP 304

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

請求

主要挑戰(zhàn)：
沒有充分利用有限的并發(fā)數(shù)量，串行加載數(shù)據(jù)
可以預(yù)先加載的操作沒有預(yù)先加載
無用請求搶占并發(fā)數(shù)量

優(yōu)化

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

可以使用link標(biāo)簽來強(qiáng)制對DNS做預(yù)解析:

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

刪除無用請求

流量

主要挑戰(zhàn)：各種流量混在一起加載，流量之間沒有優(yōu)先級

優(yōu)化措施（延遲加載）

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

延遲加載非首屏數(shù)據(jù)
懶加載，屏幕滾動到才加載

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

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