javaScript-異步執行

在傳統模式下,瀏覽器會按照從上到下的方式解析HTML頁面的元素,如果頁面上出現元素,瀏覽器將會解析並指定元素導入的腳本文件~在腳本文件執行完成之前,瀏覽器不會解析處理元素之後的內容。


javaScript-異步執行

假設有一個極端的情況,元素導入的腳本文件非常耗時,這將導致瀏覽器無法向下執行,頁面將長時間顯示一片空白~這不是用戶想看到的效果。此時就可以藉助async屬性來解決該問題,指定async屬性的元素會啟動新線程,異步執行元素導入的腳本文件,瀏覽器也會繼續向下解析,處理頁面內容

例如代碼:

<code>

 
 
 異步執行 javascript
  
 
 
 

hello world!

/<code>

上面頁面代碼中導入了名為async.js的腳本文件

<code>var sum=0;
for (var i=0;i<100000>

上面JavaScript腳本要循環100000次,因此比較耗時,在JavaScript循環完成,alert彈出之前,元素就沒有執行完成,那麼瀏覽器不會向下解析,執行後面的內容,因此頁面上將顯示一片空白。

但如果將上面的元素改為

<code>/<code>

上面元素的async屬性指定瀏覽器以異步方式執行JavaScript腳本文件,因此瀏覽器會啟動新線程,異步執行元素導入的腳本文件,這樣就不會影響瀏覽器繼續解析處理元素之後的頁面內容使用瀏覽器瀏覽顯示如下


javaScript-異步執行

可以看出,即使當前JavaScript腳本還處於執行階段,但由於JavaScript腳本是以異步方式執行的,因此也不會影響瀏覽器解析,處理HTML頁面內容,所以頁面上的內容依然顯示出來了。


javaScript-異步執行

注意:async屬性只能作用於外部腳本文件,它對於元素內嵌的腳本不起作用


分享到:


相關文章: