渲染過程

1. 解析HTML生成DOM樹
2. 構建CSSOM樹-無論是內聯式，外聯式，嵌入式引入的CSS樣式都會被解析成CSSOM樹，
3. 根據DOM樹與CSSOM樹生成另外一顆用於渲染的樹-渲染樹（Render tree）
4. Render樹 佈局-確定渲染樹節點在螢幕上的顯示位置
5. Render樹 繪製-遍歷渲染樹並用UI後端層將每一個節點繪製出來

• HTML 的解析與 CSS的解析可以同步進行,
• HTML 的解析與 CSS的解析可能被js引擎執行緒所阻塞

解析html時 js css執行過程

• js指令碼

  • js可能改變DOM樹，
  • js會阻塞文件的解析，直到指令碼執行完。開發者可以將指令碼標識為defer，以使其不阻塞文件解析。html5增加了標記指令碼為非同步的選項，以使指令碼的解析執行使用另一個執行緒

• css樣式表

  • 樣式表不改變DOM樹，因此不需要阻塞文件
  • css樣式表可能阻塞js
  • js指令碼可能在文件的解析過程中請求樣式資訊，如果css樣式還沒有載入和解析，指令碼將得到錯誤的值。
    • Firefox在存在樣式表還在載入和解析時阻塞所有的指令碼
    • Chrome只當指令碼試圖訪問某些可能被未載入的樣式表所影響的特定樣式屬性時才阻塞這些指令碼。

• css載入或解析會堵塞dom的渲染但不堵塞dom的解析

• js載入或執行會堵塞dom的解析和渲染（由於JavaScript有可能會更改DOM Tree和Render Tree，因此同時被阻塞）

• css載入或解析會阻塞後面js語句的執行

https://www.cnblogs.com/huanxiongs02/p/15515458.html
https://blog.csdn.net/c11073138/article/details/79856797