前端面試筆記 - 性能

時間 2019-12-06

原文原文鏈接

What tools would you use to find a performance bug in your code?

chromeweb

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精度不高chrome

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,其餘屬性更改都會觸發繪製
繪製一般時像素管道中開最大的
經過層的提上和動畫的編排來減小繪製區域dom
- 經過建立新層，將按期重繪的元素放在新層上，避免其餘層的繪製
- will-change屬性，或者transform: translateZ(0)
下降繪製複雜度，涉及模糊陰影比紅框時間更長