async和DOM Script文件加载比较

目前我用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…

赞 (0)

相关推荐

  • 非常强大的 jQuery.AsyncBox 弹出对话框插件

    非常强大的 jQuery.AsyncBox 弹出对话框插件

    复制代码 代码如下: <link href="asyncbox/skins/ZCMS/asyncbox.css" rel="stylesheet" type="text/css" /> <script src="asyncbox/jQuery.v1.4.2.js" type="text/javascript"></script> <script src="

  • jquery ajax属性async(同步异步)示例

    例1.jquery+ajax/" target="_blank">jquery ajax同步方式 复制代码 代码如下: $.ajax({url : 'test.php',type : 'post',async: false,//使用同步的方式,true为异步方式data : {'act':'addvideo', 'videoname':videoname},//这里使用json对象success : function(data){//code here...},fail

  • script的async属性以非阻塞的模式加载脚本

    script的async属性以非阻塞的模式加载脚本

    1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性,这个属性目前所有浏览器都已实现(除了firefox和chrome的早期版本),IE这方面做得好,从一开始就支持些属性. 复制代码 代码如下: //async <script async src="dquery.js" async></script> //defer <script async src="dq

  • 基于jquery的$.ajax async使用

    (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. 复制代码 代码如下: var temp; $.ajax({ async: false, type : "POST", url : defaultPostData.url, dataType : 'json', success : function(data) { temp=data; } }); alert(t

  • javascript 支持链式调用的异步调用框架Async.Operation

    复制代码 代码如下: Async = {}; Async.Operation = function(options) { options = options || {}; var callbackQueue = []; var chain = (options.chain && options.chain === true) ? true : false; var started = false; var innerChain = null; this.result = undefined

  • async和DOM Script文件加载比较

    async和DOM Script文件加载比较

    目前我用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> &

  • js加载之使用DOM方法动态加载Javascript文件

    js加载之使用DOM方法动态加载Javascript文件

    传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行.但是,它存在一些严重的缺陷. (1)严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,

  • 学习javascript文件加载优化

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部 为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到

  • 基于js文件加载优化(详解)

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部 为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到

  • JavaScript 文件加载与阻塞问题之性能优化案例详解

    JavaScript 文件加载与阻塞问题之性能优化案例详解

    上来先给一个问题:在书写html页面时,当你要从外部引入js文件时,script标签会放置在哪个位置呢,放置位置不同对页面加载有影响吗? 默认情况下,浏览器是同步加载 JavaScript 脚本:即渲染引擎遇到 script 标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器"卡死",出现短暂的空白,没有任何响应.这会造成很不好的用户体验,解决这个问题有两种方案:

  • IE及IE6浏览器中判断JS文件加载成功失败的方法

    浏览器的文件加载实际上是有非常纠结的兼容问题的.最近看到@lifesinger做了一个具体的总结.这里比较麻烦的是IE6~8不区分加载成功或失败,都走一个回调.在网上看了一种解决方案是,在加载文件的最后置一个全局变量或改变标签的属性来区分,这样成功与否就通过这个标志位判断.但显然不太完美,还要改加载文件. 后来尝试另一种思路,先创建一个vbscript,src置成一个JS文件,如这个文件加载正常,肯定会报错否则不会有反应.这样如果window.onerror捕获到错误了,说明文件有效,再正常加载

  • javascript文件加载管理简单实现方法

    本文实例讲述了javascript文件加载管理简单实现方法.分享给大家供大家参考.具体如下: 这里介绍超级简单的进行javascript的文件(模块)的加载管理, 实现sea.js或者require.js核心功能,用一行 <script src="js/light/light.js"></script> 加载所有的js文件. //按照lightJs的顺序,让网页加载js文件: var lightJs = [ "./js/light/pre/jquery

  • Js判断CSS文件加载完毕的具体实现

    要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 复制代码 代码如下: // 代码节选至seajsfunction styleOnload(node, callback) {    // for IE6-9 and Opera    if (node.attachEvent) {      node.attachEvent('onload', callback);      // NOT

  • 浅析ELF转二进制允许把 Binary 文件加载到任意位置

    背景简介 有一天,某位同学在讨论群聊起来: 除了直接把 C 语言程序编译成 ELF 运行以外,是否可以转成二进制,然后通过第三方程序加载到内存后再运行. 带着这样的问题,我们写了四篇文章,这是其二. 上篇 介绍了如何把 ELF 文件转成二进制文件,并作为一个新的 Section 加入到另外一个程序中执行. 这个代码包括两个段,一个 text 段,一个 data 段,默认链接完以后,text 中是通过绝对地址访问 data 的,ELF 转成 Binary 后,这个地址也写死在 ELF 中,如果要作

  • 让浏览器DOM元素最后加载的js方法

    让浏览器DOM元素最后加载的js方法 window.onload = =function() { a(); b(); } 就在界面所有元素加载完后,执行a()方法和 b()方法,防止在界面加载一半就弹出对话框,结果背景是空白的

随机推荐