What tools would you use to find a performance bug in your code?
chrome
What are some ways you may improve your website`s scrolling performance?
- 在繫結了scroll事件後，chrome不知道事件會不會阻止滾動，所以會有100ms但延遲來判斷是否會呼叫preventDefault，然後再滾動，所以chrome提供了passive來忽略事件中帶prevenDefault
- scroll被頻繁觸發，減少handler執行評論
requestAnimationFrame //按照1/60秒的速度觸發
debounce //多次觸發合成一個1個
throttle //執行一個後，一段時間不被觸發
1.相容性不好。不靈活，動畫流程
2.精度搞
2.3 使用settimeout精度不高
Explain the difference between layout, painting and compositing.
- JavaScript：一般來說，我們會使用 JavaScript 來實現一些視覺變化的效果。比如做一個動畫或者往頁面裡新增一些 DOM 元素等。
- Style：計算樣式，這個過程是根據 CSS 選擇器，對每個 DOM 元素匹配對應的 CSS 樣式。這一步結束之後，就確定了每個 DOM 元素上該應用什麼 CSS 樣式規則。
- Layout：佈局，上一步確定了每個 DOM 元素的樣式規則，這一步就是具體計算每個 DOM 元素最終在螢幕上顯示的大小和位置。web 頁面中元素的佈局是相對的，因此一個元素的佈局發生變化，會聯動地引發其他元素的佈局發生變化。比如，<body> 元素的寬度的變化會影響其子元素的寬度，其子元素寬度的變化也會繼續對其孫子元素產生影響。因此對於瀏覽器來說，佈局過程是經常發生的。
- Paint：繪製，本質上就是填充畫素的過程。包括繪製文字、顏色、影像、邊框和陰影等，也就是一個 DOM 元素所有的可視效果。一般來說，這個繪製過程是在多個層上完成的。
- Composite：渲染層合併，由上一步可知，對頁面中 DOM 元素的繪製是在多個層上進行的。在每個層上完成繪製過程之後，瀏覽器會將所有層按照合理的順序合併成一個圖層，然後顯示在螢幕上。對於有位置重疊的元素的頁面，這個過程尤其重要，因為一旦圖層的合併順序出錯，將會導致元素顯示異常。
- 如果改變了layout屬性，也就是改變了元素的幾何屬性，高寬，位置就會自動重排
- 如果只改變了paint only 例如背景 文字顏色，則不會影響佈局，瀏覽器會跳過佈局
- 如果改變既不要佈局也不要繪製的屬性，則瀏覽器會跳過繪製,例如動畫和滾動
優化js執行
- 使用requestAnimationFrame來實現視覺變化
- 使用web worker來執行長時間的任務
- 使用微任務來執行多個楨的dom更改
- 使用chrome profile來評估效能
縮小樣式計算範圍
- 降低選擇器的複雜性，使用以類為中心的方法，例如BEM，減少偽類選擇器 例如 nth
- 減少必須計算樣式的元素數量（例如在改變了body元素的類，所有子元素都要重新計算樣式）
避免大型，複雜的佈局和佈局抖動
- 使用flex佈局模型，新的flex比舊的flex和浮動更快
- 避免佈局操作，例如改變元素幾何屬性
-
避免強制同步佈局，先讀取樣式值，然後進行樣式更改
- 避免佈局抖動，多次強制佈局同步
簡化繪製的複雜度，減小繪製區域
- 除了transform和opacity,其他屬性更改都會觸發繪製
- 繪製通常時畫素管道中開最大的
-
通過層的提上和動畫的編排來減少繪製區域
- 通過建立新層，將定期重繪的元素放在新層上，避免其他層的繪製
- will-change屬性，或者transform: translateZ(0)
- 降低繪製複雜度，涉及模糊陰影比紅框時間更長
減少層數量，使用合成層屬性
- 堅持使用 transform 和 opacity 屬性更改來實現動畫。
- 使用 will-change 或 translateZ 提升移動的元素。
- 避免過度使用提升規則；各層都需要記憶體和管理開銷。
使用debounce，去除抖動
- requestAnimationFrame或者debounce優化滾動程式