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

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

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

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

一、瀏覽器解析

1、瀏覽器通過請求的 URL 進行域名解析，向服務器發(fā)起請求，接收文件（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 對應，比如像 head 標簽內(nèi)容或帶有 display: none; 的元素節(jié)點并不包括在 Rendering Tree 中 。

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

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

渲染原理示意圖：

瀏覽器頁面渲染與css位置問題

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

內(nèi)部樣式表

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

head

style type="text/CSS"

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

/style

/head

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

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

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

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

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

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

外部樣式表（外鏈式）

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

head

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

/head

該語法中，link標簽需要放在head頭部標簽中，并且必須指定link標簽的三個屬性，具體如下：

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

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

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

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

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

1、IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。

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

3、如果遇到語義解釋性的標簽嵌入文件（JS腳本，CSS樣式），那么此時IE的下載過程會啟用單獨連接進行下載。

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

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

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

2. JS的加載

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

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

3.如何加快HTML頁面加載速度

1，頁面減肥

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

刪除不必要的空格、注釋

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

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

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

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

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

3，減少域名查詢

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

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

使用緩存

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

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

然后加載DHTML相關的東西

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

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

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

(比如我們在一個HTML對象生成過程中，使用了inline方式定義的函數(shù)，那么這個元素生成幾次，那個函數(shù)也就要同時生成幾次。)

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

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

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

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

8，Chunk your content

不要使用嵌套tables

..

..

而使用非嵌套tables或者divs

………………

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

9，指定圖像和tables的大小

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

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

image使用height和width

table使用table-layout: fixed并使用col和colgroup標簽指定columns的width

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

IE、Firefox、Safari等等等等

11，頁面結(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頁面加載和解析流程

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

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

3.瀏覽器又發(fā)出CSS文件的請求，服務器返回這個CSS文件；

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

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

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

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

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

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

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

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

網(wǎng)頁標題：渲染時css樣式文件,css樣式文件引入的方式有哪幾種
鏈接地址：http://aaarwkj.com/article46/dssipeg.html

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

廣告

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