js的阻塞載入 延遲載入和非同步載入

2021-09-02 23:33:53 字數 618 閱讀 8844

1.阻塞載入:

平常預設使用的都是阻塞載入。例如:

阻塞載入會阻止瀏覽器的後續處理,停止了後續的檔案的解析,執行,如影象的渲染。為了這樣可以讓頁面先顯示出來,我們通常會把要載入的js放到body結束標籤之前,使得js可在頁面最後載入,儘量減少阻塞頁面的渲染。

2.延遲載入

延遲載入是指令碼延遲到文件被完全解析和顯示之後再執行。有些 js **並不是頁面初始化的時候就立刻需要的,而稍後的某些情況才需要的,這個時候我們就可以通過延遲載入來執行這些不是立刻就需要的模組,就像的延遲載入,在出現在可視區域內時才載入顯示。當頁面有大量資料的時候使用延遲載入可以加快頁面載入速率,給使用者良好的體驗。

3.非同步載入

延遲載入和非同步載入的相同點和不同點

延遲載入

非同步載入

相同點併發執行

只支援外部引入方式

不同點多個js,按定義順序執行

多個js,不一定按定義順序執行

文件解析完才執行

載入完就找機會執行,在load事件之前

在domcontentloaded事件之前執行完

在load事件之前執行完

同步載入 非同步載入 延遲載入和預載入

3 延遲載入 4 預載入 常預設的是同步載入 src script 同步模式又稱阻塞模式,會阻止瀏覽器的後續操作,相當於阻止了後續的檔案的解析,執行等。流覽器之所以會採用同步模式,是因為載入的js檔案中有對dom的操作,重定向,輸出document等預設行為,所以同步才是最安全的。通常載入js檔案或...

同步載入 非同步載入和延遲載入和預載入

常預設的是同步載入 1 src script 同步模式又稱阻塞模式,會阻止瀏覽器的後續操作,相當於阻止了後續的檔案的解析,執行等。流覽器之所以會採用同步模式,是因為載入的js檔案中有對dom的操作,重定向,輸出document等預設行為,所以同步才是最安全的。通常載入js檔案或者放標籤都在結構最後面...

同步載入 非同步載入和延遲載入和預載入

常預設的是同步載入 1 src script 同步模式又稱阻塞模式,會阻止瀏覽器的後續操作,相當於阻止了後續的檔案的解析,執行等。流覽器之所以會採用同步模式,是因為載入的js檔案中有對dom的操作,重定向,輸出document等預設行為,所以同步才是最安全的。通常載入js檔案或者放標籤都在結構最後面...