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