最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

 
 
 
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
     
  
  
  
  
     
  
  
  
  
   
  
  
  
  
   
  
  
  
  
    
 Hello,  friend!  
 
  
  
  
  
    
  
  
  
  
  
       
  
  
  
  
    

對(duì)應(yīng)的 DOM樹(shù)如下：

基本上，每個(gè)元素都表示為所有元素的父節(jié)點(diǎn)，這些元素直接包含在元素中。

構(gòu)建 CSSOM

CSSOM 指的是 CSS 對(duì)象模型 。 當(dāng)瀏覽器構(gòu)建頁(yè)面的 DOM 時(shí)，它在 head 標(biāo)簽下如遇到了一個(gè) link 標(biāo)記且引用了外部 theme.css CSS 樣式表。 瀏覽器預(yù)計(jì)可能需要該資源來(lái)呈現(xiàn)頁(yè)面，它會(huì)立即發(fā)送請(qǐng)求。 假設(shè) theme.css 文件內(nèi)容如下：

 
 
 
 
  
  
  
  
body {  
  
  
  
  
  font-size: 16px; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
p {  
  
  
  
  
  font-weight: bold;  
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
span {  
  
  
  
  
  color: red;  
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
p span {  
  
  
  
  
  display: none;  
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
img {  
  
  
  
  
  float: right;  
  
  
  
  
} 
 
 
 

與 HTML一樣，渲染引擎需要將 CSS 轉(zhuǎn)換成瀏覽器可以使用的東西—— CSSOM。CSSOM 結(jié)構(gòu)如下：

你想知道為什么 CSSOM 是一個(gè)樹(shù)形結(jié)構(gòu)？ 在為頁(yè)面上的任何對(duì)象計(jì)算最終樣式集時(shí)，瀏覽器以適用于該節(jié)點(diǎn)的最常規(guī)規(guī)則開(kāi)始（例如，如果它是 body 元素的子元素，則應(yīng)用所有 body 樣式），然后遞歸地細(xì)化，通過(guò)應(yīng)用更具體的規(guī)則來(lái)計(jì)算樣式。

來(lái)看看具體的例子。包含在 body 元素內(nèi)的 span 標(biāo)簽中的任何文本的字體大小均為 16 像素，并且為紅色。這些樣式是從 body 元素繼承而來(lái)的。 如果一個(gè) span 元素是一個(gè) p 元素的子元素，那么它的內(nèi)容就不會(huì)被顯示，因?yàn)樗粦?yīng)用了更具體的樣式（display: none）。

另請(qǐng)注意，上面的樹(shù)不是完整的 CSSOM 樹(shù)，只顯示我們決定在樣式表中覆蓋的樣式。 每個(gè)瀏覽器都提供一組默認(rèn)樣式，也稱為 “user agent stylesheet” 。這是我們?cè)谖疵鞔_指定任何樣式時(shí)看到的樣式，我們的樣式會(huì)覆蓋這些默認(rèn)值。

不同瀏覽器對(duì)于相同元素的默認(rèn)樣式并不一致，這也是為什么我們?cè)?CSS 的最開(kāi)始要寫 *{padding:0;marging:0}; ，也就是我們要重置CSS默認(rèn)樣式的。

構(gòu)建渲染樹(shù)

CSSOM 樹(shù)和 DOM 樹(shù)連接在一起形成一個(gè) render tree，渲染樹(shù)用來(lái)計(jì)算可見(jiàn)元素的布局并且作為將像素渲染到屏幕上的過(guò)程的輸入。

• DOM 樹(shù)和 CSSOM 樹(shù)連接在一起形成 render tree .
• render tree 只包含了用于渲染頁(yè)面的節(jié)點(diǎn)
• 布局計(jì)算了每一個(gè)對(duì)象的準(zhǔn)確的位置以及大小
• 繪畫是最后一步，繪畫要求利用 render tree 來(lái)將像素顯示到屏幕上

渲染樹(shù)中的每個(gè)節(jié)點(diǎn)在 Webkit 中稱為渲染器或渲染對(duì)象。

收下是上面 DOM 和 CSSOM 樹(shù)的渲染器樹(shù)的樣子：

為了構(gòu)建渲染樹(shù)，瀏覽器大致執(zhí)行以下操作:

• 從 DOM 樹(shù)根節(jié)點(diǎn)開(kāi)始，遍歷每一個(gè)可見(jiàn)的節(jié)點(diǎn)

 
 
 
 
  
  
  
  
display:none 
 
 
 

• 對(duì)每一個(gè)可見(jiàn)的節(jié)點(diǎn)，找到合適的匹配的CSSOM規(guī)則，并且應(yīng)用樣式
• 顯示可見(jiàn)節(jié)點(diǎn)（節(jié)點(diǎn)包括內(nèi)容和被計(jì)算的樣式）

“visibility:hidden” 和 “display：none” 之間的不同， “visibility:hidden” 將元素設(shè)置為不可見(jiàn)，但是同樣在布局上占領(lǐng)一定空間（例如，它會(huì)被渲染成為空盒子），但是 “display:none” 的元素是將節(jié)點(diǎn)從整個(gè) render tree 中移除，所以不是布局中的一部分 。

你可以在這里查看 RenderObject 的源代碼（在 WebKit 中）：

https://github.com/WebKit/web...

我們來(lái)看看這個(gè)類的一些核心內(nèi)容：

每個(gè)渲染器代表一個(gè)矩形區(qū)域，通常對(duì)應(yīng)于一個(gè)節(jié)點(diǎn)的 CSS 盒模型。它包含幾何信息，例如寬度、高度和位置。

渲染樹(shù)的布局

創(chuàng)建渲染器并將其添加到樹(shù)中時(shí)，它沒(méi)有位置和大小，計(jì)算這些值稱為布局。

HTML使用基于流的布局模型，這意味著大多數(shù)時(shí)間它可以一次性計(jì)算幾何圖形。坐標(biāo)系統(tǒng)相對(duì)于根渲染器，使用左上原點(diǎn)坐標(biāo)。

布局是一個(gè)遞歸過(guò)程 - 它從根渲染器開(kāi)始，它對(duì)應(yīng)于 HTML 文檔的  元素。 布局以遞歸方式繼續(xù)通過(guò)部件或整個(gè)渲染器層次結(jié)構(gòu)，為每個(gè)需要它的渲染器計(jì)算幾何信息。

根渲染器的位置為 0,0 ，其尺寸與瀏覽器窗口的可見(jiàn)部分(即viewport)的大小相同。開(kāi)始布局過(guò)程意味著給每個(gè)節(jié)點(diǎn)在屏幕上應(yīng)該出現(xiàn)的確切坐標(biāo)。

繪制渲染樹(shù)

在此繪制，遍歷渲染器樹(shù)并調(diào)用渲染器的 paint() 方法以在屏幕上顯示內(nèi)容。

繪圖可以是全局的或增量式的（與布局類似）：

• 全局 — 整棵樹(shù)被重繪
• 增量式 — 只有一些渲染器以不影響整個(gè)樹(shù)的方式改變。 渲染器使其在屏幕上的矩形無(wú)效，這會(huì)導(dǎo)致操作系統(tǒng)將其視為需要重新繪制并生成繪 paint 事件的區(qū)域。 操作系統(tǒng)通過(guò)將多個(gè)區(qū)域合并為一個(gè)來(lái)智能完成。

總的來(lái)說(shuō)，重要的中要理解繪圖是一個(gè)漸進(jìn)的過(guò)程。為了更好的用戶體驗(yàn)，渲染引擎將盡可能快地在屏幕上顯示內(nèi)容。它不會(huì)等到解析完所有 HTML 后才開(kāi)始構(gòu)建和布局渲染樹(shù)，而是解析和顯示部分內(nèi)容，同時(shí)繼續(xù)處理來(lái)自網(wǎng)絡(luò)的其余內(nèi)容項(xiàng)。

處理腳本和樣式表的順序

當(dāng)解析器到達(dá) 

<tfoot id="m40i8"></tfoot>