回流（reflow）：
當html結構發生變化時，瀏覽器都需要重新計算一遍最新的dom結構，重新對當前頁面進行渲染
重繪（repaint）：
如果只是改變某個元素的背景色、文字顏色、邊框顏色等，而不影響它周圍或內部布局的屬性，瀏覽器只需重新渲染當前的元素即可
回流是不可避免的，我們可以通過以下的方式減小回流帶來的影響：
1.css中避免使用不必要的複雜選擇器，特別是後代選擇器，因為這會消耗更多的效能去匹配選擇器
2.對於經常使用複雜操作的地方，嘗試使用position：absolute/fixed定位；或者是display：none，使之脫離文件流後進行操作，操作完成後再進入到文件流之中。
3.使用js改變元素樣式時盡量直接更改其class而非修改屬性
4.採用更優的資料繫結方式
我們來對比一下以下的幾種資料繫結方式：
①把需要動態繫結的內容乙個個的追加到頁面中
缺點：每當建立乙個li，我們就新增到頁面中，引發一次dom的回流，最後引發回流次數過多，影響我們的效能。
②先拼接字串，最後再新增到頁面中
const ul = document.getelementbyid('ul')
let str = "";
for (let i = 0; i < arr.length; i++)
ul.innerhtml += str;
優點：只引發一次回流
缺點：把新拼接的字串新增到ul中，原有的li繫結的事件都消失了
③利用documentfragment，documentfragment節點不屬於文件樹，當請求把乙個documentfragment節點插入文件樹時，插入的不是documentfragment自身，而是它的所有子孫節點。這個特性使得documentfragment成了佔位符，暫時存放那些一次插入文件的節點。我們可以把要增加的內容儲存到frg中，然後再新增到頁面中
web頁面的回流和重繪
什麼是回流？回流也叫重排 reflow 當頁面中的元素發生影響布局的變化，比如 改變寬高，修改顯示影藏。頁面需要重新布局，就會觸發重排。簡單的說就是，頁面布局改變，就會觸發重排。什麼是重繪 repaint 頁面中的元素樣式發生改變注意 每個頁面只要會發生一次重排和重繪。重排一定會觸發重繪前端效能優化...
頁面的回流與重繪
在構建渲染樹的過程中，瀏覽器主要完成了一下工作 前邊通過構造渲染樹，我們將可見dom節點以及它對應的樣式結合起來，可是我們還需要計算他們在裝置視口 viewport 內的準確位置和大小，這個計算的階段就是回流。最終，我們通過構造渲染樹和回流階段，我們知道了哪些節點是可見的，以及可見節點的樣式和具體的...
頁面的重繪與回流
上次在面試中，面試官問了我乙個關於頁面重繪和回流的問題，我解釋的不怎麼好。今天把它整理了一下，又參考了一些其他的文章。參考文章 頁面載入過程 1 瀏覽器將獲取到的html 解析成乙個dom樹，html中的每乙個標籤都是dom樹中的乙個節點，根節點就是document。dom樹中包含了所有的html標...