頁面的顯示過程：

1.生成DOM樹(DOM TREE)

2.加載CSS

3.生成渲染樹(RENDER TREE),渲染樹是和樣式相關的

4.瀏覽器基於GPU(顯卡)開始按照RENDER TREE畫頁面

重繪(repaint)：
當某一個DOM元素 樣式更改 (位置沒變只是樣式更改，例如：顏色變為紅色…)瀏覽器會重新渲染這個元素

例子：

box.style.color = 'red'
box.style.fontsize = '16px'

上面操作觸發了兩次重繪，性能上有所消耗，為了優化性能，我們最好一次性把需要修改的樣式搞定，例如：

.xxx{
    color:'red',
    font-size:'16px'
}
box.className = 'xxx'

迴流(reflow)

1.頁面首次渲染

2.當DOM元素的結構或者位置發生改變（刪除、增加、改變位置、改變大小…）

3.獲取某些屬性也會引起迴流

都會引發迴流，所謂迴流，就是瀏覽器拋棄原有計算的結構和樣式，從新進行DOM TREE或者RENDER TREE，非常非常非常…消耗性能

解決方案
1.避免頻繁操作樣式：一次性把需要修改的樣式搞定

2.避免頻繁操作DOM：

基於文檔碎片(虛擬內存中開闢的一個容器)可以解決這個問題：每當創建一個LI，我們首先把它存在文檔碎片中(千萬不要放在頁面中，避免迴流)，當我們把需要的元素都創建完成，並且都添加到文檔碎片中，在統一把文檔碎片放到頁面中(只會引發一次迴流操作)

let frg = document.createDocumentFragment();// 創建文檔碎片容器