摘?要：高性能的網(wǎng)頁響應(yīng)非?？?，如果網(wǎng)頁加載時(shí)間過長，頁面卡頓，會流失很多用戶，高性能的頁面還可大量減少用戶CPU與內(nèi)存的占用率。因而本文將從瀏覽器渲染原理探討如何進(jìn)行性能提升

關(guān)鍵詞：性能優(yōu)化;web前端;瀏覽器渲染;DOM樹

一、頁面渲染過程

首先瀏覽器拿到HTTP報(bào)文時(shí)會解析出HTML文檔，頁面上各個(gè)DOM節(jié)點(diǎn)的內(nèi)容將根據(jù)文檔的各標(biāo)記轉(zhuǎn)化成“內(nèi)容樹”。然后當(dāng)文檔在head部分遇到link標(biāo)記會去解析該CSS文件以及style標(biāo)記中的樣式數(shù)據(jù)，形成CSSOM。最后瀏覽器會將DMO與CSSOM進(jìn)行合并同時(shí)生成渲染樹，頁面在根據(jù)渲染樹進(jìn)行布局繪制。

瀏覽器主要渲染過程為根據(jù)獲取的HTML文檔解析形成DOM樹，處理CSS標(biāo)記形成CSSOM（CSS Object Model）樹，在結(jié)合DOM和CSSOM合并為渲染樹（代表將要被渲染的對象），在將渲染樹的每個(gè)節(jié)點(diǎn)繪制在屏幕上。

DOM樹、CSSOM樹以及渲染樹的生成非?？?，布局的生成以及將節(jié)點(diǎn)繪制繪制在屏幕上非常耗時(shí)，這兩個(gè)過程合稱為“渲染”。

二、重排和重繪

重繪（Repaint）是渲染樹的一個(gè)重要屬性，而這些屬性決定了頁面元素的外觀風(fēng)格，他不會影響頁面布局，如color屬性發(fā)生變化，則頁面頁面字體color的顏色也就發(fā)生了變化。但是元素字體大小并沒有變。重排（Reflow）是指頁面元素發(fā)生了幾何尺寸的改變，瀏覽器需要根據(jù)該屬性重新計(jì)算生成新的渲染樹，重排會使得頁面一部分或全部屬性發(fā)生改變。

重繪與重排十分消耗網(wǎng)頁性能，在網(wǎng)頁初次加載時(shí)會至少渲染一次。當(dāng)用戶瀏覽操作頁面時(shí)還會不斷重新渲染，此過程會造成瀏覽器耗費(fèi)大量的開銷在進(jìn)行頁面的計(jì)算

修改DOM、修改樣式表、用戶事件（比如鼠標(biāo)懸停、頁面滾動、輸入框鍵入文字、改變窗口大小等等）都會導(dǎo)致網(wǎng)頁重新渲染。

重繪和重排的區(qū)別是，重繪不一定需要重排，比如改變某個(gè)網(wǎng)頁元素的顏色，僅僅是重繪，不會重排，因?yàn)椴季譀]有改變。但是，重排一定會重繪，比如改變一個(gè)網(wǎng)頁元素的位置，瀏覽器會需要重新構(gòu)造渲染樹進(jìn)行重排，重排后在屏幕上進(jìn)行重繪，所以就會同時(shí)出現(xiàn)重排和重繪。

三、性能優(yōu)化

根據(jù)互聯(lián)網(wǎng)八秒定律網(wǎng)站的性能將直接影用戶的訪問量。影響網(wǎng)頁性能主要有網(wǎng)絡(luò)、服務(wù)器性能、DNS解析時(shí)效、頁面渲染速度等。其中頁面渲染涉及到的重排和重繪所需時(shí)間占比較大，而又不可避免，所以要提高網(wǎng)頁性能，就要降低重排和重繪的發(fā)生。

（1）瀏覽器會將所有的變動集中在一起，排成一個(gè)隊(duì)列，然后一次性執(zhí)行，盡量避免多次重新渲染。

（2）減少對渲染樹的操作，批量修改DOM和CSSOM。減少對style樣式的請求，或者可以直接改變元素的className。通過讓該元素脫離文檔流、對其進(jìn)行多重改變、將元素帶回文檔中可以減少重繪和重排的次數(shù)。

（3）盡量使用離線DOM，而不是真實(shí)的網(wǎng)面DOM，先將元素設(shè)為display：none;然后對這個(gè)節(jié)點(diǎn)進(jìn)行100次操作;最后再設(shè)置為display：block，這樣僅能引發(fā)兩次重繪和重排。另外，visibility：hidden的元素只對重繪有影響，不影響重排。

（4）不要經(jīng)常訪問瀏覽器的flush隊(duì)列屬性;如果一定要訪問，可以利用緩存。將訪問的值存儲起來，接下來使用就不會再引發(fā)回流。

（5）position屬性;將元素position屬性設(shè)為absolute或fixed，元素脫離了文檔流，它的變化不會影響到其他元素。

（6）不要使用table布局，因?yàn)閠able中某個(gè)元素旦觸發(fā)了reflow，那么整個(gè)table的元素都會觸發(fā)reflow。那么在不得已使用table的場合，可以設(shè)置table-layout：auto;或者是table-layout：fixed這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響范圍。

（7）使用虛擬DOM的腳本庫，比如React、Vue等。

四、結(jié)語

應(yīng)用程序變得越來越大和越來越復(fù)雜，性能優(yōu)化對于Web開發(fā)來說正在變得越來越重要。在做出任何值得的時(shí)間和潛在的未來成本的優(yōu)化嘗試時(shí)，有針對性的改進(jìn)都是必不可少的。

作者簡介：李廣宏（1986-），男，漢族，遼寧人，本科，實(shí)驗(yàn)室，研究方向：信息化、系統(tǒng)運(yùn)維、網(wǎng)站開發(fā)。