重繪與重排

重繪就是重新繪製（repaint）

重排就是重新排列（reflow）

dom發生改變的時候觸發重排，使dom重新排列，重繪不一定會重排，但是重排一定發生重繪，重繪和重排都會耗費瀏覽器的效能，盡量避免

解析css繪製css樹

生成render tree（渲染樹）

flow排列，將渲染樹節點合成（渲染）

paint繪製，將排列繪製在螢幕上（渲染）

改變元素幾何資訊（大小和位置），都會引起

dom改變

input 輸入內容改變

resize

style屬性改變

margin

計算offsetwidth和offsetheight

發生外觀的變化，沒有改變布局

目的：儘量減少重繪和重排的次數，限定範圍

div.style.left = '10px';

div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';

console和js分離，然後把重排改變的樣式集中寫，這樣可以把他們放在渲染佇列

讀寫分離

// bad 強制重新整理 觸發兩次重排

div.style.left = div.offsetleft + 1 + 'px';
div.style.top = div.offsettop + 1 + 'px';
// good 快取布局資訊 相當於讀寫分離
var curleft = div.offsetleft;
var curtop = div.offsettop;
div.style.left = curleft + 1 + 'px';
div.style.top = curtop + 1 + 'px';

強制重新整理style樣式

1.offsettop, offsetleft, offsetwidth, offsetheight

2.scrolltop, scrollleft, scrollwidth, scrollheight

3.clienttop, clientleft, clientwidth, clientheight

4.getcomputedstyle(), 或者 ie的 currentstyle

重排與重繪

重排和重繪作為前端必須要掌握的知識點，在面試 現的機率通常都是較高的 定義 重排，又可以叫回流，英文名reflow 屬於瀏覽器渲染機制的乙個過程 通常在第一次載入頁面觸發 在dom結構當中，每個元素都有只屬於自己的盒子 模型 這些都需要瀏覽器各種樣式來計算並根據計算結果將元素放到它該出現的位置，這就...

重繪與重排

重繪是乙個元素外觀的改變所觸發的瀏覽器行為。例如改變outline 背景色等屬性，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀，重繪不會帶來重新布局，所以不一定伴隨重排。需要注意的是 重繪是以圖層為單位，如果圖層中某個元素需要重繪，那麼整個圖層都需要重繪，例如乙個圖層包含很多節點，其中有個g...

重排與重繪

1.重排reflow reflow指的是重新計算頁面布局 某個節點reflow時會重新計算節點的尺寸和位置，而且還有可能觸發其子節點，祖先節點和頁面上的其他節點reflow,在這之後再觸發一次repaint 當render tree中的一部分 或全部 因為元素的規模尺寸,布局,隱藏等改變而需要重新構...