2018.05.18
第一部分：導入
相關概念
- DOMContentLoaded事件：當 HTML 文檔加載完成並解析完成之後，會觸發 DOMContentLoaded事件；不需要等待樣式表、圖片和子框架的完成加載。即 DOMContentLoaded事件只與 DOM的解析完成有關。
- load 事件： 當整個頁面加載完成之後，會觸發 load 事件。
注意事項
- 瀏覽器爲了更快的用戶體驗，渲染引擎會盡快在屏幕上展示內容，所以瀏覽器會展示部分解析完成的文檔。（邊解析邊展示）
第二部分：
瀏覽器渲染流程
- 瀏覽器發送請求，獲取HTML文檔
- 開始自上而下解析 HTML 文檔，並構建 DOM 樹
- 遇到內聯
圖形表示
常見問題解答
- HTML 的加載和解析是同時進行的嗎？
先加載，然後解析，兩者不是同時的。如果兩者是同時進行的話，那是不是隻要 HTML 加載完成，就代表HTML解析完成呢？肯定不是呀。所以，兩者不同時。
- 爲啥 js 會阻塞 HTML 解析和渲染？
因爲 js 會操作 DOM，所以要等 js 執行完成之後，纔開始解析 HTML。 - CSS 不會直接影響 HTML 的解析。爲啥會 影響 JS 解析的同時，間接影響到 HTML 解析？如何解釋？
因爲 JS 腳本需要查詢 CSS 信息，所以 JS腳本必須等到 CSSOM樹構建完成之後才能執行。腳步執行完畢，HTML解析纔會繼續執行。所以這樣就間接的影響了 HTML的解析。 - defer 和 async的區別？
共同點：都是立即下載 JS腳本。適用於外部腳本。
區別：（1）defer 是立即下載，但是要等到 DOM 解析完成之後(也就是 DOMContentLoaded事件執行前執行 JS腳本)；（2）async是立即下載腳本，只要等到 CSSOM構建完成就會異步執行 JS腳本，不會等到 DOM 構建完成之後。JS腳本的執行和 HTML解析是
附加一張網絡常見圖片
鏈接：
如果有錯誤，還望指正哦！