defer：延遲；
async：非同步；
先來試個一句話解釋仨，當瀏覽器碰到 script 指令碼的時候：
沒有 defer 或 async，瀏覽器會立即載入並執行指定的指令碼，「立即」指的是在渲染該 script 標籤之下的文件元素之前，也就是說不等待後續載入的文件元素，讀到就載入並執行。
有 async，載入和渲染後續文件元素的過程將和 script.js 的載入與執行並行進行（非同步）。
有 defer，載入後續文件元素的過程將和 script.js 的載入並行進行（非同步），但是 script.js 的執行要在所有元素解析完成之後，domcontentloaded 事件觸發之前完成。
然後從實用角度來說呢，首先把所有指令碼都丟到 之前是最佳實踐，因為對於舊瀏覽器來說這是唯一的優化選擇，此法可保證非指令碼的其他一切元素能夠以最快的速度得到載入和解析。
接著，我們來看一張圖咯：
藍色線代表網路讀取，紅色線代表執行時間，這倆都是針對指令碼的；綠色線代表 html 解析。
此圖告訴我們以下幾個要點：
Script標籤裡的defer屬性，你知多少？
先看下面三段 寫出你認為的輸出結果？test test test 你一定對第二種很感興趣，在第二段 中，script標籤的載入順序跑在了它下面的button後面，這裡要講解script標籤中的defer屬性。先摘錄一段貌似官方的說法 其實我們一般的寫法中也有defer屬性的，只不過它的預設值是fal...
script標籤引入
1 css寫在哪？內部樣式表 屬性樣式 樣式屬性值 內部 style雙標籤，包裹css樣式 外部 外聯 link單標籤href屬性，引入css檔案路徑 2 js寫在哪？內聯 屬性形式 事件觸發 不建議使用，原因 結構和行為的分離，優化專案，便於管理，為了測試方便 內部 script雙標籤，包裹js ...
script標籤的同步和非同步
2 script標籤不帶defer和async屬性 同步模式，指令碼獲取和執行都是同步，頁面會被阻塞，瀏覽器都會按照元素在頁面 現的先後順序對他們依次進行解析 通過createelement建立的script標籤其屬性async預設為true 補充 載入 es6模組的時候設定 type module...