資訊專欄INFORMATION COLUMN
摘要：頁面中元素的布局是相對的，因此一個元素的布局發生變化，會聯動地引發其他元素的布局發生變化。對于有位置重疊的元素的頁面，這個過程尤其重要，因為一旦圖層的合并順序出錯，將會導致元素顯示異常。
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精度不高
JavaScript：一般來說，我們會使用 JavaScript 來實現一些視覺變化的效果。比如做一個動畫或者往頁面里添加一些 DOM 元素等。
Style：計算樣式，這個過程是根據 CSS 選擇器，對每個 DOM 元素匹配對應的 CSS 樣式。這一步結束之后，就確定了每個 DOM 元素上該應用什么 CSS 樣式規則。
Layout：布局，上一步確定了每個 DOM 元素的樣式規則，這一步就是具體計算每個 DOM 元素最終在屏幕上顯示的大小和位置。web 頁面中元素的布局是相對的，因此一個元素的布局發生變化，會聯動地引發其他元素的布局發生變化。比如，
元素的寬度的變化會影響其子元素的寬度，其子元素寬度的變化也會繼續對其孫子元素產生影響。因此對于瀏覽器來說，布局過程是經常發生的。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優化滾動程序
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101231.html
摘要：觀察者模式也稱發布訂閱模式它的作用就是當一個對象的狀態發生改變時，所有依賴于它的對象都將得到通知，自動刷新對象狀態舉個生活比較常見常見的例子比如你去面試之后，面試官看你表現不錯，最后會跟你要聯系方式，以便之后可以聯系你。 觀察者模式也稱發布-訂閱模式,它的作用就是當一個對象的狀態發生改變時，所有依賴于它的對象都將得到通知，自動刷新對象狀態 舉個生活比較常見常見的例子,比如你去面試之后，...
摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...
摘要：本來很久以前就該把前端面試系列的文章更新完，但是自己懶，加上發現網上有些文章確實寫的不錯，就一直拖著沒寫。但是有次去圖書館，看到一本書叫前端面試江湖，索性找了一個時間，把全部內容整合到一起。 本來很久以前就該把前端面試系列的文章更新完，但是自己懶，加上發現網上有些文章確實寫的不錯，就一直拖著沒寫。但是有次去圖書館，看到一本書叫《前端面試江湖》，索性找了一個時間，把全部內容整合到一起。這...
摘要：本來很久以前就該把前端面試系列的文章更新完，但是自己懶，加上發現網上有些文章確實寫的不錯，就一直拖著沒寫。但是有次去圖書館，看到一本書叫前端面試江湖，索性找了一個時間，把全部內容整合到一起。 本來很久以前就該把前端面試系列的文章更新完，但是自己懶，加上發現網上有些文章確實寫的不錯，就一直拖著沒寫。但是有次去圖書館，看到一本書叫《前端面試江湖》，索性找了一個時間，把全部內容整合到一起。這...
閱讀 1381·2021-10-08 10:04
閱讀 2696·2021-09-22 15:23
閱讀 2727·2021-09-04 16:40
閱讀 1179·2019-08-29 17:29
閱讀 1496·2019-08-29 17:28
閱讀 2994·2019-08-29 14:02
閱讀 2223·2019-08-29 13:18
閱讀 847·2019-08-23 18:35
