前端效能之重排和重繪

前端效能之重排和重繪

1：什麼是重排、重繪

當dom的變化引發了元素幾何屬性的變化,比如改變元素的寬高,元素的位置導致瀏覽器不得不重新計算元素的幾何屬性,並重新構建渲染樹,這個過程為重排.完成重排後,要將重新構建的渲染樹渲染到螢幕上,這個過程就是重繪.

簡單地說，重排負責元素的幾何屬性更新，重繪負責元素的樣式更新。而且，重排必然帶來重繪，但是重繪未必帶來重排。比如，改變某個元素的背景（色、圖），這個就不涉及元素的幾何屬性，所以只發生重繪。

2：重排(回流)觸發機制

（1）新增或刪除可見的dom元素

（2）元素位置改變

（3）元素本身尺寸發生改變

（4）內容改變

（5）頁面渲染器初始化

（6）瀏覽器視窗大小發生改變

3：如何進行效能優化

（1）修改樣式使用csstext屬性 eg: var el = document.queryselector('.el'); el.style.csstext = 'border-left: 1px; border-right: 2px; padding: 5px';

（2）切換class類名 也可以減少重排

（3）批量修改dom

1）可以先隱藏元素(display:none),進行修改後,然後再顯示該元素

2）使用文件片段document.createdocumentfragment()建立,再進行新增

3)  將原始元素拷貝到clonenode()乙個獨立的節點中,操作該節點然後覆蓋原始元素

let old = document.queryselector('#mylist');

let clone = old.clonenode(true);
old.parentnode.replacechild(clone, old);

前端問題之重排重繪

在弄明白什麼是重排之前，我們要知道 瀏覽器渲染頁面預設採用的是流式布局模型 flow based layout 所謂重排，實際上是根據渲染樹中每個渲染物件的資訊，計算出各自渲染物件的幾何資訊 dom物件的位置和尺寸大小 並將其安置在介面中的正確位置 由於瀏覽器渲染介面是基於流式布局模型的，也就是某乙...

重繪和重排

重繪是乙個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility outline 背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計算 儘量減少重排次數和縮小重排的影響範圍 1.dom...

重排和重繪

當dom的變化影響了元素的幾何屬性 寬或高 瀏覽器需要重新計算元素的幾何屬性，同時其他元素的幾何屬性和位置也會受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹，這個過程稱為重排。完成重排後，瀏覽器會重新繪製受到影響的部分到螢幕，這個過程稱為重繪。由於瀏覽器的流布局，對渲染樹的計算通常...