js的非同步載入

2021-08-27 05:33:51 字數 1128 閱讀 4045

今天被問到了如何非同步載入js,聽到這句話我內心是拒絕的,啥玩意兒?js也要用非同步載入不是引入了就行了,也沒見速度變慢啊。後來仔細查詢了一下,才發現自己原來還是太年輕了。

因為之前自己寫的載入的都是本地js,或者是並沒有複雜邏輯運算的js,導致看不出來太大問題,查完資料後,要將不會的記在這裡,當作學習的資料室。

一般寫法將js放在head中,而且預設方式是同步載入,這就會導致在進行js載入的過程中,無法在其載入完成前對後續的內容進行操作,造成頁面內阻塞,對使用者體驗很不友好。

之前我們的寫法就是把外部js或js放在body後或內部js放在body結束標籤之前,這樣會使至少先把一些基本內容載入出來而不會讓人等太久,值得注意的是js中一般包含對dom的操作,如果放在body前,就可能出現空白或閃爍,而且js如果放在body內即結束標籤之前,則無法獲得onload和readystate,需要好好分析。

(1)、而比較常用的寫法是動態的新增乙個script標籤,叫做script dom element

//立即執行函式

(function())()

但是這個函式又放在**呢,我一時間沒查到,不過想想應該是放在head中的,畢竟它也是同步載入的。但是這種方法有個問題,它會阻止onload函式的觸發,但是我們有很多時候都需要使用這個函式來渲染一些其他東西,所以可以將該函式也放在onload中:

(function()else

var asyncload = function()

)();

(2)、defer 

該屬性是h5新屬性,只有ie可以用,主要可以延遲指令碼的執行;

有3點需要注意:

1.defer只適用於外聯指令碼,如果script標籤沒有指定src屬性,只是內聯指令碼,不要使用defer

(3)、async

該屬性宣告外部js的非同步載入;

也是3點:

這兩個屬性搬運自 ,寫的十分之詳細,可以好好看看加深理解。

其中參考了 ,濫好人寫的講解,學習到了很多。

JS的非同步載入

自覺自己基礎不紮實,不應該心猿意馬,所以很久沒有更新效能優化專欄,回顧總結了一段時間後再來一發吧 在學習前端開發的最開始,就可能有人告訴你,在 body 的末尾再引入 script 標籤 收到依賴的jquery更適合放在前面 書寫js 就提高效率,這到底是為什麼呢?先看乙個不好的例子 class p...

JS 非同步載入

參考學習 有關promise的學習 如果 async async 指令碼相對於頁面的其餘部分非同步地執行 當頁面繼續進行解析時,指令碼將被執行 如果不使用 async 且defer defer 指令碼將在頁面完成解析時執行 如果既不使用 async 也不使用 defer 在瀏覽器繼續解析頁面之前,立...

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

1.阻塞載入 平常預設使用的都是阻塞載入。例如 阻塞載入會阻止瀏覽器的後續處理,停止了後續的檔案的解析,執行,如影象的渲染。為了這樣可以讓頁面先顯示出來,我們通常會把要載入的js放到body結束標籤之前,使得js可在頁面最後載入,儘量減少阻塞頁面的渲染。2.延遲載入 延遲載入是指令碼延遲到文件被完全...