JS非同步載入的三種方式

2021-08-11 19:30:11 字數 1039 閱讀 4588

我們平時使用的最多的一種方式。

同步模式,又稱阻塞模式,會阻止瀏覽器的後續處理,停止後續的解析,只有當當前載入完成,才能進行下一步操作。所以預設同步執行才是安全的。但這樣如果js中有輸出document內容、修改dom、重定向等行為,就會造成頁面堵塞。所以一般建議把

firefox 3.6、opera 10.5、ie 9和最新的chrome和safari都支援async屬性。可以同時使用async和defer,這樣ie 4之後的所有ie都支援非同步載入。

總結: 對於支援html5的瀏覽器,實現js的非同步載入只需要在script元素中加上async屬性,為了相容老版本的ie還需加上defer屬性;對於不支援html5的瀏覽器(ie可以用defer實現),可以採用以上幾種方法實現。原理基本上都是向dom中寫入script或者通過eval函式執行js**,你可以把它放在匿名函式中執行,也可以在onload中執行,也可以通過xhr注入實現,也可以建立乙個iframe元素,然後在iframe中執行插入js**。

有些js**在某些情況在需要使用,並不是頁面初始化的時候就要用到。延遲載入就是為了解決這個問題。將js切分成許多模組,頁面初始化時只載入需要立即執行的js,然後其它js的載入延遲到第一次需要用到的時候再載入。類似的延遲載入。

解決思路:為了解決js延遲載入的問題,可以利用非同步載入快取起來,但不立即執行,需要的時候在執行。如何進行快取呢?將js內容作為image或者object物件載入快取起來,所以不會立即執行,然後在第一次需要的時候在執行。

2:模擬較長的js**執行時間

var start = number(new date());

while(start + 5000 > number(new date()))

這段**將使js執行5秒才完成!

js延遲載入機制(lazyload):簡單來說,就是在瀏覽器滾動到某個位置在觸發相關的函式,實現頁面元素的載入或者某些動作的執行。如何實現瀏覽器滾動位置的檢測呢?可以通過乙個定時器來實現,通過比較某一時刻頁面目標節點位置和瀏覽器滾動條高度來判斷是否需要執行函式。

出處:

JS非同步載入的三種方式 js載入

一 同步載入 我們平時使用的最多的一種方式。同步模式,又稱阻塞模式,會阻止瀏覽器的後續處理,停止後續的解析,只有當當前載入完成,才能進行下一步操作。所以預設同步執行才是安全的。但這樣如果js中有輸出document內容 修改dom 重定向等行為,就會造成頁面堵塞。所以一般建議把 firefox 3....

JS非同步載入的三種方式

我們平時使用的最多的一種方式。同步模式,又稱阻塞模式,會阻止瀏覽器的後續處理,停止後續的解析,只有當當前載入完成,才能進行下一步操作。所以預設同步執行才是安全的。但這樣如果js中有輸出document內容 修改dom 重定向等行為,就會造成頁面堵塞。所以一般建議把 firefox 3.6 opera...

js非同步載入的三種方式

預設情況j ascript是同步載入的,也就是j ascript的載入是阻塞的,後面的元素要等待j ascript載入完畢後才能進行再載入,對於一些意義不是很大的j ascript,如果放在頁頭會導致載入很慢的話,是會嚴重影響使用者體驗的。1 defer,只支援ie defer屬性的定義和用法 de...