知識點：
網頁的生成過程：
1、HTML程式碼轉化成DOM
2、css程式碼轉化成CSSOM(css object model)
3、結合DOM和CSSOM，生成一顆渲染樹（包含每個節點的視覺資訊）
4、生成佈局（layout），將所有渲染樹的所有節點進行平面合成
4、將佈局繪製（paint）到螢幕上
“生成佈局”和“繪製”這兩步，合稱為“渲染”
重排和重繪
一下三種情況，會導致網頁重新渲染
1、修改dom
2、修改樣式表
3、使用者事件
重新渲染，就需要重新生成佈局和重新繪製，前者叫做“重排”，後者叫做“重繪”
“重繪”不一定需要“重排”，“重排”必然導致“重繪”
timeline基礎皮膚介紹
網頁動畫能夠做到每秒60幀，就會跟顯示器同步重新整理，一秒之內進行60次重新渲染，每次重新渲染的時間不能超過16.66毫秒
藍色：網路通訊和HTML解析
黃色：javascript執行
紫色：樣式計算和佈局，即重排
綠色：重繪
觸發分層
1、獲取DOM並將其分割成為多個層
2、將每個層獨立的繪製進點陣圖中
3、將層作為紋理上傳至GPU
4、複合多個層來生成最終的螢幕影象
提高效能的技巧
1、樣式表越簡單，重排和重繪就越快
2、DOM元素層級較高，重排和重繪的成本就越高
3、table元素的重排和重繪成本，要高於div元素
4、儘量不要把讀操作和寫操作，放在一個語句裡面，多個讀操作應該放在一起
一般樣式寫的操作之後，如果有下面這些屬性的讀操作，都會引發瀏覽器立即重新渲染
offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()
5、統一改變樣式:不要一條條的改變樣式，而要通過改變class,或者classtext屬性
6、快取重排結果
7、離線DOM 採用Fragment/clone
8、虛擬DOM React
9、元素display:none需要一次重排重繪，然後對節點進行100次的操作，最後再恢復，又一次重排重繪，兩次的重排重繪，取代可能高達100次的重新渲染
10、position屬性為absolute或者fixed的元素，重排開銷比較小，因為不用考慮它對其他元素的影響
11、visibility:hidden 的元素只對重繪有影響，不影響重排
10、
window.requestAnimationFrame(callback)瀏覽器在下一次重新渲染時執行
window.requestIdleCallback(fn,6000)當一幀的末尾有空閒時間的時候才執行回撥函式；但是在指定的時間內每一幀末尾都沒有空閒時間，就強制執行
此處的每一幀末尾有空閒時間是指當前幀的執行時間小於16.66ms
fn可以接受一個deadline的物件：deadline物件包含一個屬性和一個方法：timeRemaining()和didTimeout屬性
timeRemaining()方法是指當前幀的剩餘毫秒數
didTimeout：返回一個布林值，表示時間是否過期