2015-04-12 59 views
6

我有在HEAD部分中的script標籤頁:腳本加載了異步屬性delay onload事件嗎?

<script src="somescript.js" type="text/javascript" async></script> 

,因爲它包含async屬性它異步加載和瀏覽器解析頁面,而無需等待該腳本下載。一旦下載完成,這個腳本也會異步執行,因此瀏覽器可以繼續解析頁面。

這個腳本,下載完成後會執行一些動作和另一個腳本動態插入通過類似這樣的東西:

var a = document.createElement('script'); 
    a.type = 'text/javascript'; 
    a.src = 'http://domain/otherscript.js'; 

    var elem_body = document.getElementsByTagName('body')[0]; 
    elem_body.appendChild(a); 

這種新的動態插入腳本也將異步和再次執行瀏覽器可以繼續到其他事情,所以根據需要解析頁面或執行其他腳本。

現在,我的理解是,這個腳本從開始到結束執行都不會阻塞瀏覽器。它會加載,插入另一個腳本並完全異步執行。 DOMContentLoaded事件根本不會減慢。

Hoever,這可能會延遲發射onload事件嗎?在我看來,這個腳本將在頁面幾乎被解析時開始。然後它會請求其他腳本和onload事件可能會延遲進一步等待這最後的腳本來做它的事情。

我的理解是否正確?

編輯

http://plnkr.co/edit/BCDPdgCjPeNUmLbf7wNR?p=preview 加入的測試,並在Chrome中似乎確實延遲onload事件

+0

如上所述,onload()很可能在別人script.js執行之前觸發,但是一個簡單的測試就足夠了。 – dandavis

回答

4

是的,正如你提到的,就會耽誤window.onload事件。

你的第一個腳本,somescript.js將子script元素的頁面,之前的頁面已經完成加載(如前window.onload已經解僱),並在頁面現在有之前下載並執行新追加script元素的src它可以觸發onload事件。

如果你不希望它耽誤onload事件,你可以做一個AJAX請求得到otherscript.js內容,只是eval它,所以它在全球範圍內(執行實際上是相同的通過script指定它標記,但不延遲onload事件)。