效能優化篇 解決重排重繪導致的效能問題

重排與重繪導致的效能問題

瀏覽器的重排重繪導致一定的效能問題，頻繁的效能操作會嚴重導致瀏覽器卡頓，影響使用者體驗；因此在開發過程中我們應該盡量的避免瀏覽器的重排重繪，從而效能與使用者體驗；

避免重排與重繪的例子

例： 當要改變某個dom的位置時，平常的方法就是獲取這個dom節點，修改該節點的style樣式，當修改這個樣式時改變了cssom;因此瀏覽器重新渲染；不明白為什麼要重新渲染？

因為瀏覽器的渲染是遵循下面公式：

dom + cssom = renderdom

所以cssom改變了，renderdom也要變化呀。

無法避免的dom操作

很多時候無法避免操作dom，那只能對dom操作進行優化了，就像react一樣，我們可以在積攢一定會導致重排重繪的操作後一次性的去改變dom；慶幸前端社群的活躍，這裡有很多已有的工具可以使用；

fastdom

官網的例子

fastdom.measure(() => );

fastdom.mutate(() => );
fastdom.measure(() => );
fastdom.mutate(() => );

// 輸出結果

measure
measure
mutate
mutate

具體使用方法，將讀取dom的操作放到measure中，將寫操作放到mutate中，就這？沒錯，就這！

積跬步，至千里，加油少年！

解決重繪卡頓的終極法寶 - - requestanimationframe

瀏覽器檢視的更新是一幀幀更新的，在監聽事件變化的時候在一幀中有時候往往觸發了多個相同的事件，這樣嚴重影響了瀏覽器的效能和使用者的體驗，因此可以使用該函式使其一幀只觸發一次。

// 鎖

addeventlistener

('pointermove'

,(e)

=>

))

優化CSS重排重繪與瀏覽器效能

瀏覽器渲染展示網頁的過程，大致分為以下幾個步驟 解析html html parser 構建dom樹 dom tree 渲染樹構建 render tree 繪製渲染樹 painting 什麼 css 屬性是高消耗的？就是那些繪製前需要瀏覽器進行大量計算的屬性。瀏覽器為了重新渲染部分或整個頁面，重新計算...

優化CSS重排重繪與瀏覽器效能

解析html html parser 構建dom樹 dom tree 渲染樹構建 render tree 繪製渲染樹 painting 什麼 css 屬性是高消耗的？就是那些繪製前需要瀏覽器進行大量計算的屬性。瀏覽器為了重新渲染部分或整個頁面，重新計算頁面元素位置和幾何結構的程序叫做reflow.通...

優化CSS重排重繪與瀏覽器效能

關於css重排和重繪的概念，最近看到不少這方面的文章，覺得挺有用，在製作中考慮瀏覽器的效能，減少重排能夠節省瀏覽器對其子元素及父類元素的重新渲染 避免過分的重繪也能節省瀏覽器效能 優化動畫，使用3d啟用gpu硬體加速 慎重選擇高消耗的樣式，如box shadow border radius tran...