JS檔案載入:比較async和DOM Script

來源:互聯網
上載者:User

async與script動態載入都能使檔案非同步載入,本文敘述它們對頁面渲染和load載入的影響方面。

目前我用demo.js作為執行檔案操作.代碼:

var now = function() { return +(new Date()); }
var t_s = now();
while(now() - t_s < 2000) {  }

用sleep.php作為請求檔案操作。代碼:

<?php
    sleep(3);
    echo "var bb";
?>

1. 一般script標籤載入

<script src="demo.js"></script>
<script src="sleep.php"></script>

在瀏覽器載入情況: 圖1-1. 下載阻塞DomReady 圖1-2. 執行阻塞DomReady

圖1-1. 下載阻塞DomReady

圖1-2. 執行阻塞DomReady

2. async屬性

async是html5中新增的屬性,它的作用是能夠非同步下載指令檔,不阻塞DOMReady。
每一個async屬性的指令碼都在它下載結束之後立刻執行,同時會在window的load事件之前執行。所以就有可能出現指令碼執行順序被打亂的情況
支援async瀏覽器: Firefox 3.6+, IE 10+, Chrome 2+, Safari 5+, iOS 5+, Android 3+

<script src="demo.js" async></script> <script src="sleep.php" async></script>    

在瀏覽器中載入的情況:
圖2-1 非同步下載 不阻塞DomReady 阻塞load事件

圖2-2 執行阻塞load事件

圖2-3 IE9不支援async屬性下載阻塞DomReady

3. DOM Script動態載入

文件物件模型(DOM)允許您使用 JavaScript 動態建立 HTML 的幾乎全部文檔內容。
script元素與頁面其他元素一樣,可以非常容易地通過標準 DOM 函數建立:

var loadScript = function(url) {     var s = document.createElement("script");     s.type = "text/javascript";     s.async = "true";     s.src = url;     document.getElementsByTagName("head")[0].appendChild(s);     } // 載入js檔案指令碼 loadScript("sleep.php"); loadScript("demo.js"); 

在瀏覽器中載入的情況:

圖3-1 下載阻塞load事件

圖3-2 執行阻塞load事件

圖3-3 IE9不阻塞load事件

小結

async和script動態載入在現代瀏覽器中載入的情況是一致的。前者使用簡單,後在相容性方面更好。
非同步負載檔案還有很多方法,ajax(會受到同源限制)、iFrame、img…



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。