丨頁面性能如何系統(tǒng)地優(yōu)化

和JavaScript。JavaScript這里我們需要重點(diǎn)關(guān)注加載階段和交互階段，因?yàn)橛绊懙轿覀凅w驗(yàn)的因素主要都在這兩個(gè)階片、音頻、等文件就不會(huì)阻塞頁面的首次渲染；而JavaScript、首次請(qǐng)求的HTML資源文件、CSS文件是會(huì)阻塞首次渲染的，因?yàn)樵跇?gòu)建DOM的過程中需要HTML和JavaScript文件，在構(gòu)造渲染樹的過程中需要用到CSS文件。來三個(gè)影響頁面首次渲染的因素。關(guān)鍵資源個(gè)數(shù)就是3個(gè)，1個(gè)HTML文件、1個(gè)JavaScript和1個(gè)CSS文件。第二個(gè)是關(guān)鍵資源大小。通常情況下，所有關(guān)鍵資源的內(nèi)容越小，其整個(gè)資源的時(shí)間也就越短，那么阻塞渲染的時(shí)間也就越短。上圖中關(guān)鍵資源的大小分別是6KB、8KB和9KB，那么整個(gè)關(guān)鍵資源大小就是23KB。RTT（RoundTripTime）。那什么是RTT呢？在《02|TCP協(xié)議：如何保證頁面文件能被完整送達(dá)瀏覽器？》這篇文章中我們分析過，當(dāng)使用TCP協(xié)議傳輸一個(gè)文件時(shí)，比如這個(gè)文件大小是0.1M，由于TCP的特性，這個(gè)數(shù)據(jù)并不是一次傳輸?shù)椒?wù)端的，而是需要拆分成一個(gè)個(gè)數(shù)據(jù)包來回多次進(jìn)行傳輸?shù)?。RTT就是這里的往返時(shí)延。它是網(wǎng)絡(luò)中一個(gè)重要的性能指標(biāo)，表示從發(fā)送端發(fā)送數(shù)據(jù)開始，到發(fā)送端收到來自接收端的確認(rèn)，總共經(jīng)歷的時(shí)延。通常1個(gè)HTTP的數(shù)據(jù)包在14KB左右，所以1個(gè)0.1M的頁面就需要拆分成8個(gè)包來傳輸了，也就是說需要8個(gè)RTT。我們可以結(jié)合上圖來看看它的關(guān)鍵資源請(qǐng)求需要多少個(gè)RTT。首先是請(qǐng)求HTML資源，大小是6KB，小于14KB，所以1個(gè)RTT就可以解決了。至于JavaScript和CSS文件，這里需要注意一點(diǎn)，由于渲染引擎有一個(gè)預(yù)解析的線程，在接收到HTML數(shù)據(jù)之后，預(yù)解析線程會(huì)快速掃描HTML數(shù)據(jù)中的關(guān)鍵資源，一旦掃描到了，會(huì)立馬發(fā)起請(qǐng)求，你可以認(rèn)為JavaScript和CSS是同時(shí)發(fā)起請(qǐng)求的，所以它們的請(qǐng)求是的，那么計(jì)算它們的RTT時(shí)，只需要計(jì)算體積最大的那個(gè)數(shù)據(jù)就可以了。這里最大的是CSS文件（9KB），所以我們就9KB9KB14KBJavaScriptCSSRTT2RTT總的優(yōu)化原則就是減少關(guān)鍵資源個(gè)數(shù)，降低關(guān)鍵資源大小，降低關(guān)鍵資源的RTT次數(shù)如何減少關(guān)鍵資源的個(gè)數(shù)？式是可以將JavaScript和CSS改成內(nèi)聯(lián)的形式，比如上圖的JavaScript和CSS，若都改成內(nèi)聯(lián)模式，那么關(guān)鍵資源的個(gè)數(shù)就由3個(gè)減少到了1個(gè)。另式，如果JavaScript代碼沒有DOM或者CSSOM的操作，則可以改成sync或者defer屬性；同樣對(duì)于CSS，如果不是在構(gòu)建頁面之前加載的，則可以添加媒體取消顯現(xiàn)的標(biāo)志。當(dāng)JavaScript加上了sync或者defer、CSSlink屬性之前如何減少關(guān)鍵資源的大小？可以壓縮CSS和JavaScript資源，移除HTML、CSS、JavaScriptCSSJavaScriptRTT配來實(shí)現(xiàn)。除此之外，還可以使用CDN來減少每次RTT時(shí)長(zhǎng)。接下來我們?cè)賮砹牧捻撁婕虞d完成之后的交互階段以及應(yīng)該如何去優(yōu)化。談交互階段的優(yōu)化，其實(shí)就是在談渲染進(jìn)程渲染幀的速度，因?yàn)樵诮换ルA段，幀的渲染速度決定了交互的流暢度。因此討論頁面優(yōu)化實(shí)際上就是討論渲染引擎是如何渲染幀的，否則就無法優(yōu)化幀率。我們先來看看交互階段的渲染流水線（如下圖）。和加載階段的渲染流水線有一些不同的地方是，在交互階段沒有了加載關(guān)鍵資源和構(gòu)建DOM、CSSOM流程，通常是由JavaScript幀都是由JavaScript通過修改DOM或者CSSOM來觸發(fā)的。還有另外一部分幀是由同樣如果在計(jì)算樣式階段沒有發(fā)現(xiàn)有布局信息的修改，只是修改了顏色一類的信息，那么就不會(huì)涉及到布局相關(guān)的調(diào)整，所以可以跳過布局階段，直接進(jìn)入繪制階段，這個(gè)過程叫重繪。不過重繪階段的代價(jià)也是不小的。還有另外一種情況，通過CS實(shí)現(xiàn)一些變形、漸變、動(dòng)畫等特效，這是由CSS觸發(fā)的，并且是在合成線程上執(zhí)行的，這個(gè)過程稱為合成。因?yàn)樗粫?huì)觸發(fā)重排或者重繪，而且合成操作本身的速度就非?？?，所以執(zhí)行合成是效率最高的方式?；仡櫫嗽诮换ミ^程中的幀是如何生成的，那接下來我們就可以討論優(yōu)化方案了。一個(gè)大的原則就是讓單個(gè)幀的生成速度變快。所以，下面我們就來分析下在交互階段渲染流水線中有哪減少JavaScript執(zhí)行時(shí)有時(shí)JavaScript函數(shù)的一次執(zhí)行時(shí)間可能有幾百毫秒，這就嚴(yán)重霸占了主線程執(zhí)行其他渲另一種是采用WebWorkers。你可以把WebWorkers當(dāng)作主線程之外的一個(gè)線程，在WebWorkers中是可以執(zhí)行JavaScript的，不過WebWorkers中沒有DOM、CSSOM環(huán)境，這意味著在WebWorkers中是無法通過JavaScript來DOM的，所以我們可以把一些和DOM操作無關(guān)且耗時(shí)的任務(wù)放到WebWorkers中去執(zhí)行。總之，在交互階段，對(duì)JavaScript總的原則就是不要一次霸占太久主線程在介紹強(qiáng)制同步布局之前，我們先來聊聊正常情況下的布局操作。通過DOM接口執(zhí)行添<div<li7<pid="demo">強(qiáng)制布局<buttononclick="foo()">添加新元素functionfoo()letmain_div=.geletnew_node=lettextnode= PerformancePerformanceJavaScript所謂強(qiáng)制同步布局，是指Javacript強(qiáng)制將計(jì)算樣式和布局操作提前到當(dāng)前的任務(wù)中。為了直觀理解，這里我們對(duì)上面的代碼做了一點(diǎn)修改，讓它變成強(qiáng)制同步布局，修改后的代碼如下所示：functionfoo()letmain_div=.geletnew_node=lettextnode= 7//由于要獲取到8//但是此時(shí)的offsetHeight9//}將新的元素添加到DOM之后，我們又調(diào)用了main_div.offsetHeight來獲取新main_divmain_div到main_div的高度之前，JavaScript還需要強(qiáng)制讓渲染引擎默認(rèn)執(zhí)行一次布局操作。我們同樣，你可以看下面通過Performance觸發(fā)強(qiáng)制同步布局Performance圖從上圖可以看出來，計(jì)算樣式和布局都是在當(dāng)前執(zhí)行過程中觸發(fā)的，這就是強(qiáng)制同步布DOMfunctionfoo()letmain_div=.ge3//為了避免強(qiáng)制同步布局，在修改DOM45letnew_node=6lettextnode=789}JavaScriptfunctionfoo()lettime_li=.gefor(leti=0;i<100;i++)letmain_div=.geletnew_node=lettextnode=new_node.offsetHeight= }11我們?cè)谝粋€(gè)for循環(huán)語句里面不斷屬性值，每次屬性值之前都要進(jìn)行計(jì)算樣式和布局。執(zhí)行代碼之后，使用Performance記錄的狀態(tài)如下所示：Performance從上圖可以看出，在foo函數(shù)內(nèi)部重復(fù)執(zhí)行計(jì)算樣式和布局，這會(huì)大大影響當(dāng)前函數(shù)的執(zhí)行效率。這種情況的避免方式和強(qiáng)制同步布局一樣，都是盡量不要在修改DOM結(jié)構(gòu)時(shí)再合理利用CSS主線程被JavaScript或者一些布局任務(wù)占用，CSS動(dòng)畫依然能繼續(xù)執(zhí)行。所以要盡量利用好CSS合成動(dòng)畫，如果能讓CSS處理動(dòng)畫，就盡量交給CSS來操作。will-change，這是我們知道JavaScript使用了自動(dòng)回收機(jī)制，如果在一些函數(shù)中頻繁創(chuàng)建臨時(shí)對(duì)象，那在加載階段，的優(yōu)化原則是：優(yōu)化關(guān)鍵資源的加載速度，減少關(guān)鍵資源的個(gè)數(shù)，降低關(guān)鍵資源的RTT次數(shù)。JavaScriptCSS .cn/）在加載階段和交互階段所存在的一覺得這篇文章對(duì)你有幫助的話，也歡迎把它給的朋友。 歸科技所有 不得售賣。頁面已增加防盜追蹤，將依法其上一 24|分層和合成機(jī)制：為什么CSS動(dòng)畫比JavaScript高效下