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

常預設的是同步載入

1

src="">

script>

同步模式又稱阻塞模式，會阻止瀏覽器的後續操作，相當於阻止了後續的檔案的解析，執行等。

流覽器之所以會採用同步模式，是因為載入的js檔案中有對dom的操作，重定向，輸出document等預設行為，所以同步才是最安全的。

通常載入js檔案或者放標籤都在結構最後面，也是因為它會阻止瀏覽器後續操作的原因，所以放在後面，當頁面結構和樣式全部渲染完成再執行js，提公升使用者體驗

這個是es7中的特性，async顧名思義是「非同步」的意思，async用於宣告乙個函式是非同步的。而await從字面意思上是「等待」的意思，就是用於等待非同步完成

把插入script的方法放在乙個函式裡面，然後放在window.onload方法裡面執行，這樣就解決了阻塞onload事件觸發的問題

當瀏覽器解析到script指令碼，沒有defer或async時，defer在延遲載入中會說到

1

src="main.js">

script>

瀏覽器會立即載入並執行指定的指令碼，「立即」指在渲染該script標籤之下的文件元素之前，也就是說不等待後續載入的文件元素，讀到就載入並執行

當瀏覽器解析到script指令碼，有async時

1

async

src="main.js">
script>

有些**在某種特定情況下才需要，並不是一股腦子都載入出來了，這個時候就需要延遲載入

這裡也是h5的內容

當瀏覽器解析到script指令碼，有defer時

123

defer="defer"

src="main1.js">
script>
defer="defer"
src="main2.js">
script>

此時單純看這兩個需要被載入的js檔案和其他html的渲染，css的載入，的載入等是同時進行的，是非同步操作

但是單看main1.js和main2.js又和同步的執行是一樣的，當載入main1.js的時候，main2.js會等待main1.js載入完畢再載入

這就是defer的作用了，當有defer的時候，先架載入第乙個延遲指令碼

不同點：

async：雖然是非同步載入，但當有多個指令碼非同步載入的時候，不一定先載入哪乙個，載入順序不一定

defer：載入順序由第乙個延遲指令碼到最後乙個延遲指令碼

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

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

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

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

延遲載入和預載入

在網頁剛開始開啟的時候，並沒有載入這些，滾動條移動到一定的位置才載入這些，這就是延遲載入的乙個例子。延遲載入的好處 使用延遲載入節約大量的流量資源。實現預載入的方法 1 將的實際的路徑位置放在xsrc中 2 得到距離視窗頂端的距離 3 獲取螢幕可視區域的最低點的位置 達到的時候實現1 在網頁開啟某一...