浏覽器渲染原理及css書寫順序

文章目錄

• • • • 浏覽器核心
      • 浏覽器主要元件結構：
      • 浏覽器功能
      • 浏覽器的渲染流程
      • css書寫順序
      • 注意

浏覽器核心

(1)Trident核心，由于被微軟采用，并得益于微軟作業系統的普及，以前幾乎一統天下，是以又稱為“IE核心”，主要浏覽器有IE系列浏覽器；

(2)Gecko核心，因為被Mozilla FireFox浏覽器采用并得到開發者的進一步豐富，又被稱為“Firefox核心”；

(3)WebKit核心，是Safari浏覽器使用的核心，由Apple研發。 Google Chrome、Opera及各種國産浏覽器高速模式也使用Webkit作為核心。

(4)Blink核心，由Google和Opera Software共同開發的浏覽器核心，現在Chrome（28及往後版本）、Opera（15及往後版本）都将Webkit核心換成了Blink核心。

浏覽器主要元件結構：

浏覽器功能

1、輸入網址。

2、浏覽器查找域名的IP位址。

3. 浏覽器給web伺服器發送一個HTTP請求

4. 網站服務的永久重定向響應

5. 浏覽器跟蹤重定向位址 現在，浏覽器知道了要通路的正确位址，是以它會發送另一個擷取請求。

6. 伺服器“處理”請求，伺服器接收到擷取請求，然後處理并傳回一個響應。

7. 伺服器發回一個HTML響應

8. 浏覽器開始顯示HTML

9. 浏覽器發送請求，以擷取嵌入在HTML中的對象。在浏覽器顯示HTML時，它會注意到需要擷取其他位址内容的标簽。這時，浏覽器會發送一個擷取請求來重新獲得這些檔案。這些檔案就包括CSS/JS/圖檔等資源，這些資源的位址都要經曆一個和HTML讀取類似的過程。是以浏覽器會在DNS中查找這些域名，發送請求，重定向等等…

浏覽器的渲染流程

①解析html建構dom樹，解析css建構css樹：将html解析成樹形的資料結構，将css解析成樹形的資料結構

②建構render樹：DOM樹和CSS樹合并之後形成的render樹。

③布局render樹：有了render樹，浏覽器已經知道那些網頁中有哪些節點，各個節點的css定義和以及它們的從屬關系，進而計算出每個節點在螢幕中的位置。

④繪制render樹：按照計算出來的規則，通過顯示卡把内容畫在螢幕上。

css書寫順序

目的： 減少浏覽器reflow（回流），提升浏覽器渲染dom的性能

1>.Reflow（回流）：浏覽器要花時間去渲染，當它發現了某個部分發生了變化影響了布局，那就需要倒回去重新渲染。

2>.Repaint（重繪）：如果隻是改變了某個元素的背景顔色，文字顔色等，不影響元素周圍或内部布局的屬性，将隻會引起浏覽器的repaint，重畫某一部分。

Reflow要比Repaint更花費時間，也就更影響性能。

（1）定位屬性：position display float left top right bottom overflow clear z-index

（2）自身屬性：width height padding border margin background

（3）文字樣式：font-family font-size font-style font-weight font-varient color

（4）文本屬性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

（5）css3中新增屬性：content box-shadow border-radius transform……

注意

（1）dom深度盡量淺。

（2）減少inline javascript、css的數量。

（3）使用現代合法的css屬性。

（4）不要為id選擇器指定類名或是标簽，因為id可以唯一确定一個元素。

（5）避免後代選擇符，盡量使用子選擇符。原因：子元素比對符的機率要大于後代元素比對符。

（6）避免使用通配符

（7）display:none 的節點不會被加入Render Tree，而visibility: hidden 則會，是以，如果某個節點最開始是不顯示的，設為display:none是更優的。

（8）display:none 會觸發 reflow，而 visibility:hidden 隻會觸發 repaint，因為沒有發現位置變化。

（9）有些情況下，比如修改了元素的樣式，浏覽器并不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然後做一次 reflow，這又叫異步 reflow 或增量異步 reflow。但是在有些情況下，比如resize 視窗，改變了頁面預設的字型等。對于這些操作，浏覽器會馬上進行 reflow。

參考：

網頁在浏覽器上的渲染過程