DTD瀏覽器渲染機制

Document type definition 文檔類型定義

DOCTYPE 就是用來聲明文檔類型和DTD規範的，告訴瀏覽器按照什麼規範解析

幾個文檔規範

• html5中使用
• html4中嚴格模式，不能使用一些廢棄標籤
• html4寬鬆模式，可使用一些廢棄標籤

渲染過程

1.渲染過程：

html生成Dom Tree,css生成rule Tree,而後二者結合生成render Tree.

而後通過layout的計算肯定元素大小以及在頁面中的位置，以後就開始在頁面上渲染，呈現頁面。

2.重排/迴流 reflow

頁面每一個元素都有本身的大小和位置,當改變大小和位置時，瀏覽器都須要通過從新計算，再次把元素放到對應的位置。重排必定會觸發重畫。

2.1 什麼時候會觸發迴流

• dom元素的增刪改
• css中的width,height,position,float,line-height...
• 動畫

2.2 如何減小回流

• 減小沒必要要的dom層級
• 避免沒必要要的複雜的選擇器，會耗費更多的cpu
• 改多個樣式，儘可能使用class，一次性改變

3.重畫 repaint

更新一些樣式好比顏色，並不影響頁面佈局，就叫作重畫，重畫不必定觸發迴流。

3.1 什麼時候會觸發重畫

• color,background-color,outline....

4.優化性能

一個線程-js解析，一個線程-ui渲染

但js又是單線程的因此，你執行js解析就不會進行ui渲染，你ui渲染就不會執行js解析，因此這兩個就會相互影響。

css性能會讓js變慢，若是頻繁觸發迴流和重繪會影響js性能。

漸進加強和優雅降級

漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。 優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽。