摘要：緩存優(yōu)化性能優(yōu)化第一步，便是管理好頁(yè)面的緩存，避免重復(fù)下載資源。加載時(shí)優(yōu)化消滅不必要的下載最好的優(yōu)化，便是根本不下載資源。所以，在網(wǎng)頁(yè)中隨意擺放和極有可能造成各種阻塞，必須精心安排。不要高頻率調(diào)用函數(shù)，事件連續(xù)觸發(fā)時(shí)，只調(diào)用一次函數(shù)。

本文提供一個(gè)優(yōu)化網(wǎng)頁(yè)性能的大概思路，具體操作網(wǎng)上資料很多。

性能優(yōu)化第一步，便是管理好頁(yè)面的緩存，避免重復(fù)下載資源。否則，即增加服務(wù)器壓力，又折磨用戶的錢包。

訪問(wèn)頁(yè)面，請(qǐng)求各種資源，瀏覽器檢查本地是否有緩存。

如果有，檢查資源是否過(guò)期。沒(méi)過(guò)期，直接使用緩存。過(guò)期了，便向服務(wù)器發(fā)出請(qǐng)求。

發(fā)出的請(qǐng)求中會(huì)帶上etag和last-modified首部字段。

服務(wù)器會(huì)通過(guò)Etag和last-modified來(lái)判斷瀏覽器緩存的資源是否已經(jīng)不可用。

如果資源仍然有效，便返回304告知瀏覽器使用緩存。否則返回更新后的資源。

按照這一套邏輯，便可規(guī)劃好網(wǎng)站的緩存。

通常無(wú)法做到這一點(diǎn)，因?yàn)闉g覽器發(fā)現(xiàn)資源沒(méi)過(guò)期，根本不會(huì)發(fā)出請(qǐng)求。
但是可以通過(guò)修改資源的網(wǎng)址來(lái)實(shí)現(xiàn)。所以需要給資源文件名加上版本號(hào)或者隨機(jī)標(biāo)記。例如 style.1234.css。
也就是說(shuō)，不要讓瀏覽器緩存html文件，否則，過(guò)期之前，瀏覽器都不會(huì)請(qǐng)求服務(wù)器。

最好的優(yōu)化，便是根本不下載資源。所以要盡量減少比不要的資源。

評(píng)估所有依賴是否必要，權(quán)衡利弊。

依賴的下載路徑是否可靠，不可用時(shí)候是否會(huì)阻礙整個(gè)頁(yè)面。

產(chǎn)品設(shè)計(jì)時(shí)候就需要拋棄浪費(fèi)帶寬的設(shè)計(jì)。

去掉不必要的圖片

多使用css3來(lái)代替圖片

使用壓縮率更高的圖片。特別是gif動(dòng)圖，一些視頻格式（H.264或WebM）的體積比gif小很多。

用藝術(shù)字字體，不要用圖片

仔細(xì)權(quán)衡圖片和文字的關(guān)系。要表達(dá)一個(gè)意思，可能一圖勝千言。多了一張圖片，反而節(jié)省了大量文字。

使用progressive jpeg。相比隨著數(shù)據(jù)下載從上到下顯示的baseline jpeg，progressive jpeg是由模糊到清晰，用戶體驗(yàn)好，也不會(huì)導(dǎo)致reflow。

圖片分辨率要盡可能小，避免圖片分辨率大于顯示分辨率。

為使用更新瀏覽器的用戶提供更現(xiàn)代的圖片格式。

多種分辨率的位圖供不同頁(yè)面大小使用。

要給標(biāo)簽指明寬高，否則會(huì)導(dǎo)致reflow。

使用HTTP/2。比如，精靈圖是由很多小圖片組成的一張大圖片，可以減少http請(qǐng)求。但是卻難以緩存，修改一個(gè)小圖片，導(dǎo)致所有小圖片緩存失效。HTTP/2，一個(gè)鏈接內(nèi)可以發(fā)起多個(gè)請(qǐng)求，便無(wú)需使用精靈圖。

@font-face 中unicode-range可以制定字符范圍，用來(lái)避免下載不需要的語(yǔ)言的字符。

確保字體都被壓縮過(guò)。

用@font-face的display屬性和FontFace對(duì)象管理好字體加載時(shí)的邏輯。

瀏覽器渲染一張網(wǎng)頁(yè)通過(guò)以下步驟。

處理 HTML 標(biāo)記并構(gòu)建 DOM 樹(shù)。

處理 CSS 標(biāo)記并構(gòu)建 CSSOM 樹(shù)。

將 DOM 與 CSSOM 合并成一個(gè)渲染樹(shù)。

根據(jù)渲染樹(shù)來(lái)布局，以計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息。

將各個(gè)節(jié)點(diǎn)繪制到屏幕上。

說(shuō)人話：瀏覽器先解析HTML，發(fā)現(xiàn)就去請(qǐng)求CSS文件，發(fā)現(xiàn)

js修改元素樣式

瀏覽器重新計(jì)算CSSOM樹(shù)

如果布局發(fā)生變化，則計(jì)算出新的布局

按不同的layer來(lái)計(jì)算出繪制元素所需的每個(gè)像素。

按順序合并不同的layer

優(yōu)化動(dòng)畫(huà)便是優(yōu)化以上步驟使動(dòng)畫(huà)達(dá)到60幀。
CSS選擇器要簡(jiǎn)單，避免瀏覽器遍歷DOM樹(shù)來(lái)尋找元素。
js修改的元素要避免牽連過(guò)多導(dǎo)致布局發(fā)生變化。
要減少需要重繪的元素。重繪時(shí)，同一個(gè)layer的元素都會(huì)被重繪。重繪也是非常耗費(fèi)性能的一步。

選擇器越復(fù)雜，瀏覽器計(jì)算得越久。最糟情況下，瀏覽器需要遍歷整個(gè)DOM-tree，計(jì)算量等于元素總個(gè)數(shù)乘以選擇器個(gè)數(shù)。

盡量不要使選擇器太復(fù)雜，事先給需要被操作的元素加上類名。

即布局發(fā)生變化。Chrome, Opera, Safari, Internet Explorer中叫l(wèi)ayout. 火狐稱之為Reflow。

reflow, repaint次數(shù)越少越好，牽連的元素越少越好。

reflow總是牽涉整個(gè)文檔流。

千萬(wàn)不能修改元素css后立刻讀取css計(jì)算值。因?yàn)闉g覽器必須重新計(jì)算布局，才能知道所需值。而js中相關(guān)API都是同步的，所以這將導(dǎo)致瀏覽器同步reflow，阻塞js線程。

因?yàn)閯?dòng)畫(huà)一直在運(yùn)動(dòng)，所以要避免使用會(huì)導(dǎo)致布局發(fā)生變化，和導(dǎo)致必須重新計(jì)算元素像素（重繪）的CSS屬性制作動(dòng)畫(huà)。而transform和opacity兩個(gè)CSS屬性正是我們所需的。
因?yàn)闉g覽器渲染網(wǎng)頁(yè)時(shí)，會(huì)將網(wǎng)頁(yè)分層(layer)，最后將不同層合并，然后完成渲染。
同一層中，哪怕只有一個(gè)小小的元素發(fā)生變化，整個(gè)層都會(huì)被repaint。

開(kāi)發(fā)者工具的Paint Profiler界面中觀察到每一層的繪制過(guò)程
所以，可以考慮將動(dòng)畫(huà)放在多帶帶的layer中。

CSS的will-change和 transform: translateZ(0)可以用來(lái)創(chuàng)建新layer；
再搭配transform和opacity，用CSS3制作動(dòng)畫(huà)。根據(jù)我的實(shí)驗(yàn)，可以完全避免reflow和重繪。

但是過(guò)多l(xiāng)ayer也消耗內(nèi)存和性能，用開(kāi)發(fā)者工具中的Performance判斷新layer是否帶來(lái)優(yōu)化，否則不要?jiǎng)?chuàng)建新layer。
開(kāi)發(fā)者工具的layer界面中可以觀察網(wǎng)頁(yè)有多少個(gè)layer，每個(gè)layer包含哪些元素。

網(wǎng)頁(yè)時(shí)給人用的，所以最惱人的是鼠標(biāo)或手指操作頁(yè)面時(shí)，頁(yè)面卡卡的。
而響應(yīng)用戶操作的JS都是異步的。如果JS線程太繁忙，遲遲不能進(jìn)入下一個(gè)事件循環(huán)，就會(huì)導(dǎo)致響應(yīng)用戶操作不及時(shí)。
盡量增加線程空閑時(shí)間，讓事件循環(huán)可以及時(shí)取出回調(diào)函數(shù)。提高響應(yīng)的優(yōu)先級(jí)，用戶交互時(shí)，停下其他耗時(shí)的JS。
但響應(yīng)不必過(guò)于及時(shí)，在100ms內(nèi)得到反饋，人類都不會(huì)察覺(jué)到卡頓，可以把一些耗時(shí)的工作分解成很多步，利用這個(gè)時(shí)間差去執(zhí)行它們。
活用requestAnimationFrame方法。

requestAnimationFrame在下一幀開(kāi)始前調(diào)用函數(shù)。優(yōu)于setInterval的地方是每一幀只會(huì)調(diào)用一次，而setInterval則不一定。

交互事件的監(jiān)聽(tīng)函數(shù)的執(zhí)行時(shí)間不能太長(zhǎng)，否則會(huì)阻塞頁(yè)面滾動(dòng)。

監(jiān)聽(tīng)函數(shù)可能會(huì)調(diào)用preventDefault, 導(dǎo)致瀏覽器必須等待監(jiān)聽(tīng)函數(shù)執(zhí)行完成。 
不過(guò)新擴(kuò)展的addEventListener方法第三個(gè)參數(shù)可以是一個(gè)對(duì)象，對(duì)象的passive屬性用來(lái)事先承諾不會(huì)調(diào)用preventDefault方法，瀏覽器則不會(huì)等待監(jiān)聽(tīng)函數(shù)。

不要再交互事件的監(jiān)聽(tīng)函數(shù)中修改樣式，會(huì)導(dǎo)致強(qiáng)制同步reflow，阻塞js執(zhí)行。

因?yàn)楸O(jiān)聽(tīng)函數(shù)會(huì)在requestAnimationFrame之前執(zhí)行，如果監(jiān)聽(tīng)函數(shù)中修改了樣式，又用到requestAnimationFrame來(lái)制作動(dòng)畫(huà)，便會(huì)導(dǎo)致強(qiáng)制同步reflow。

某些交互事件觸發(fā)極頻繁，注意要debounce。

debounce:不要高頻率調(diào)用函數(shù)，事件連續(xù)觸發(fā)時(shí)，只調(diào)用一次函數(shù)。