前言 頁面顯示到瀏覽器上的過程： 1.1、生成一個DOM樹。 瀏覽器將獲取到的HTML代碼解析成1個DOM樹，包含了所有標簽，包括display:none和動態添加的節點。 1.2、生成樣式結構體。 瀏覽器將所有樣式解析成樣式結構體，解析過程中會去掉瀏覽器不能識別的。 2、DOM樹和樣式結構體結合生 ...
前言
頁面顯示到瀏覽器上的過程：
1.1、生成一個DOM樹。
瀏覽器將獲取到的HTML代碼解析成1個DOM樹，包含了所有標簽，包括display:none和動態添加的節點。
1.2、生成樣式結構體。
瀏覽器將所有樣式解析成樣式結構體，解析過程中會去掉瀏覽器不能識別的。
2、DOM樹和樣式結構體結合生成render樹。
render樹類似於DOM樹，render樹每個節點有自己樣式（盒子模型，margin、border、padding、content），但不包含display:none和head節點，卻包含visibility:hidden節點。
3、瀏覽器根據render樹渲染頁面。
重繪(repaint)和迴流(reflow)
迴流：當render tree中的一部分(或全部)因為元素的尺寸，佈局，隱藏等改變而需要重新構建，就是迴流。迴流後會進行重繪。
重繪：當只是元素的外觀，風格變化，不影響佈局的，重新渲染的過程就叫重繪。
PS：這樣重繪的代價會比迴流小。
什麼時候出現迴流？
1、頁面渲染初始化
2、添加、刪除可見的DOM元素
3、元素尺寸、位置變化
4、視窗resize
瀏覽器對迴流、重繪優化
瀏覽器都會優化重繪和迴流的操作。瀏覽器會把所有會引起迴流、重繪的操作放入1個隊列中，等隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush隊列，進行一個批處理。這樣就會讓多次的迴流、重繪變成一次迴流重繪。
另外，當我們取一些屬性值時，類似offsetWidth、clientWidth、width等，會導致瀏覽器提前flush隊列，只為了取到正確的值，即便是隊列里的操作不影響所取的值。
減少迴流、重繪
1、修改樣式和添加DOM元素時，批量處理。
2、取offsetWidth等屬性值，緩存到變數，少去取值。
3、將元素脫離文檔流。
PS：第3點我並未查找到相關證據，持保留態度。
總結
現在寫前端代碼的，大多很隨心所欲，還一般都不出問題，因為一旦糟糕到程式異常，通常也就醒悟了。
