Q1:script標籤的defer,async的區別
這兩個元素在紅包書的第二章中就有介紹，先看下來自書中的定義：
async:可選，表示應該立即下載腳本，不妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部腳本有效。
defer：可選，表示腳本可以延遲到文檔完全被解析和顯示之後再執行，只對外文腳本有效。
瞭解了定義後。
解釋一下就是defer和async都會讓腳本異步加載，但是defer加載完腳本並不立即執行，而是等待後續文檔渲染加載完畢後執行。ascync則是加載腳本立刻執行，在執行js腳本時會阻塞dom的渲染。
最後回到這個問題，總結derfer,async的區別：
| 是否異步 | 是否阻塞dom渲染 | |
|---|---|---|
| async | 是 | 是，async異步加載文檔後立即執行，這時會阻塞dom渲染 |
| defer | 是 | 否，待文檔全部渲染完後才執行腳本。（ script.js 的執行要在所有元素解析完成之後，DOMContentLoaded 事件觸發之前完成） |
此圖告訴我們以下幾個要點：
1、defer 和 async 在網絡讀取（下載）這塊兒是一樣的，都是異步的（相較於 HTML 解析）
它倆的差別在於腳本下載完之後何時執行
2、顯然 defer 是最接近我們對於應用腳本加載和執行的要求的
3、關於 defer，此圖未盡之處在於它是按照加載順序執行腳本的，這一點要善加利用
4、async 則是一個亂序執行的主，反正對它來說腳本的加載和執行是緊緊挨着的，所以不管你聲明的順序如何，只要它加載完了就會立刻執行
5、仔細想想，async 對於應用腳本的用處不大，因爲它完全不考慮依賴（哪怕是最低級的順序執行），不過它對於那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics
當然，我們在開發中想要避免加載腳本阻塞頁面渲染帶來的白屏等性能問題，最穩妥的方式還是把script引入的外部腳本丟在html結構的尾部，避免了兼容問題，以及async存在的執行順序問題。
