今天被人問到我一些關(guān)于網(wǎng)頁渲染的注意事項记焊，一時竟然不知道怎么回答，下午有時間正好認(rèn)認(rèn)真真來整理下栓撞。
雖然網(wǎng)上已經(jīng)有很多文章提到過這個主題了遍膜，但大部分信息都是零碎的片段碗硬。我相信這篇文章對新手會很有用，并且對想刷新和鞏固他們已經(jīng)了解的東西的高手也同樣適用瓢颅。
渲染應(yīng)該從最開始當(dāng)頁面布局被定義時就進(jìn)行優(yōu)化恩尾，樣式和腳本在頁面渲染中扮演著非常重要的角色。專業(yè)人員知道一些技巧以避免一些性能問題挽懦。
瀏覽器是怎樣渲染一個頁面的翰意？
我們從瀏覽器渲染頁面的大概過程開始說起：
由從服務(wù)器接收到的 HTML 形成 DOM（文檔對象模型）。
樣式被加載和解析信柿，形成 CSSOM（CSS 對象模型）冀偶。
緊接著 DOM 和 CSSOM 創(chuàng)建了一個渲染樹，這個渲染樹是一些被渲染對象的集合（ Webkit 分別叫它們”renderer”和”render object”渔嚷，而在Gecko 引擎中叫”frame”）进鸠。除了不可見的元素（比如 head 標(biāo)簽和一些有 display:none 屬性的元素），渲染樹映射了 DOM 的結(jié)構(gòu)形病。在渲染樹中客年，每一個文本字符串都被當(dāng)做一個獨立的 renderer。每個渲染對象都包含了與之對應(yīng)的計算過樣式的DOM 對象（或者一個文本塊）漠吻。換句話說量瓜，渲染樹描述了 DOM 的直觀的表現(xiàn)形式。
對每個渲染元素來說侥猩，它的坐標(biāo)是經(jīng)過計算的榔至，這被叫做“布局(layout)”。瀏覽器使用一種只需要一次處理的“流方法”來布局所有元素（tables需要多次處理）欺劳。
最后唧取，將布局顯示在瀏覽器窗口中，這個過程叫做“繪制(painting)”划提。
重繪
當(dāng)在頁面上修改了一些不需要改變定位的樣式的時候（比如background-color
,border-color
,visibility
)枫弟，瀏覽器只會將新的樣式重新繪制給元素（這就叫一次“重繪”或者“重新定義樣式”）。
重排
當(dāng)頁面上的改變影響了文檔內(nèi)容鹏往、結(jié)構(gòu)或者元素定位時淡诗，就會發(fā)生重排（或稱“重新布局”）。重排通常由以下改變觸發(fā)：
DOM 操作（如元素增伊履、刪韩容、改或者改變元素順序）。
內(nèi)容的改變唐瀑，包括 Form 表單中文字的變化群凶。
計算或改變 CSS 屬性。
增加或刪除一個樣式表哄辣。
改變”class”屬性请梢。
瀏覽器窗口的操作（改變大小赠尾、滾動窗口）。
激活偽類（如:hover狀態(tài)）毅弧。
瀏覽器如何優(yōu)化渲染气嫁？
瀏覽器盡最大努力####限制重排
舉個例子，一個 position 為 absolue 或 fixed 的元素的大小變化只影響它自身和子孫元素够坐，而對一個 position 為 static 的元素做同樣的操作就會引起所有它后面元素的重排寸宵。
另一個優(yōu)化就是當(dāng)運行一段Jjavascript 代碼的時候，瀏覽器會將一些修改緩存起來咆霜，然后當(dāng)代碼執(zhí)行的時候邓馒，一次性的將這些修改執(zhí)行。舉例來說蛾坯，這段代碼會觸發(fā)一次重繪和一次重排：
JavaScript
; html-script: false ]var $body = $('body');
$body.css('padding', '1px'); // 重排, 重繪
$body.css('color', 'red'); // 重繪
$body.css('margin', '2px'); // 重排, 重繪
// 實際上只有一次重排和重繪被執(zhí)行光酣。
如上面所說，訪問一個元素的屬性會進(jìn)行一次強(qiáng)制重排脉课。如果我們給上面的代碼加上一行讀取元素屬性的代碼救军，這個情況就會出現(xiàn)：
JavaScript
; html-script: false ]var $body = $('body');
$body.css('padding', '1px');
$body.css('padding'); // 這里讀取了一次元素的屬性，一次強(qiáng)制重排就會發(fā)生倘零。
$body.css('color', 'red');
$body.css('margin', '2px');
上面這段代碼的結(jié)果就是唱遭，進(jìn)行了兩次重排。因此呈驶，為了提高性能拷泽，你應(yīng)該講讀取元素屬性的代碼組織在一起。
有一種情況是必須觸發(fā)一次強(qiáng)制重排的袖瞻。例如：給元素改變同一個屬性兩次（比如margin-left
）司致，一開始設(shè)置100px，沒有動畫聋迎，然后通過動畫的形式將值改為50px脂矫。當(dāng)然，我在這里會講更多的細(xì)節(jié)霉晕。
我們從一個有transition的CSS class開始：
; html-script: false ].has-transition {
-webkit-transition: margin-left 1s ease-out;
-moz-transition: margin-left 1s ease-out;
-o-transition: margin-left 1s ease-out;
transition: margin-left 1s ease-out;
}
然后進(jìn)行實現(xiàn)：
JavaScript
; html-script: false ]//我們的元素默認(rèn)有"has-transition"屬性
var $targetElem = $('#targetElemId');
//刪除包含transition的class
$targetElem.removeClass('has-transition');
// 當(dāng)包含transition的class已經(jīng)沒了的時候庭再，改變元素屬性
$targetElem.css('margin-left', 100);
// 再將包含transition的class添加回來
$targetElem.addClass('has-transition');
// 改變元素屬性
$targetElem.css('margin-left', 50);
上面的實現(xiàn)沒有按照期望的運行。所有的修改都被瀏覽器緩存了牺堰，只在上面這段代碼的最后才會執(zhí)行拄轻。我們需要的是一次強(qiáng)制重排，我們可以通過進(jìn)行以下修改來實現(xiàn)：
JavaScript
; html-script: false ]//刪除包含transition的class
$(this).removeClass('has-transition');
// 改變元素屬性
$(this).css('margin-left', 100);
//觸發(fā)一次強(qiáng)制重排伟葫，從而使變化了的class或?qū)傩阅軌蛄⒓磮?zhí)行恨搓。
$(this)[0].offsetHeight; // offsetHeight僅僅是個例子，其他的屬性也可以奏效扒俯。
// 再將包含transition的class添加回來
$(this).addClass('has-transition');
// 改變元素屬性
$(this).css('margin-left', 50);
現(xiàn)在這段代碼如我們所期望的運行了奶卓。
實際的優(yōu)化建議
匯總了一些有用的信息，我建議以下幾點：
創(chuàng)建合法的 HTML 和 CSS 撼玄，別忘了制定文件編碼夺姑，Style 應(yīng)該寫在 head 標(biāo)簽中，script 標(biāo)簽應(yīng)該加載 body 標(biāo)簽結(jié)束的位置掌猛。
要改變元素的樣式盏浙，修改“class”屬性是最高效的方式之一。你要改變 DOM 樹的層次越深荔茬，這一條就越高效（這也有助于將表現(xiàn)和邏輯分開）废膘。
盡可能的只對 position 為 absolute 或 fix 的元素做動畫。
試著簡化和優(yōu)化 CSS 選擇器（這個優(yōu)化點被大多數(shù)使用 CSS 預(yù)處理器的開發(fā)者忽略了）慕蔚。將嵌套層數(shù)控制在最小丐黄。以下是 CSS 選擇器的性能排行（從最快的開始）：
ID選擇器：#id
class選擇器： .class
標(biāo)簽: div
相鄰的兄弟元素：a + i
父元素選擇器： ul > li
通配符選擇器： *
偽類和偽元素： a:hover
你應(yīng)該記住瀏覽器處理選擇器是從右向左的，這也就是為什么最右面的選擇器會更快——#id
或.class孔飒。
CSS
; html-script: false ]div * {...} // bad
.list li {...} // bad
.list-item {...} // good
#list .list-item {...} // good
在你的腳本中灌闺，盡可能的減少 DOM 的操作。把所有東西都緩存起來坏瞄，包括屬性和對象（如果它可被重復(fù)使用）桂对。進(jìn)行復(fù)雜的操作的時候，最好操作一個“離線”的元素（“離線”元素的意思是與 DOM 對象分開鸠匀、僅存在內(nèi)存中的元素）蕉斜，然后將這個元素插入到 DOM 中。
如果你使用 jQuery缀棍，遵循[jQuery 選擇器最佳實踐]
當(dāng)滾動時禁用一些復(fù)雜的 :hover
動畫是一個很好的主意（例如宅此，給 body 標(biāo)簽加一個 no-hover 的 class）。
