1. dom 解析跟 css 解析，互不影響
2. dom 渲染，頁面 dom 解析完形成 dom 樹，css 解析完形成 cssom 樹，然后 dom、cssom 合成 render 樹，
這個過程是 dom 渲染
3. js 會操作 dom 跟 css，故 js 會影響解析和渲染過程，如下三種情況：
- <script> ，dom 樹解析遇到script 標簽，立即停止解析，下載並運行 js 腳本，待 js 執行完畢，繼續 dom 解析
- <script defer>，這種是延遲執行腳本，dom 樹解析時遇到此標簽，立即下載該 js 腳本，並保持 dom 解析同步進行。
dom 解析完畢后，按照 js 腳本順序，依次執行 js 腳本。然后觸發 document 的 DOMContentLoaded 事件。
- <script async>，異步執行腳本，dom 渲染跟 js 互不干擾，DOMContentLoaded 事件 跟 js 腳本無關。多個 js 腳本執行順序不定。
4. 頁面事件的生命周期：
DOMContentLoaded事件在DOM樹構建完畢后被觸發，我們可以在這個階段使用js去訪問元素。
圖片及其他資源文件可能還在下載中。該事件由 document 觸發
load事件在頁面所有資源被加載完畢后觸發，通常我們不會用到這個事件，因為我們不需要等那么久。該事件由 window觸發
beforeunload在用戶即將離開頁面時觸發，它返回一個字符串，瀏覽器會向用戶展示並詢問這個字符串以確定是否離開。
unload在用戶已經離開時觸發，我們在這個階段僅可以做一些沒有延遲的操作，由於種種限制，很少被使用。
document.readyState表征頁面的加載狀態，可以在readystatechange中追蹤頁面的變化狀態：
loading — 頁面正在加載中。
interactive -- 頁面解析完畢，時間上和 DOMContentLoaded同時發生，不過順序在它之前。
complete -- 頁面上的資源都已加載完畢，時間上和window.onload同時發生，不過順序在他之前。