首先,我們要知道瀏覽器的渲染過程,在網頁渲染過程中,如果遇到<script>
標籤是立即下載的,會阻塞頁面的解析,顯而易見的效果就是,你會發現頁面有一段時間是空白的,因爲瀏覽器只有等待js下載執行完畢後纔會繼續渲染。這樣的用戶體驗是很差的,也是大多數開發者會把 <script>
放在</body>
之前的原因。
延遲腳本
HTML4.01爲<script>
標籤增加了defer屬性,這個屬性是告訴瀏覽器腳本會立即被下載,但是等待頁面解析之後再運行。
HTME5規範要求腳本按照它們出現的先後順序執行,因此第一個延遲腳本會優於第二個執行。但是現實中,它們執行的先後順序並不一定。(JaveScript高級程序設計),因此把延遲腳本最好只有一個,並放在頁面底部仍是最佳選擇
異步腳本
HTML5定義了<script>
標籤的async屬性,與defer屬性一樣,僅適用於外部腳本,它告訴瀏覽器立即下載,但async並不保證執行的順序,如果有兩個異步腳本,那麼請確保它們之間沒有依賴關係,因爲第二個可能先於第一個執行。在下載期間,頁面解析會繼續,異步腳本一定會在頁面onload事件之前執行。