瀏覽器渲染Html檔案過程

1. 從伺服器拿到html檔案**後，瀏覽器在記憶體條開闢出一塊棧記憶體，用來給**執行提供環境，同時分配乙個主線程去一行行的解釋和執行**

2. **一行行進棧執行，執行完出棧，當遇到link/script/img/video後瀏覽器會開闢全新的執行緒去載入資源檔案，然後主線程繼續一行行解析html

3. 當第一次自上往下走完html檔案就生成了dom樹，這時如果有其他執行緒載入完資源就會回到主線程執行檔案(如果其他檔案一起載入完也是乙個乙個檔案一行行解析)，阻塞主線程，主線程會一行行執行這個載入完的檔案

4. 當css也處理完就會生成cssom樹

5. 當有dom樹和cssom樹就會開始渲染，並且所有檔案執行完瀏覽器就顯示出頁面

瀏覽器會立即載入並執行指定的指令碼，「立即」指的是js指令碼立即執行阻塞其後的dom解析，也就是說不等待後續載入的html元素，讀到就去載入js檔案並執行。這樣就會造成當前js用到的dom還沒解析就執行js，所以通常js放在body內的最後一行保證dom都被解析了

把指令碼置於元素的底部，可改善顯示速度，因為指令碼編譯會拖慢顯示。

1.瀏覽器開始解析網頁

2.解析過程中，發現帶有async屬性的script標籤

5.指令碼執行完畢，瀏覽器恢復解析網頁

1.瀏覽器開始解析網頁

2.解析過程中，發現帶有defer屬性的指令碼元素

注意：選擇async還是defer，兩者之間的選擇是看指令碼之間是否有依賴關係，有依賴的話應當要保證執行順序，應當使用defer，沒有依賴的話使用async。