前言
頁面顯示到瀏覽器上的過程：
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點我並未查找到相關證據，持保留態度。
對前端的技術，全棧技術感興趣的同學關注我的頭條號，並在后台私信發送關鍵字：“前端”即可獲取免費的全棧開發工程師學習資料
知識體系已整理好，歡迎免費領取。還有視頻分享可以免費獲取。關注我，可以獲得沒有的經驗哦！