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

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

本文涉及方面有:

代碼優(yōu)化

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

DNS解析

TCP建立鏈接

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

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

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

請(qǐng)求數(shù)量

流量

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

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

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

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

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

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

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

generator 函數(shù)

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

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

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

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

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

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

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

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

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

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

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

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

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

jquery最佳實(shí)踐筆記

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

DNS解析

主要挑戰(zhàn)：解析耗時(shí)長(zhǎng)

優(yōu)化措施

減少域名

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

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

參考資料: DNS解析

TCP連接

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

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

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

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

HTTP1.1持久連接

參考資料：知乎HTTP2.0

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

主要挑戰(zhàn)：耗時(shí)長(zhǎng)

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

就近接入

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

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

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

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

合并樣式和腳本

使用css圖片精靈

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

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

合并外聯(lián)代碼

緩存

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

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

圖片/外鏈代碼開(kāi)啟緩存

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

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

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

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

壓縮

圖片優(yōu)化

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

開(kāi)啟GZIP

壓縮代碼

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

復(fù)用
HTTP 304

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

請(qǐng)求

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

優(yōu)化

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

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

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

刪除無(wú)用請(qǐng)求

流量

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

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

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

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

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

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