走進瀏覽器內部—剖析瀏覽器是如何工作的（中）
趁熱打鐵，今天繼續昨天的內容。分享有關瀏覽器的內容。可能我們即使瞭解瀏覽器的工作原理對工作幫助也不是很大，其實不言，如果瞭解瀏覽器的機制，我們就可以避免一些可能會影響應用效能的陷阱了。
在下圖中，我們可以瞭解瀏覽器是如何解析樣式表，然後生成 CSS 樹的，
CSS 樹，每一個{}都可以看作一個 CSSRul 物件，有這個規則適用範圍（selectors 通過選擇器來確定）和規則的內容（宣告規則具體內容）
解析 Html 和 css 過程是並行，也就是同時進行的，在這個過程中，javascript 是可以影響 CSS 和 Html 的解析的過程。
將 CSS 物件和 DOM 物件相結合，也就是將 CSS 規則（樣式）應用到 DOM 物件上，CSSRule 規則表述了他所應用的 DOM 在螢幕上呈現模樣。
所謂渲染樹，其實並不是一顆，渲染物件樹是基於 DOM 物件，用來確定 DOM 層級關係和 DOM 的用途，如用途是圖片還是文字，渲染樣式樹，決定了 DOM 物件的模樣，例如背景色，高度，尺寸，文字顏色。渲染布局樹，決定了渲染物件在螢幕上的位置，這裡包括 z 軸上位置（也就是層疊關係），LineBox 用於包裹文字。
有關什麼樣的內容不會參與渲染，顯示到螢幕上，上圖說很清楚，不贅述了。
計算樣式，也就是計算機通過計算渲染物件的樣式和尺寸的過程，每個 DOM 物件都有自己的預設樣式，如果有在樣式表中，有有關此渲染物件的樣式規則，這些規則也會應用到或覆蓋原有的樣式。最後會檢查是渲染物件否有內聯樣式，內聯樣式會覆蓋掉之前的宣告相同的樣式。
樣式中所謂計算，（這裡指 compute的）是根據 margin padding border height width 這些屬性以及根據 box 模式來確定Dom 物件的位置。
