js的阻塞載入、延遲載入和非同步載入
阿新 • • 發佈:2019-01-04
1.阻塞載入:
平常預設使用的都是阻塞載入。例如:
阻塞載入會阻止瀏覽器的後續處理,停止了後續的檔案的解析,執行,如影象的渲染。為了這樣可以讓頁面先顯示出來,我們通常會把要載入的js放到body結束標籤之前,使得js可在頁面最後載入,儘量減少阻塞頁面的渲染。
2.延遲載入
延遲載入是指令碼延遲到文件被完全解析和顯示之後再執行。有些 js 程式碼並不是頁面初始化的時候就立刻需要的,而稍後的某些情況才需要的,這個時候我們就可以通過延遲載入來執行這些不是立刻就需要的模組,就像圖片的延遲載入,在圖片出現在可視區域內時才載入顯示圖片。當頁面有大量資料的時候使用延遲載入可以加快頁面載入速率,給使用者良好的體驗。
3.非同步載入:
非同步載入是立即下載js'指令碼的同時又不妨礙頁面中的其他操作。
延遲載入和非同步載入的相同點和不同點
延遲載入 | 非同步載入 | |
相同點 | 併發執行 | |
只支援外部引入方式 | ||
不同點 | 多個js,按定義順序執行 | 多個js,不一定按定義順序執行 |
文件解析完才執行 | 載入完就找機會執行,在load事件之前 | |
在DOMContentLoaded事件之前執行完 | 在load事件之前執行完 |