資訊專欄INFORMATION COLUMN
摘要：瀏覽器會(huì)對(duì)發(fā)生變化的呈現(xiàn)器以及其子代標(biāo)注為，表示需要進(jìn)行標(biāo)記分為兩種和。異步和同步異步，簡單來說，就是指瀏覽器為了盡可能減少和的操作，而將這些操作積攢起來，再統(tǒng)一做一次。
終于到了布局的部分了！
布局當(dāng)渲染對(duì)象被創(chuàng)建并添加到樹中，是沒有位置和大小的，計(jì)算這些值的過程稱為layout或reflow。
布局是一個(gè)遞歸過程，由根渲染對(duì)象開始，對(duì)應(yīng)html文檔元素，布局繼續(xù)遞歸的通過一些或所有的frame層級(jí)，為每個(gè)需要幾何信息的渲染對(duì)象進(jìn)行計(jì)算。跟渲染對(duì)象位置是0，0。所有渲染對(duì)象都有一個(gè)layout或reflow方法，每個(gè)渲染對(duì)象調(diào)用需要布局的children的layout方法。
瀏覽器會(huì)對(duì)發(fā)生變化的呈現(xiàn)器以及其子代標(biāo)注為"dirty"，表示需要進(jìn)行l(wèi)ayout
標(biāo)記分為兩種："dirty"和"children are dirty"。
“children are dirty”表示盡管呈現(xiàn)器本身沒有變化，但它至少有一個(gè)子代需要布局。
這里需要說明一下重排reflow和重繪repaint。
當(dāng)改變影響到文本內(nèi)容、結(jié)構(gòu)或元素位置時(shí)，就會(huì)發(fā)生重排。
通常有以下事件觸發(fā)：
網(wǎng)頁初始化時(shí)
DOM操作（元素添加、刪除、修改、元素順序變化）
內(nèi)容變化，包括表單域內(nèi)文本改變
CSS屬性的計(jì)算或改變
添加或刪除樣式表
更改“類”屬性
瀏覽器窗口的縮放、滾動(dòng)等
偽類激活（例如:hover懸停）
重繪 repaint改變不會(huì)影響元素的位置及大小的樣式時(shí)，則會(huì)觸發(fā)重繪。換句話說，元素改變外觀時(shí)會(huì)觸發(fā)這個(gè)行為，不包括修改元素的幾何屬性。例如background,visibility。
異步layout和同步layout異步layout，簡單來說，就是指瀏覽器為了盡可能減少reflow和repaint的操作，而將這些操作積攢起來，再統(tǒng)一做一次reflow。
什么時(shí)候會(huì)產(chǎn)生同步layout呢？
例如resize窗口、改變頁面默認(rèn)字體時(shí)，或者是腳本作出以下請(qǐng)求：
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
IE中的 getComputedStyle(), 或 currentStyle
那么瀏覽器需要立即layout以返回最新的值。
parent渲染對(duì)象決定寬度
parent渲染對(duì)象讀取children,設(shè)置其x,y；在需要時(shí)【標(biāo)記為dirty或全局layout等】調(diào)用child渲染對(duì)象的layout，計(jì)算child高度；parent使用child的累積高度，以及margin和padding的高度來設(shè)置自己的高度；最后將dirty標(biāo)志設(shè)置為false
繪制和布局一樣，繪制也可以是全局的——繪制完整的樹——或增量的。在增量的繪制過程中，一些渲染對(duì)象以不影響整棵樹的方式改變，改變的渲染對(duì)象使其在屏幕上的矩形區(qū)域失效，這將導(dǎo)致操作系統(tǒng)將其看作dirty區(qū)域，并產(chǎn)生一個(gè)paint事件，操作系統(tǒng)很巧妙的處理這個(gè)過程，并將多個(gè)區(qū)域合并為一個(gè)。Chrome中，這個(gè)過程更復(fù)雜些，因?yàn)殇秩緦?duì)象在不同的進(jìn)程中，而不是在主進(jìn)程中。Chrome在一定程度上模擬操作系統(tǒng)的行為，表現(xiàn)為監(jiān)聽事件并派發(fā)消息給渲染根，在樹中查找到相關(guān)的渲染對(duì)象，重繪這個(gè)對(duì)象（往往還包括它的children）。
繪制順序一個(gè)塊渲染對(duì)象的堆棧順序是：
背景色
背景圖
border
children
outline
【待更新】
參考文獻(xiàn)：
瀏覽器內(nèi)部工作原理
瀏覽器的渲染原理簡介
How browsers work
有關(guān)網(wǎng)頁渲染，每個(gè)前端開發(fā)者都該知道的那點(diǎn)事
前端文摘：深入解析瀏覽器的幕后工作原理
MDN:Style System Overview
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115299.html
摘要：瀏覽器會(huì)對(duì)發(fā)生變化的呈現(xiàn)器以及其子代標(biāo)注為，表示需要進(jìn)行標(biāo)記分為兩種和。異步和同步異步，簡單來說，就是指瀏覽器為了盡可能減少和的操作，而將這些操作積攢起來，再統(tǒng)一做一次。 終于到了布局的部分了！ 布局 當(dāng)渲染對(duì)象被創(chuàng)建并添加到樹中，是沒有位置和大小的，計(jì)算這些值的過程稱為layout或reflow。布局是一個(gè)遞歸過程，由根渲染對(duì)象開始，對(duì)應(yīng)html文檔元素，布局繼續(xù)遞歸的通過一些或所有...
摘要：瀏覽器會(huì)對(duì)發(fā)生變化的呈現(xiàn)器以及其子代標(biāo)注為，表示需要進(jìn)行標(biāo)記分為兩種和。異步和同步異步，簡單來說，就是指瀏覽器為了盡可能減少和的操作，而將這些操作積攢起來，再統(tǒng)一做一次。 終于到了布局的部分了！ 布局 當(dāng)渲染對(duì)象被創(chuàng)建并添加到樹中，是沒有位置和大小的，計(jì)算這些值的過程稱為layout或reflow。布局是一個(gè)遞歸過程，由根渲染對(duì)象開始，對(duì)應(yīng)html文檔元素，布局繼續(xù)遞歸的通過一些或所有...
摘要：遵循的是異步模塊定義規(guī)范，遵循的是通用模塊定義規(guī)范。不同的腳本加載這個(gè)模塊，得到的都是同一個(gè)實(shí)例。關(guān)于異步那些事就寫到這里了，很多地方理解的不夠深刻希望大家多多指教。 JS異步那些事 一 （基礎(chǔ)知識(shí)）JS異步那些事 二 （分布式事件）JS異步那些事 三 （Promise）JS異步那些事 四（HTML 5 Web Workers）JS異步那些事 五 （異步腳本加載） 異步腳本加載 阻塞性...
摘要：背景作為正在探索如何寫作并發(fā)表到各大博客平臺(tái)的新人目前雖然已基本弄清寫作和發(fā)表的基本流程但是離打造個(gè)人知名度還差很大很大一段距離尤其處于新手階段需要的更是自信與外界的積極反饋看著各平臺(tái)日益增長的閱讀量和粉絲量心中自然不甚欣喜但是持續(xù)的技術(shù)輸 背景 作為正在探索如何寫作并發(fā)表到各大博客平臺(tái)的新人,目前雖然已基本弄清寫作和發(fā)表的基本流程,但是離打造個(gè)人知名度還差很大很大一段距離. 尤其處于...
閱讀 3496·2021-09-08 10:46
閱讀 1192·2019-08-30 13:17
閱讀 2372·2019-08-30 13:05
閱讀 1214·2019-08-29 15:29
閱讀 2893·2019-08-29 11:31
閱讀 548·2019-08-26 12:13
閱讀 1542·2019-08-26 11:42
閱讀 1850·2019-08-23 18:37
