瀏覽器下載完頁面中的所有組件——HTML標記枫振、JavaScript柑营、CSS、圖片之后會解析生成兩個內(nèi)部數(shù)據(jù)結(jié)構(gòu)——DOM樹和渲染樹泊愧。
DOM樹表示頁面結(jié)構(gòu)伊磺，渲染樹表示DOM節(jié)點如何顯示。DOM樹中的每一個需要顯示的節(jié)點在渲染樹種至少存在一個對應(yīng)的節(jié)點（隱藏的DOM元素disply值為none 在渲染樹中沒有對應(yīng)的節(jié)點）删咱。渲染樹中的節(jié)點被稱為“幀”或“盒",符合CSS模型的定義屑埋，理解頁面元素為一個具有填充，邊距痰滋，邊框和位置的盒子摘能。一旦DOM和渲染樹構(gòu)建完成，瀏覽器就開始顯示（繪制）頁面元素敲街。
當DOM的變化影響了元素的幾何屬性（寬或高）团搞，瀏覽器需要重新計算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會因此受到影響多艇。瀏覽器會使渲染樹中受到影響的部分失效逻恐，并重新構(gòu)造渲染樹。這個過程稱為重排峻黍。完成重排后复隆，瀏覽器會重新繪制受影響的部分到屏幕，該過程稱為重繪奸披。由于瀏覽器的流布局昏名，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內(nèi)部元素除外阵面，它可能需要多次計算才能確定好其在渲染樹中節(jié)點的屬性轻局，通常要花3倍于同等元素的時間。這也是為什么我們要避免使用table做布局的一個原因样刷。
并不是所有的DOM變化都會影響幾何屬性仑扑，比如改變一個元素的背景色并不會影響元素的寬和高，這種情況下只會發(fā)生重繪置鼻。
==重排何時發(fā)生==
很顯然温算，每次重排添诉，必然會導致重繪半哟，那么快毛，重排會在哪些情況下發(fā)生愈犹？
1、添加或者刪除可見的DOM元素
2、元素位置改變
3、元素尺寸改變
4蛛碌、元素內(nèi)容改變（例如：一個文本被另一個不同尺寸的圖片替代）
5、頁面渲染初始化（這個無法避免）
6辖源、瀏覽器窗口尺寸改變
瀏覽器的重排與重繪
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門远豺，熙熙樓的掌柜王于貴愁眉苦臉地迎上來奈偏，“玉大人坞嘀，你說我怎么就攤上這事【矗” “怎么了丽涩？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長裁蚁。 經(jīng)常有香客問我矢渊，道長，這世上最難降的妖魔是什么枉证？ 我笑而不...
- 正文 為了忘掉前任矮男，我火速辦了婚禮，結(jié)果婚禮上室谚，老公的妹妹穿的比我還像新娘毡鉴。我一直安慰自己，他們只是感情好秒赤，可當我...
- 文/花漫 我一把揭開白布猪瞬。 她就那樣靜靜地躺著，像睡著了一般入篮。 火紅的嫁衣襯著肌膚如雪陈瘦。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼塞弊，長吁一口氣：“原來是場噩夢啊……” “哼漱逸！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起游沿，我...
- 正文 年R本政府宣布，位于F島的核電站好唯，受9級特大地震影響竭沫，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜骑篙，卻給世界環(huán)境...
- 文/蒙蒙 一蜕提、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧靶端，春花似錦谎势、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至镣煮，卻和暖如春姐霍，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 目錄一蓖柔、介紹二辰企、渲染引擎三、解析與DOM樹構(gòu)建四况鸣、渲染樹構(gòu)建五牢贸、布局六、繪制七懒闷、動態(tài)變化八十减、渲染引擎的線程九、CS...
- 問答題47 /72 常見瀏覽器兼容性問題與解決方案愤估？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
