（1）回流：當dom元素的結構或位置發生改變（刪除，增加，改變位置）都會引發回流，所謂的回流就是瀏覽器拋棄原有的資料結構和樣式，從新進行dom。非常耗能。
（2）重繪：當某個dom元素樣式更改（位置沒變，顏色等變了），瀏覽器重新渲染這個元素。
解決方法：
（1）基於文件碎片（虛擬記憶體中開闢的乙個容器）：每當建立乙個li，我們首先把它存放到文件碎片中（千萬不要放到頁面中，避免回流），當我們把需要的元素都建立完成，並且都新增到文件碎片中，在統 一把文件碎片放到頁面中（只會引發一次回流操作）。
let frg = document.createdocumentfragment();
data.foreach((item, index) =>
"$"熱度：
//[引發一次回流]
box.style.top = '100px';
box.style.left = '100px';
console.log(box.style.top);//=>'100px'
回流和重繪
在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體 dom tree 和樣式結構體組合後構建render tree 渲染樹 然後根據...
回流和重繪
html 載入過程 在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體 dom tree 和樣式結構體組合後構建render tre...
回流和重繪
回流 reflow 當render tree中的一部分 或全部 因為元素的規模尺寸 布局 隱藏等改變而需要重新構建，這就稱為回流。每個頁面至少需要回流一次，就是在頁面第一次載入的時候。重繪 repaint 當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀 風格，而不會影...