日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
程序員：HTML、CSS、JavaScript是如何變成頁面的？

從輸入HTML、CSS、JavaScript到瀏覽器渲染出我們預(yù)期的效果，渲染流程分為這幾個子階段：構(gòu)建DOM樹、樣式計算、布局階段、分層、繪制、分塊、光柵化和合成。

十余年的邕寧網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整邕寧建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“邕寧網(wǎng)站設(shè)計”,“邕寧網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

以下面這段html舉例講解這幾個過程：

 
 
 
 
      
  
  
  
  1. //aa.html  
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5.   
    6.   
  
  
  
  6. Title  
    7.   
  
  
  
  7.   
    8.   
  
  
  
  8.   
    9.   
  
  
  
  9.   
    10.   
  
  
  
  10. hello
      
    11.   
  
  
  
  11. hi
      
    12.   
  
  
  
  12. ok  
    13.   
  
  
  
  13.   
    14.   
  
  
  
  14.   
    15.   
  
  
  
  15.   
    16.   
  
  
  
  16.   
    17.  
 
 

 
 
 
 
      
  
  
  
  1. //aa.css  
    2.   
  
  
  
  2. #p-two {  
    3.   
  
  
  
  3. font-size:2rem;  
    4.   
  
  
  
  4. }  
    5.  
 
 

 
 
 
 
      
  
  
  
  1. //aa.js  
    2.   
  
  
  
  2. $("#p-three").bind("click", function() {  
    3.   
  
  
  
  3. $("#p-three").css("color", "blue");  
    4.   
  
  
  
  4. }); 
    5.

構(gòu)建DOM樹

因為瀏覽器?法直接理解和使?HTML，所以需要將HTML轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)——DOM樹。

樣式計算

樣式計算的?的是為了計算出DOM節(jié)點中每個元素的具體樣式，分為三個步驟：

1. 把CSS轉(zhuǎn)換為瀏覽器能夠理解的結(jié)構(gòu)—styleSheets

2.  轉(zhuǎn)換樣式表中的屬性值，使其標準化,如:

 
 
 
 
      
  
  
  
  1. font-size:2em->font-size:32px  
    2.   
  
  
  
  2. p{color:blue}->p{color:rgb(0,0,255)}  
    3.   
  
  
  
  3. div{font-weight:bold}->div{font-weight:700} 
    4.

3.計算出DOM樹中每個節(jié)點的具體樣式，最終輸出的內(nèi)容是每個DOM節(jié)點的樣式，并被保存在ComputedStyle的結(jié)構(gòu)內(nèi)。

布局階段

現(xiàn)在，以及有了DOM樹和DOM樹中元素的樣式，但還不足以顯示頁面，因為還不知道DOM元素的幾何位置信息，布局階段就是需要計算出DOM樹中元素的幾何位置，包括以下幾個步驟：

創(chuàng)建布局樹

DOM樹中包含很多不可見的標簽，比如某個標簽使用了屬性"display:none"。所以在顯示之前，還要額外地構(gòu)建一棵只包含可見元素的布局樹，瀏覽器創(chuàng)建布局樹的大致流程為：遍歷DOM樹中所有可見節(jié)點，并加入布局樹中，忽略不可見節(jié)點。

布局計算

計算每個元素的幾何坐標位置，并將這些信息保存在布局樹中。

小結(jié)前三個階段：在HTML頁面內(nèi)容被提交給瀏覽器渲染引擎后，渲染引擎首先將HTML解析為瀏覽器可以理解的DOM；然后根據(jù)CSS樣式表，計算出DOM數(shù)所有節(jié)點的樣式；接著又計算每個元素的幾何坐標位置，并將這些信息保存在布局樹中。

分層

有了每個元素的樣式和位置信息，但還是不能開始著手繪制頁面，因為頁面中還有很多復(fù)雜的效果，如3D變化、頁面滾動等，為了實現(xiàn)這些效果，渲染引擎還需要為特定節(jié)點生成專門的圖層，并生成一顆對應(yīng)的圖層樹，即有些元素實際上是被分成了很多層，這些圖層疊加后合成了最終的頁面。只要滿足下面兩個條件之一的元素就會可以生成一個對應(yīng)的圖層：

擁有層疊上下文屬性的元素會被提升為單獨的一層

從圖中可以看出，明確定位屬性的元素、定義透明屬性的元素、使用CSS濾鏡的元素等，都擁有層疊上下文屬性。

需要裁減的地方也會被創(chuàng)建為圖層

舉例：在css中指定了一個div大width和height屬性后，如果div子元素p標簽的文字內(nèi)容超過了widthheight大小，就會只把能在widthheight面積內(nèi)能顯示的內(nèi)容顯示出來，其他內(nèi)容被裁減掉了。

圖層繪制

有了圖層樹之后，渲染引擎會對圖層樹中的每個圖層進行繪制。圖層繪制階段，就是輸入各種繪制指令組成的列表（注意，這個階段還不是真正地著手繪制）。

在原aa.html文件中添加代碼

pp
下圖中，紅色區(qū)域就是繪制列表，粉色區(qū)域顯示的是繪制過程，可點擊任何一個繪制過程查看。

分塊和柵格化操作

繪制列表只是用來記錄繪制順序和繪制指令，而實際繪制操作是由渲染引擎中的合成線程來完成的。當(dāng)圖層的繪制列表準備好之后，主線程就會把繪制列表提交給合成線程。合成線程會將圖層劃分為圖塊，視口（就是當(dāng)前窗口可見的區(qū)域）附近的圖塊優(yōu)先生產(chǎn)位圖，生產(chǎn)位圖的操作實際由柵格化來執(zhí)行（柵格化的具體含義可自行百度）。渲染進維護了一個柵格化線程池，所有的圖塊柵格化都是在線程池內(nèi)執(zhí)行的，該過程會使用GPU來加速，生產(chǎn)的位圖被保存在GPU內(nèi)存中。

合成和顯示

當(dāng)所有圖塊都被光柵化（柵格化）后，合成線程就會生成繪制圖塊的命令，然后該命令提交給瀏覽器進程（這里簡單說下Chrome瀏覽器多進程架構(gòu)，其將瀏覽器分為：渲染進程、插件進程、GPU進程和瀏覽器主進程，瀏覽器主進程包含UI模塊、網(wǎng)絡(luò)模塊、文件模塊等），瀏覽器進程將其頁面內(nèi)容繪制到內(nèi)存中，最后再將內(nèi)存內(nèi)容顯示在屏幕上。

至此，HTML+CSS+JavaScript就能生成我們所看見的頁面了。

總結(jié)

一個完整的渲染流程大致如下：

  •  渲染進程將HTML內(nèi)存轉(zhuǎn)換為瀏覽器能夠識別的DOM數(shù)據(jù)結(jié)構(gòu)
  •  渲染引擎將CSS樣式表轉(zhuǎn)換為瀏覽器能夠識別的sytleSheets，計算出DOM節(jié)點的樣式
  •  創(chuàng)建布局樹，包括可見元素以及元素的位置計算
  •  渲染引擎為達到分層條件的節(jié)點生成對應(yīng)的圖層，所有圖層組合成一顆圖層樹
  •  生成圖層的繪制列表，記錄繪制順序和繪制指令
  •  有合成線程進行柵格化操作，將圖層劃分為圖塊，渲染進程把生成的圖塊發(fā)送給GPU，在GPU中執(zhí)行生成圖塊的位圖
  •  所有圖塊被柵格化之后，合成線程會發(fā)送繪制圖塊的命令給瀏覽器進程，在瀏覽器進程中進行圖塊合成并最紅顯示到屏幕上 

當(dāng)前標題：程序員：HTML、CSS、JavaScript是如何變成頁面的？
文章來源：http://www.5511xx.com/article/dphcocs.html