在chrome開發者工具performence欄中可以看到parsing階段：
html parsing（html解析）的任務是根據html原始檔生成parse tree可以參照《編譯原理》理解。對應到詞法分析、語法分析。
webkit使用了兩種非常有名的解析器生成器：用於建立詞法分析器的flex,以及用於建立解析器的bison（可用於css解析）。flex 的輸入是包含標記的正規表示式定義的檔案。bison 的輸入是採用 bnf 格式的語言語法規則。html的規則比較鬆散，不屬於上下文無關文法，所以傳統的自頂向下和自底向上語法分析都不適用。
dtd（document type definition，文件型別定義），源於sgml，定義了合法的元素、屬性和層次結構，可以把合法元素和屬性理解為詞法層面的，層次結構則限定了語法規則。html 4.01 中的 doctype 需要對 dtd 進行引用，因為 html 4.01 基於 sgml。而 html5 不基於 sgml，因此不需要對 dtd 進行引用，但是需要 doctype 來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）。這方面還可以參照xml,xhtml進行對比。
有關html4的文件型別定義規範：
採用狀態機機制：
這個步驟和一般的程式語言詞法分析過程是相同的。
在詞法分析的同時，會進行解析樹的構造，詞法分析器分析得到乙個節點都會交給構造器處理。解析樹的構造同樣採用狀態機的機制，不斷的接收新的token流，建立對應的標籤元素，加入到解析樹，改變狀態。
整個過程：
css的文法屬於上下文無關文法，可以使用自頂向下或自底向上的語法分析器。webkit使用flex和bison解析生成器從css語法檔案中自動生成解析器。chrome 開發者工具performence相應的事件：
最終得到這樣乙個語法分析樹：
整個流程：
從 dom 樹的根節點開始遍歷每個可見節點。
對於每個可見節點，為其找到適配的 cssom 規則並應用它們。
發射可見節點，連同其內容和計算的樣式。
當渲染物件被建立並新增到樹中，它們並沒有位置和大小，計算這些值的過程稱為layout或reflow。所以在元素的大小和位置發生變化時都會觸發layout。
瀏覽器針對layout做了一定優化，如採用dirty bit系統，只針對具有dirty標記的元素進行重新layout，即增量layout，且此過程是非同步的；如果元素只是位置發生變化，其大小從快取裡讀取，就不用再次計算。
繪製階段，遍歷渲染樹並呼叫渲染物件的paint方法將它們的內容顯示在螢幕上，繪製使用ui基礎元件。當元素的位置和大小沒有變化，如改變背景顏色等等，只會進行重新paint。paint也採用dirty機制進行增量paint。
瀏覽器渲染過程及網頁效能優化
一，瀏覽器渲染過程 瀏覽器的主要功能是將使用者需要的web資源展現出來，瀏覽器向服務端傳送請求獲取所需要的資料，並將其展示在瀏覽器視窗中。使用者輸入 瀏覽器向伺服器請求對應的資料，伺服器返回對應的html檔案 瀏覽器開始解析html檔案，發現中的link標籤引用了外部css檔案 瀏覽器繼續向伺服器請...
HTML渲染過程
這裡的過程從伺服器返回html文件開始，瀏覽器請求伺服器的過程不多做介紹。解析html和構建dom是同時執行的，當瀏覽器收到html文件時，瀏覽器通過html直譯器解析html和構建dom樹。瀏覽器採用的是自上而下解析。所以在構建dom樹時兩個標籤會阻塞解析，就是會涉及到外部資源的link和scri...
vue渲染過程
把模板編譯為render函式 例項進行掛載,根據根節點render函式的呼叫，遞迴的生成虛擬dom 對比虛擬dom，渲染到真實dom 元件內部data發生變化，元件和子元件引用data作為props重新呼叫render函式，生成虛擬dom,返回到步驟3 第一步 模板變成render函式 hello ...