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

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

一、頁面渲染過程

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

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

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

二、重排和重繪

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

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

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

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

三、性能優(yōu)化

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

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

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

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

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

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

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

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

四、結(jié)語

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

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