前端面試-瀏覽器渲染機制

在開發WEB應用整一個流程中,用戶體驗通常都會被提及,而網站的性能,又是與用戶體驗直接掛鉤,因此可以在項目需求規格文檔中經常看到項目對性能的需求。

WEB性能優化常見的入手點包括以下幾點:

1、  HTTP請求

2、  服務器響應速度

3、  瀏覽器響應速度

其中瀏覽器響應速度包括渲染速度和代碼執行的速度。

而本篇文章的目標主要集中在第三點,先整體瞭解一下瀏覽器的渲染機制,再通過這個機制有效地改善瀏覽器的渲染速度。

 

一、所使用的工具

C++之父曾在The Design AndEvolution Of C++一書中說到,在某一方面中沒有合適工具之前是不會去攻克那一方面的難題的。

這裏我們所使用的觀察工具是谷歌的瀏覽器chrome所帶的開發者工具與FF的開發者工具。

 

二.瀏覽器渲染的整個流程

瀏覽器的整個流程如上圖所示。

1、  首先當用戶輸入一個URL的時候,瀏覽器就會發送一個請求,請求URL對應的資源。

2、  然後瀏覽器的HTML解析器會將這個文件解析,並且構建成一棵DOM樹。

3、  在構建DOM樹的時候,遇到JS和CSS元素,HTML解析器就換將控制權轉讓給JS解析器或者是CSS解析器。

4、  JS解析器或者是CSS解析器解析完這個元素時候,HTML又繼續解析下個元素,直到整棵DOM樹構建完成。

5、  DOM樹構建完之後,瀏覽器把DOM樹中的一些不可視元素去掉,然後與CSSOM合成一棵render樹。

6、  接着瀏覽器根據這棵render樹,計算出各個節點(元素)在屏幕的位置。這個過程叫做layout,輸出的是一棵layout樹。

7、  最後瀏覽器根據這棵layout樹,將頁面渲染到屏幕上去。

 

三、DOM樹的構建過程

DOM構建的過程如上圖所示。

1、  當服務器返回一個HTML文件給瀏覽器的時候,瀏覽器接受到的是一些字節數據。

2、  然後瀏覽器根據HTTP響應中的編碼方式(通過是UTF8),解析字節數據,得到一些字符。如果這個時候編碼方式跟文件的字節編碼不一致,便會出現亂碼。所以我們通過使用<meta http-equiv="content-type"content="text/html;charset=utf-8">來告訴瀏覽器我們頁面使用的是什麼編碼。

3、  這個時候,瀏覽器再根據DTD中的對元素(標籤)的定義,對這些接受到的字符進行語義化(token)。我們經常在html文件的第一行,定義<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">,這個DTD就是告訴瀏覽器,那些字符是有意義的,那些字符是無意義的。DTD常見的有嚴格、過渡、框架和HTML5三種。不同的DTD中,有不同的元素定義。比如過渡的DTD中就比嚴格的DTD中多出了<center>、<font>等等一些元素的定義,也就是說使用嚴格的DTD,即使你在你的HTML文件中使用了<center>,瀏覽器也會忽略掉的。所以也就有了一些人使用不同的DTD或者不使用DTD的時候,佈局會明顯不同的原因了。

4、  接着,瀏覽器再使用這些語義塊(token)創建對象,形成一個個節點了。

5、  然後HTML解析器就會從HTML文件的頭部到尾部,一個個地遍歷這些節點。當這些節點是普通節點的話,HTML解析器就會將這些節點加入到DOM樹中。當這些節點是JS代碼的話,HTML解析器就會將控制權交給JS解析器。如果這些節點是CSS代碼的話,HTML解析器就會將控制權交給CSS解析器。不過,當外聯的JS代碼和CSS代碼還沒從服務器傳到瀏覽器的時候,這個時候如果DOM樹上有可視元素的話,瀏覽器通常會選擇在這個時候,將一些內容提前渲染到屏幕上來。

6、  當HTML解析器讀到最後一個節點的時候,整個DOM樹也構建完成了,這個時候就會觸發domContentloaded事件。而很多JS庫(像JQ)通常會在這個時候有所反應的。

至此,DOM樹就全部構建完成了。

碼了這麼多字,今天就更新到這裏,等改天有時間,再把剩下的給碼上來!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章