前端性能優化分析

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

關鍵詞：性能優化;web前端;瀏覽器渲染;DOM樹

一、頁面渲染過程

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

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

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

二、重排和重繪

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

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

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

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

三、性能優化

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

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

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

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

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

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

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

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

四、結語

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

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