欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

async和DOM Script文件加載比較

 更新時(shí)間：2014年07月20日 17:20:23   投稿：hebedich  
async與script動(dòng)態(tài)加載都能使文件異步加載，本文敘述它們對(duì)頁(yè)面渲染和load加載的影響方面。

目前我用demo.js作為執(zhí)行文件操作.代碼：

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

用sleep.php作為請(qǐng)求文件操作。代碼：

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

1. 一般script標(biāo)簽加載

<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。

每一個(gè)async屬性的腳本都在它下載結(jié)束之后立刻執(zhí)行，同時(shí)會(huì)在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動(dòng)態(tài)加載

文檔對(duì)象模型（DOM）允許您使用 JavaScript 動(dòng)態(tài)創(chuàng)建 HTML 的幾乎全部文檔內(nèi)容。 script元素與頁(yè)面其他元素一樣，可以非常容易地通過(guò)標(biāo)準(zhǔn) 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');

在瀏覽器中加載的情況：


圖3-1 下載阻塞load事件


圖3-2 執(zhí)行阻塞load事件


圖3-3 IE9不阻塞load事件

小結(jié)

async和script動(dòng)態(tài)加載在現(xiàn)代瀏覽器中加載的情況是一致的。前者使用簡(jiǎn)單，后在兼容性方面更好。 異步加載文件還有很多方法，ajax(會(huì)受到同源限制)、iFrame、img…

相關(guān)文章

最新評(píng)論