關于網(wǎng)頁渲染的文章很多，但是相關信息比較分散，且論述并不是很完整。如果要想對這個主題有個大致的了解，我們還得學習很多知識。因此，Web 開發(fā)者 Alexander Skutin 決定寫一篇文章。他相信，這篇文章不僅能幫助初學者，也能對那些想要刷新知識結(jié)構的高級前端開發(fā)者有所裨益。
譯文如下
網(wǎng)頁渲染必須在很早的階段進行，可以早到頁面布局剛剛定型。因為樣式和腳本都會對網(wǎng)頁渲染產(chǎn)生關鍵性的影響。所以專業(yè)開發(fā)者必須了解一些技巧，從而避免在實踐的過程中遇到性能問題。
這篇文章不會研究瀏覽器內(nèi)部的詳細機制，而是提出一些通用的規(guī)則。畢竟，不同瀏覽器引擎的工作機制各不相同，這無疑會讓開發(fā)者對瀏覽器特性的研究變得更加復雜。
瀏覽器是如何完成網(wǎng)頁渲染？
首先，我們回顧一下網(wǎng)頁渲染時，瀏覽器的動作：
根據(jù)來自服務器端的 HTML 代碼形成文檔對象模型（DOM）
加載并解析樣式，形成 CSS 對象模型。
在文檔對象模型和 CSS 對象模型之上，創(chuàng)建一棵由一組待生成渲染的對象組成的渲染樹（在 Webkit 中這些對象被稱為渲染器或渲染對象，而在 Gecko 中稱之為“frame”。）渲染樹反映了文檔對象模型的結(jié)構，但是不包含諸如
標簽或含有display:none屬性的不可見元素。在渲染樹中，每一段文本字符串都表現(xiàn)為獨立的渲染器。每一個渲染對象都包含與之對應的 DOM 對象，或者文本塊，還加上計算過的樣式。換言之，渲染樹是一個文檔對象模型的直觀展示。對渲染樹上的每個元素，計算它的坐標，稱之為布局。瀏覽器采用一種流方法，布局一個元素只需通過一次，但是表格元素需要通過多次。
最后，渲染樹上的元素最終展示在瀏覽器里，這一過程稱為“painting”。
當用戶與網(wǎng)頁交互，或者腳本程序改動修改網(wǎng)頁時，前文提到的一些操作將會重復執(zhí)行，因為網(wǎng)頁的內(nèi)在結(jié)構已經(jīng)發(fā)生了改變。
重繪
當改變那些不會影響元素在網(wǎng)頁中的位置的元素樣式時，譬如 background-color (背景色)， border-color (邊框色)， visibility (可見性)，瀏覽器只會用新的樣式將元素重繪一次(這就是重繪，或者說重新構造樣式)。
重排
當改變影響到文本內(nèi)容或結(jié)構，或者元素位置時，重排或者說重新布局就會發(fā)生。這些改變通常由以下事件觸發(fā)：
DOM 操作（元素添加，刪除，修改，或者元素順序的改變）;
內(nèi)容變化，包括表單域內(nèi)的文本改變;
CSS 屬性的計算或改變;
添加或刪除樣式表;
更改“類”的屬性;
瀏覽器窗口的操作（縮放，滾動）;
偽類激活（：懸停）。
瀏覽器如何優(yōu)化渲染？
瀏覽器盡可能將重繪/重構 限制在被改變元素的區(qū)域內(nèi)。比如，對于位置固定或絕對的元素，其大小改變只影響元素本身及其子元素，然而，靜態(tài)定位元素的大小改變會觸發(fā)后續(xù)所有元素的重流。
另一種優(yōu)化技巧是，在運行幾段 JavaScript 代碼時，瀏覽器會緩存這些改變，在代碼運行完畢后再將這些改變經(jīng)一次通過加以應用
