渲染機制類

時間 2020-09-14

標籤渲染機制简体版

原文原文鏈接

什麼是DOCTYPE及做用html

DTD（document type definition，文檔類型定義）是一系列的語法規則，用來定義XML 或者(X)HTML的文件類型。瀏覽器會使用它來判斷文檔類型，決定使用何種協議來解析，以及切換瀏覽器模式瀏覽器

DOCTYPE是用來聲明文檔類型和DTD規範的，一個主要的用途是文件的合法性驗證。若是文件的代碼不合法，那麼瀏覽器解析時便會出一些差錯佈局

大白話解釋：DOCTYPE 告訴瀏覽器什麼文檔類型，瀏覽器根據這個進行使用何種引擎進行解析字體

常見的DOCTYPE:動畫

HTML5 <!DOCTYPE html>htm

HTML4.01 Stract（嚴格模式）該DTD 包含全部 HTML 元素和屬性，但不包括展現性和棄用的元素（好比 font）對象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:www.w4.org/TR//html4/strict.dtd">blog

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就是咱們看到的效果

整個過程以下圖片表示：