如何了解 HTML 和 CSS 的渲染原理

了解 HTML 和 CSS 的渲染原理從以下幾方面入手：

成都創(chuàng)新互聯(lián)公司基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺(tái)為眾多戶提供德陽(yáng)服務(wù)器托管 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。

html各種渲染都是從瀏覽器開始的，分為瀏覽器解析和瀏覽器渲染兩大步驟

一、瀏覽器解析

1、瀏覽器通過請(qǐng)求的 URL 進(jìn)行域名解析，向服務(wù)器發(fā)起請(qǐng)求，接收文件（HTML、CSS、JS、Images等等）。

2、HTML 文件加載后，開始構(gòu)建 DOM Tree

3、CSS 樣式文件加載后，開始解析和構(gòu)建 CSS Rule Tree

4、Javascript 腳本文件加載后， 通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree

二、瀏覽器渲染

1、瀏覽器引擎通過 DOM Tree 和 CSS Rule Tree 構(gòu)建 Rendering Tree

2、Rendering Tree 并不與 DOM Tree 對(duì)應(yīng)，比如像 head 標(biāo)簽內(nèi)容或帶有 display: none; 的元素節(jié)點(diǎn)并不包括在 Rendering Tree 中 。

3、通過 CSS Rule Tree 匹配 DOM Tree 進(jìn)行定位坐標(biāo)和大小，是否換行，以及 position、overflow、z-index 等等屬性，這個(gè)過程稱為 Flow 或 Layout 。

4、最終通過調(diào)用Native GUI 的 API 繪制網(wǎng)頁(yè)畫面的過程稱為 Paint 。

渲染原理示意圖：

瀏覽器頁(yè)面渲染與css位置問題

CSS通常有三種方式，內(nèi)部樣式表，行內(nèi)式，外部樣式表。

內(nèi)部樣式表

內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義，其基本語(yǔ)法格式如下：

head

style type="text/CSS"

選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}

/style

/head

語(yǔ)法中，style標(biāo)簽一般位于head標(biāo)簽中title標(biāo)簽之后，也可以把他放在HTML文檔的任何地方。

type="text/CSS" 在html5中可以省略， 寫上也比較符合規(guī)范， 所以這個(gè)地方可以寫也可以省略。

行內(nèi)式（內(nèi)聯(lián)樣式）

內(nèi)聯(lián)樣式，又有人稱行內(nèi)樣式、行間樣式、內(nèi)嵌樣式。是通過標(biāo)簽的style屬性來設(shè)置元素的樣式，其基本語(yǔ)法格式如下：

標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;" 內(nèi)容 /標(biāo)簽名

語(yǔ)法中style是標(biāo)簽的屬性，實(shí)際上任何HTML標(biāo)簽都擁有style屬性，用來設(shè)置行內(nèi)式。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同，行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。

外部樣式表（外鏈?zhǔn)剑?/p>

鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語(yǔ)法格式如下：

head

link href="CSS文件的路徑" rel="stylesheet" /

/head

該語(yǔ)法中，link標(biāo)簽需要放在head頭部標(biāo)簽中，并且必須指定link標(biāo)簽的三個(gè)屬性，具體如下：

href：定義所鏈接外部樣式表文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。

type：定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。

rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。

誰(shuí)知道 HTML和css的全部渲染過程，從解析html 開始到渲染結(jié)束

1.瀏覽器加載和渲染html的順序

1、IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時(shí)進(jìn)行的。

2、在渲染到頁(yè)面的某一部分時(shí)，其上面的所有部分都已經(jīng)下載完成（并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完）

3、如果遇到語(yǔ)義解釋性的標(biāo)簽嵌入文件（JS腳本，CSS樣式），那么此時(shí)IE的下載過程會(huì)啟用單獨(dú)連接進(jìn)行下載。

4、并且在下載后進(jìn)行解析，解析過程中，停止頁(yè)面所有往下元素的下載。阻塞加載

5、樣式表在下載完成后，將和以前下載的所有樣式表一起進(jìn)行解析，解析完成后，將對(duì)此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行渲染。

6、JS、CSS中如有重定義，后定義函數(shù)將覆蓋前定義函數(shù)

2. JS的加載

2.1 不能并行下載和解析（阻塞下載）

2.2 當(dāng)引用了JS的時(shí)候，瀏覽器發(fā)送1個(gè)js request就會(huì)一直等待該request的返回。因?yàn)闉g覽器需要1個(gè)穩(wěn)定的DOM樹結(jié)構(gòu)，而JS中很有可能有代碼直接改變了DOM樹結(jié)構(gòu)，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進(jìn)行跳轉(zhuǎn)，瀏覽器為了防止出現(xiàn)JS修改DOM樹，需要重新構(gòu)建DOM樹的情況，所以 就會(huì)阻塞其他的下載和呈現(xiàn)。

3.如何加快HTML頁(yè)面加載速度

1，頁(yè)面減肥

頁(yè)面的肥瘦是影響加載速度最重要的因素

刪除不必要的空格、注釋

將inline的script和css移到外部文件

可以使用HTML Tidy來給HTML減肥，還可以使用一些壓縮工具來給JavaScript減肥

2，減少文件數(shù)量

減少頁(yè)面上引用的文件數(shù)量可以減少HTTP連接數(shù)

許多JavaScript、CSS文件可以合并最好合并

3，減少域名查詢

DNS查詢和解析域名也是消耗時(shí)間的，所以要減少對(duì)外部JavaScript、CSS、圖片等資源的引用，不同域名的使用越少越好

4，緩存重用數(shù)據(jù)

使用緩存

5，優(yōu)化頁(yè)面素加載順序

首先加載頁(yè)面最初顯示的內(nèi)容和與之相關(guān)的JavaScript和CSS

然后加載DHTML相關(guān)的東西

像什么不是最初顯示相關(guān)的圖片、flash、視頻等很肥的資源就最后加載

6，減少inline JavaScript的數(shù)量

瀏覽器parser會(huì)假設(shè)inline JavaScript會(huì)改變頁(yè)面結(jié)構(gòu)，所以使用inline JavaScript開銷較大

(比如我們?cè)谝粋€(gè)HTML對(duì)象生成過程中，使用了inline方式定義的函數(shù)，那么這個(gè)元素生成幾次，那個(gè)函數(shù)也就要同時(shí)生成幾次。)

不要使用document.write()這種輸出內(nèi)容的方法，使用現(xiàn)代W3C DOM方法來為現(xiàn)代瀏覽器處理頁(yè)面內(nèi)容

7，使用現(xiàn)代CSS和合法的標(biāo)簽

使用現(xiàn)代CSS來減少標(biāo)簽和圖像，例如使用現(xiàn)代CSS+文字完全可以替代一些只有文字的圖片

使用合法的標(biāo)簽避免瀏覽器解析HTML時(shí)做“error correction”等操作，還可以被HTML Tidy來給HTML減肥

8，Chunk your content

不要使用嵌套tables

..

..

而使用非嵌套tables或者divs

………………

將基于大塊嵌套的tables的layout分解成小tables，這樣顯示時(shí)不用加載整個(gè)頁(yè)面(或大table)的內(nèi)容

9，指定圖像和tables的大小

如果瀏覽器可以立即決定圖像或tables的大小，那么它就可以馬上顯示頁(yè)面而不要重新做一些布局安排的工作

這不僅加快了頁(yè)面的顯示，也預(yù)防了頁(yè)面完成加載后布局的一些不當(dāng)?shù)母淖?/p>

image使用height和width

table使用table-layout: fixed并使用col和colgroup標(biāo)簽指定columns的width

10，根據(jù)用戶瀏覽器明智的選擇策略

IE、Firefox、Safari等等等等

11，頁(yè)面結(jié)構(gòu)的例子

· HTML

· HEAD

· LINK …

CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.

· SCRIPT. …

JavaScript. files for functions required during the loading of the page, but not any DHTML that can only run after page loads.

Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.

· BODY

· User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.

· SCRIPT. …

Any scripts which will be used to perform. DHTML. DHTML script. typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.

Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.

If any images are used for rollover effects, you should preload them here after the page content has downloaded.

4.HTML頁(yè)面加載和解析流程

1.用戶輸入網(wǎng)址（假設(shè)是個(gè)html頁(yè)面，并且是第一次訪問），瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回html文件；

2.瀏覽器開始載入html代碼，發(fā)現(xiàn)＜head＞標(biāo)簽內(nèi)有一個(gè)＜link＞標(biāo)簽引用外部CSS文件；

3.瀏覽器又發(fā)出CSS文件的請(qǐng)求，服務(wù)器返回這個(gè)CSS文件；

4.瀏覽器繼續(xù)載入html中＜body＞部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開始渲染頁(yè)面了；

5.瀏覽器在代碼中發(fā)現(xiàn)一個(gè)＜img＞標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請(qǐng)求。此時(shí)瀏覽器不會(huì)等到圖片下載完，而是繼續(xù)渲染后面的代碼；

6.服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；

7.瀏覽器發(fā)現(xiàn)了一個(gè)包含一行Javascript代碼的＜script＞標(biāo)簽，趕快運(yùn)行它；

8.Javascript腳本執(zhí)行了這條語(yǔ)句，它命令瀏覽器隱藏掉代碼中的某個(gè)＜div＞ （style.display=”none”）。突然少了這么一個(gè)元素，瀏覽器不得不重新渲染這部分代碼；

9.終于等到了＜/html＞的到來，瀏覽器淚流滿面……

10.等等，還沒完，用戶點(diǎn)了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標(biāo)簽的CSS路徑；

11.瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，“大伙兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務(wù)器請(qǐng)求了新的CSS文件，重新渲染頁(yè)面。

網(wǎng)頁(yè)標(biāo)題：渲染時(shí)css樣式文件,css樣式文件引入的方式有哪幾種
鏈接地址：http://m.newbst.com/article46/dssipeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)、App設(shè)計(jì)、App開發(fā)

廣告

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