瀏覽器效能優化（1）

你有遇到過瀏覽器很慢、很卡頓的情況嗎？在乙個簡單的網頁中，會占用大量的cpu、記憶體，頁面的動畫效果也不流暢，這時候你會有什麼反應？

我猜想，大多數使用者會關閉這個頁面，改為訪問其他**。作為乙個前端開發者，肯定不願意看到這種情況，那麼怎樣才能提高效能呢？

說到這裡，先來看看網頁生成過程

網頁生成過程一般分為5個過程：

html**轉化成dom

css**轉化成cssom（css object model）

結合dom和cssom，生成一棵渲染樹（包含每個節點的視覺資訊）

生成布局（layout），即將所有渲染樹的所有節點進行平面合成（重排 reflow）

將布局繪製（paint）在螢幕上 (重繪 repaint)

重排、重繪

其實網頁生成過程中，前3步都是比較快，主要是後兩步，

因為優化瀏覽器效能就從這裡開始，儘量減少重排、重繪的操作

引起網頁渲染的場景

修改dom

修改樣式表

使用者事件（比如滑鼠懸停、頁面滾動、輸入框鍵入文字、改變視窗大小等等）

重新渲染，就需要重新生成布局和重新繪製。前者叫做"重排"（reflow），後者叫做"重繪"（repaint）。

「重繪"不一定需要"重排」，比如改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，因為布局沒有改變。但是，「重排"必然導致"重繪」，比如改變乙個網頁元素的位置，就會同時觸發"重排"和"重繪"，因為布局改變了。

div.style.color = 'blue';
div.style.margintop = '30px';

上面**中，div元素有兩個樣式變動，但是瀏覽器對樣式進行重新渲染。（repaint）

div.style.color = 'blue';
var margin = parseint(div.style.margintop);
div.style.margintop = (margin + 10) + 'px';

上面**對div元素設定字型顏色以後，第二行要求瀏覽器給出該元素的位置，必須要重新生成新的布局，所以瀏覽器不得不立即重排。(reflow)

這些操作會引起重排，使用時要注意下，

offsettop/offsetleft/offsetwidth/offsetheight scrolltop/scrollleft/scrollwidth/scrollheight clienttop/clientleft/clientwidth/clientheight getcomputedstyle()

把讀操作和寫操作分開會對效能好點

// bad
div.style.left = div.offsetleft + 10 + "px";
div.style.top = div.offsettop + 10 + "px";
// good
var left = div.offsetleft;
var top  = div.offsettop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

提高瀏覽器效能一些方法

有一些技巧，可以降低瀏覽器重新渲染的頻率和成本。

第一條是上一節說到的，dom 的多個讀操作（或多個寫操作），應該放在一起。不要兩個讀操作之間，加入乙個寫操作。

第二條，如果某個樣式是通過重排得到的，那麼最好快取結果。避免下一次用到的時候，瀏覽器又要重排。

第三條，不要一條條地改變樣式，而要通過改變class，或者csstext屬性，一次性地改變樣式。

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
// good 
el.classname += " theclassname";
// good
el.style.csstext += "; left: " + left + "px; top: " + top + "px;";

第四條，盡量使用離線dom，而不是真實的網面dom，來改變元素樣式。比如，操作document fragment物件，完成後再把這個物件加入dom。再比如，使用 clonenode() 方法，在轉殖的節點上進行操作，然後再用轉殖的節點替換原始節點。

第五條，先將元素設為display: none（需要1次重排和重繪），然後對這個節點進行100次操作，最後再恢復顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染。

第六條，position屬性為absolute或fixed的元素，重排的開銷會比較小，因為不用考慮它對其他元素的影響。

第七條，只在必要的時候，才將元素的display屬性為可見，因為不可見的元素不影響重排和重繪。另外，**visibility : hidden(會佔據位置)**的元素只對重繪有影響，不影響重排。

第八條，使用虛擬dom的指令碼庫，比如react等。

第九條，使用 window.requestanimationframe()、window.requestidlecallback() 這兩個方法調節重新渲染，詳見：（[

瀏覽器效能優化（1）

瀏覽器效能優化

瀏覽器效能優化

瀏覽器渲染機制與效能優化

相關推薦