一、同步載入與非同步載入的形式
1. 同步載入
我們平時最常使用的就是這種同步載入形式:
同步模式,又稱阻塞模式,會阻止瀏覽器的後續處理,停止了後續的解析,因此停止了後續的檔案載入(如影象)、渲染、**執行。
js 之所以要同步執行,是因為 js 中可能有輸出 document 內容、修改dom、重定向等行為,所以預設同步執行才是安全的。
以前的一般建議是把
詳見參考資料中2023年的velocity 大會 steve souders 和**的那兩個講義。
二、async 和 defer 屬性
1. defer 屬性
defer屬性宣告這個指令碼中將不會有 document.write 或 dom 修改。
defer屬性在ie 4.0中就實現了,超過13年了!firefox 從 3.5 開始支援defer屬性 。
注:所有的defer 指令碼保證是按順序依次執行的。
2. async 屬性
firefox 3.6、opera 10.5、ie 9 和 最新的chrome 和 safari 都支援 async 屬性。可以同時使用 async 和 defer,這樣ie 4之後的所有 ie 都支援非同步載入。
3. 詳細解釋
3. 非同步載入script(2009)
複製**
**如下:
var se = document.createelement('script');
se.src = '';
document.getelementsbytagname('head')
這就是本文主要說的方式。
只在解析執行階段阻止渲染(rendering);
複製**
**如下:
var se = new image();
se.onload = registerscript();
se.src = '';
不阻止渲染(rendering)直到真正需要時;
六、非同步載入的問題
在非同步載入的時候,無法使用 document.write 輸出文件內容。
在同步模式下,document.write 是在當前 script 所在的位置輸 出文件的。而在非同步模式下,瀏覽器繼續處理後續頁面內容,根本無法確定 document.write 應該輸出到什麼位置,所以非同步模式下 document.write 不可行。而到了頁面已經 onload 之後,再執行 document.write 將導致當前頁面的內容被清空,因為它會自動觸發 document.open 方法。
實際上document.write的名聲並不好,最好少用。
替代方法:
1. 雖然非同步載入不能用 document.write,但還是可以onload之後執行操作dom(建立dom或修改dom)的,這樣可以實現一些自己的動態輸出。比如要在頁面非同步建立乙個浮動元素,這和它在頁面中的位置就沒關係了,只要建立出該dom元素新增到 document 中即可。
2. 如果需要在固定位置非同步生成元素的內容,那麼可以在該固定位置設定乙個dom元素作為目標,這樣就知道位置了,非同步載入之後就可以對這個元素進行修改。
六、js 模組化管理
非同步載入,需要將所有 js 內容按模組化的方式來切分組織,其中就存在依賴關係,而非同步載入不保證執行順序。
JavaScript 非同步載入,時間線
非同步載入 先了解下同步載入 我們平時最常使用的就是這種同步載入形式 同步模式,又稱阻塞模式,會阻止瀏覽器的後續處理,停止了後續的解析,因此停止了後續的檔案載入 如影象 渲染 執行。js 之所以要同步執行,是因為 js 中可能有輸出 document 內容 修改dom 重定向等行為,所以預設同步執行...
同步載入 非同步載入 延遲載入
一 同步載入 平常預設用的都是同步載入。如 同步模式又稱阻塞模式,會阻止瀏覽器的後續處理,停止了後續的檔案的解析,執行,如影象的渲染。流覽器之所以會採用同步模式,是因為載入的js檔案中有對dom的操作,重定向,輸出document等預設行為,所以同步才是最安全的。通常會把要載入的js放到body結束...
JavaScript動態載入
在做專案的過程中需要用到動態載入,如何做,剛開始很為難。什麼是動態載入呢?比如說,新增便簽時,在往庫里插入資料的同時需要顯示在介面上,新增資料後重新整理頁面是可以獲得,但是沒插入一條資料都要重新整理介面的話,不僅麻煩,還很慢。所以就需要用到動態載入。經過不懈努力,其實,也就是動態拼接字串而已。再新增...