文章目錄

• • • • 瀏覽器內核
      • 瀏覽器主要組件結構：
      • 瀏覽器功能
      • 瀏覽器的渲染流程
      • 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。

參考：
網頁在瀏覽器上的渲染過程

總結

以上是生活随笔為你收集整理的浏览器渲染原理及css书写顺序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。