什么是DOCTYPE及作用
DTD（document type definition，檔案型別定義）是一系列的語法規則，用來定義XML 或者(X)HTML的檔案型別，瀏覽器會使用它來判斷檔案型別，決定使用何種協議來決議，以及切換瀏覽器模式
DOCTYPE是用來宣告檔案型別和DTD規范的，一個主要的用途是檔案的合法性驗證，如果檔案的代碼不合法，那么瀏覽器決議是便會出一些差錯
大白話解釋：DOCTYPE 告訴瀏覽器什么檔案型別，瀏覽器根據這個進行使用何種引擎進行決議
常見的DOCTYPE:
HTML5 <!DOCTYPE html>
HTML4.01 Stract（嚴格模式）該DTD 包含所有 HTML 元素和屬性，但不包括展示性和棄用的元素（比如 font）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EM" "http:www.w4.org/TR//html4/strict.dtd">
HTML4.01 Transitional（寬松模式）該DTD包含所有HTML元素和屬性，包括展示性和棄用的元素（比如 font）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w4.org/TR/html4/loose.dtd">
瀏覽器渲染程序：
- 瀏覽器把獲取到的HTML 經過HTML Parse（HTML 決議器）決議成DOM樹
- 處理CSS標記，CSS按CSS規則和CSS Parse（CSS 決議器）轉成 CSSOM Tree（也可以說是：處理CSS 標記，構成層疊樣式模型CSSOM(CSS Object Model)）
- 把生成的DOM Tree 和 CSSOM Tree 整合為Render Tree（渲染樹）（換種說法是：將生成的DOM 和 CSSOM 合并為渲染樹（Render Tree））將會被創建，代表一系列將被渲染的物件
- Render Tree 類似告訴瀏覽器說我這個地方要渲染一棵樹的結構基本就出來了，在Painting之前和Render Tree 有個平行的地方Layout,Render Tree 不包含HTML的具體內容，也不知道位置是什么，在Layout 之前 Render Tree 也不知道具體位置，通過Layout 可以精準計算出這些DOM 的真正位置，具體的寬、高、顏色都在Render Tree 呈現出來（換種說法是：渲染樹的每個元素包含的內容都是計算過的，它被稱之為Layout.瀏覽器用一種流式處理的方法，只需要一次pass繪制操作就可以布局所有的元素）
- 將渲染樹的各個節點繪制到螢屏上，這一步被稱之為Painting,最后display就是我們看到的效果
整個程序如下圖片表示：
重排 Reflow
定義：DOM 結構中的各個元素都有自己的盒子（模型），這些都需要瀏覽器根據各種樣式來計算并根據計算結果將元素放到它該出現的位置，這個程序稱之為 reflow
觸發 Reflow 的條件：
- 當增加，洗掉，修改DOM 節點時，會導致Reflow 或 Repaint
- 當移動 DOM 的位置，或是搞個影片的時候
- 當修改 CSS 樣式的時候
- 當 Resize 視窗的時候（移動端沒有這個問題），或是滾動的時候
- 當修改網頁默認字體時
重繪 Repaint
定義：當各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來后，瀏覽器于是便把這些元素都按照各自的特性繪制了一遍，于是頁面的內容出現了，這個程序稱之為 Repaint（大白話：頁面要呈現的內容通通畫在螢屏上就叫 Repaint）
觸發 Repaint 的條件：
- DOM 改動
- CSS 改動
如何避免最小程度的repaint 頻率
創建一個 document fragment，就算有N 個節點不要一個一個向瀏覽器添加，創建一個 documentfragment(document片段)把這些東西都塞到這個片段中，最后向瀏覽器一次添加這個片段
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/3052.html
標籤：HTML5