最近在除錯**的時候想非同步載入js進去,便查了一下js非同步載入的相關知識,不查不知道,一查受益匪淺,平時沒有注意的好多小細節,竟然有如此大的作用。
一直以為bigpipe的原理就是非同步載入那麼簡單,其實不然,最近幾年,為了不讓js的載入影響到網頁的可視性,開始嘗試將js放在底部,而不是一味的放在head中,解決了js載入慢引起的網頁空白問題,當然這不是真正的非同步載入,有其他的非同步載入方法,如:
(其中這個屬性可以沒有,因為這是新加的乙個屬性,其實在現代瀏覽器中直接用async這個屬性就可以實現非同步載入。function())
();
script.
async
=true
;
新問題又來了,
這種載入方式在載入執行完之前會阻止 onload 事件的觸發
,而現在很多頁面的**都在 onload 時還要執行額外的渲染工作等,所以還是會阻塞部分頁面的初始化處理。
(function(
)if(window.attachevent) window.attachevent(
'onload'
, async_load)
;elsewindow.addeventlistener(
'load'
, async_load,
false);
})()
;這和前面的方式差不多,但關鍵是它不是立即開始非同步載入 js ,而是在 onload 時才開始非同步載入。這樣就解決了阻塞 onload 事件觸發的問題。
bigepipe!對,就是他,他講整個js分成一塊一塊的小模組,在載入某乙個小js的時候,另乙個js可以開始傳送請求,並不像以前那樣一直阻塞到那裡等待上乙個js從伺服器載入完成再去執行另外一段js。
詳情請看下面兩篇部落格:
js的非同步載入
今天被問到了如何非同步載入js,聽到這句話我內心是拒絕的,啥玩意兒?js也要用非同步載入不是引入了就行了,也沒見速度變慢啊。後來仔細查詢了一下,才發現自己原來還是太年輕了。因為之前自己寫的載入的都是本地js,或者是並沒有複雜邏輯運算的js,導致看不出來太大問題,查完資料後,要將不會的記在這裡,當作學...
JS的非同步載入
自覺自己基礎不紮實,不應該心猿意馬,所以很久沒有更新效能優化專欄,回顧總結了一段時間後再來一發吧 在學習前端開發的最開始,就可能有人告訴你,在 body 的末尾再引入 script 標籤 收到依賴的jquery更適合放在前面 書寫js 就提高效率,這到底是為什麼呢?先看乙個不好的例子 class p...
JS 非同步載入
參考學習 有關promise的學習 如果 async async 指令碼相對於頁面的其餘部分非同步地執行 當頁面繼續進行解析時,指令碼將被執行 如果不使用 async 且defer defer 指令碼將在頁面完成解析時執行 如果既不使用 async 也不使用 defer 在瀏覽器繼續解析頁面之前,立...