HTML、CSS、JavaScript是怎么變成頁(yè)面的

這篇文章主要講解了“HTML、CSS、JavaScript是怎么變成頁(yè)面的”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“HTML、CSS、JavaScript是怎么變成頁(yè)面的”吧！

創(chuàng)新互聯(lián)建站是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專(zhuān)注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開(kāi)發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開(kāi)發(fā)，軟件開(kāi)發(fā)，微信平臺(tái)小程序開(kāi)發(fā)，10多年建站對(duì)被動(dòng)防護(hù)網(wǎng)等多個(gè)方面，擁有多年的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)。

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

以下面這段html舉例講解這幾個(gè)過(guò)程：

//aa.html  <!DOCTYPE html>  <html lang="en">  <head>  <meta charset="UTF-8">  <title>Title</title>  <link rel="stylesheet" href="./aa.css">  </head>  <body>  <p id="p-one" style="color:red">hello</p>  <p id="p-two">hi</p>  <button id="p-three">ok</button>  </body>  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>  <script src="./aa.js"></script>  </html>

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

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

構(gòu)建DOM樹(shù)

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

HTML、CSS、JavaScript是怎么變成頁(yè)面的

樣式計(jì)算

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

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

HTML、CSS、JavaScript是怎么變成頁(yè)面的

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

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

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

HTML、CSS、JavaScript是怎么變成頁(yè)面的

布局階段

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

創(chuàng)建布局樹(shù)

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

布局計(jì)算

計(jì)算每個(gè)元素的幾何坐標(biāo)位置，并將這些信息保存在布局樹(shù)中。

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

分層

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

擁有層疊上下文屬性的元素會(huì)被提升為單獨(dú)的一層

HTML、CSS、JavaScript是怎么變成頁(yè)面的

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

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

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

圖層繪制

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

在原aa.html文件中添加代碼<div style="width:300px;height:300px;background: green;">pp</div>下圖中，紅色區(qū)域就是繪制列表，粉色區(qū)域顯示的是繪制過(guò)程，可點(diǎn)擊任何一個(gè)繪制過(guò)程查看。

HTML、CSS、JavaScript是怎么變成頁(yè)面的

分塊和柵格化操作

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

合成和顯示

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

至此，HTML+CSS+JavaScript就能生成我們所看見(jiàn)的頁(yè)面了。

感謝各位的閱讀，以上就是“HTML、CSS、JavaScript是怎么變成頁(yè)面的”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)HTML、CSS、JavaScript是怎么變成頁(yè)面的這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

分享標(biāo)題：HTML、CSS、JavaScript是怎么變成頁(yè)面的
標(biāo)題網(wǎng)址：http://muchs.cn/article16/iioegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、建站公司、Google、全網(wǎng)營(yíng)銷(xiāo)推廣、域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

HTML、CSS、JavaScript是怎么變成頁(yè)面的

HTML、CSS、JavaScript是怎么變成頁(yè)面的