您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關使用async與DOM Script對文件進行加載哪個效率高,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
目前我用demo.js作為執(zhí)行文件操作.代碼:
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. 執(zhí)行阻塞DomReady
圖1-1. 下載阻塞DomReady
圖1-2. 執(zhí)行阻塞DomReady
2. async屬性
async是html5中新增的屬性,它的作用是能夠異步下載腳本文件,不阻塞DOMReady。
每一個async屬性的腳本都在它下載結束之后立刻執(zhí)行,同時會在window的load事件之前執(zhí)行。所以就有可能出現(xiàn)腳本執(zhí)行順序被打亂的情況
支持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 執(zhí)行阻塞load事件
圖2-3 IE9不支持async屬性下載阻塞DomReady
3. DOM Script動態(tài)加載
文檔對象模型(DOM)允許您使用 JavaScript 動態(tài)創(chuàng)建 HTML 的幾乎全部文檔內(nèi)容。 script元素與頁面其他元素一樣,可以非常容易地通過標準 DOM 函數(shù)創(chuàng)建:
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');
以上就是使用async與DOM Script對文件進行加載哪個效率高,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。