`

html5中script的async属性

 
阅读更多

转自： http://www.cnblogs.com/AndyWithPassion/archive/2011/09/03/2165441.html

 

html5中script的async属性

我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript来实现. 目前firefox和chrome都是实现了script标签的async属性.这个新的属性能让我们以一种更 简单的方式防止浏览器阻塞,在这之前我们需要用一些javascript小窍门来解决这个问题.

async - html代码

?
<script async src="myscript.js" onload="myInit()"></script>

就像我之前提到的,加个属性很容易.

defer - html代码

script标签也有个defer属性,目前所有浏览器都已实现, 在firefox和chrome的早期版本没有实现此属性,IE从一开始就支持此属性.

?
<script defer src="myscript.js" onload="myInit()"></script>

async & defer - 它们的区别是什么

带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作.它们的不同之处在于script执行的 时机.带有async的script,一旦下载完成就开始执行(当然是在window的onload之前).这意味着这些script 可能不会按它们出现在页面中的顺序来执行,如果你的脚本互相依赖并和执行顺序相关,就有很大的可能出问题, 例如变量或者函数未定义之类的错误. 而对于带有defer的script,它们会确保按在页面中出现的顺序来执行,它们执行的时机是在页面解析完后,但在 DOMContentLoaded事件之前.(亲测下来确实如此,下面会给出我的测试用例和说明)

目前哪些浏览器支持defer和async

目前来看,最新版本的firefox和chrome(还有同样webkit内核的safari,本人机器上的版本是ff6,chrome15dev-m,IE9)都已支持这两个属性,也都支持script的load事件. IE的话对于defer是一直都支持的,async属性IE6~9都没有支持(IE10毫无疑问的会支持),onload是在IE9中新加入的属性.

--------------------下面来一些我对defer,async,onload的测试用例------------------------------

写了简单的四段脚本用于测试

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/** script1 **/
window.ns = {};
window.ns.delay = function(n) {
    var start = Number(new Date()),
           wait = n * 1000;
    while(true) {
        var end = Number(new Date());
        if(end-start >= wait) {
            break;
        }
    }
    console.log("take " + n + " seconds to execute");
};
console.log("create a namespace named ns");
document.addEventListener("DOMContentLoaded", function() {
    console.log("oh yeah, Dom Ready!");
}, false);
window.addEventListener("load", function() {
    console.log("oh yeah, All Resources Loaded!");
}, false);
?
1
2
3
4
5
6
7
8
9
/** script2 **/
if(window.ns) {
    window.ns.one = 'ONE';
    console.log('window.ns.one:' + window.ns.one);
    window.ns.delay(2);
} else {
    console.log('oops...');
}
?
1
2
3
4
5
6
7
8
9
/** script3 **/
if(window.ns  && window.ns.one) {
    window.ns.two = "TWO";
    console.log('window.ns.two:' + window.ns.two);
    window.ns.delay(2);
} else {
    console.log('oops...');
}
?
1
2
3
4
5
6
7
8
/** script4 **/
if(window.ns  && window.ns.two) {
    window.ns.three = "THREE";
    console.log('window.ns.three:' + window.ns.three);
} else {
    console.log('oops...');
}

用于测试的基本html页面

?
<!DOCTYPE htm>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script type="text/javascript" src="script1.js"></script>
  <script type="text/javascript" src="script2.js"></script>
  <script type="text/javascript" src="script3.js"></script>
  <script type="text/javascript" src="script4.js"></script>
</head>
<body>
  <img src="http://img9.zol.com.cn/desk_pic/big_452/451134.jpg"
  width="200" height="200" alt="a big image of beauty"/>
</body>
</html>

 

剩下的事情就是在script上加上defer和async进行测试

1.无defer和async属性

?
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript" src="script3.js"></script>
<script type="text/javascript" src="script4.js"></script>

我们先看资源加载瀑布图(firefox和chrome类似,IE9的有点奇怪):

看得出来image的下载被script的执行给阻塞了.

console输出如下:

2.都给上defer属性

?
<script type="text/javascript" src="script1.js" defer></script>
<script type="text/javascript" src="script2.js" defer></script>
<script type="text/javascript" src="script3.js" defer></script>
<script type="text/javascript" src="script4.js" defer></script>

资源加载瀑布图:

看得出来所有资源进行了并行下载,没有阻塞img的情况

console输出和第1个测试的输出一致,IE9和chrome是如此,但是奇怪的是Firefox在这种情况下, 居然没有触发DOMContentLoaded事件,即输出少了Dom Ready!一行

3.部分给上defer属性

?
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js" defer></script>
<script type="text/javascript" src="script3.js" ></script>
<script type="text/javascript" src="script4.js" defer></script>

因为这里面4个script都是有执行顺序依赖的,所以如果defer属性不加选择的添加的话,就会出麻烦, 本例中,script1和script3就会先执行,script2和script4晚执行,就出现错误了

console输出如下:

4.都给上async属性

?
<script type="text/javascript" src="script1.js" async></script>
<script type="text/javascript" src="script2.js" async></script>
<script type="text/javascript" src="script3.js" async></script>
<script type="text/javascript" src="script4.js" async></script>

IE9根本不支持这个,所以不用测试. Firefox和chrome都是第一次访问时,出现了异步执行的情况, 之后有缓存的话script的执行顺序貌似得到了维护.资源时间瀑布上 表现出的是预期的情况,即没有给其他资源的下载造成阻塞

Chrome中第一次访问,console输出如下,无论出错与否chrome和firefox的DOMContentLoaded均未未触发

5.部分给async属性

?
<script type="text/javascript" src="script1.js" async></script>
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript" src="script3.js"></script>
<script type="text/javascript" src="script4.js" async></script>

这种情况的效果在chrome下比较明显,分析起来也很简单,4个script都是并行下载,但是如果script1和script4下完后立马执行, 很显然就破环了它们之间的依赖关系,可惜的是这种竞争的现象在Firefox中出现的概率比较低,可能跟firefox的缓存机制有关系

chrome的console输出如下:

分享到：
| addEventListener 的用法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    1.HTML5实现了script的async属性，这个新的属性可以让js在浏览器中以非阻塞的模式加载，另外script还有一个defer属性，这个属性目前所有浏览器都已实现（除了firefox和chrome的早期版本），IE这方面做得好，从一开始...

    浅析script标签中的defer与async属性

    【script标签中的defer与async属性】 在HTML中，`&lt;script&gt;`标签通常用来引入JavaScript文件，但在实际应用中，为了优化页面加载性能，我们有时会使用`defer`和`async`属性。这两个属性都是用来控制脚本的加载和执行...

    HTML5 script元素async、defer异步加载使用介绍

    **async属性** `async`属性使得JavaScript脚本可以异步加载，即在脚本下载的同时，浏览器可以继续解析HTML文档。当脚本下载完成时，无论下载顺序如何，它会立即执行，但不会保证按照脚本在页面中出现的顺序执行。这...

    JS中script标签defer和async属性的区别详解

    1. **没有defer或async属性**： 当`&lt;script&gt;`标签没有这两个属性时，浏览器会立即下载脚本，并在解析到该标签时执行。这意味着在执行脚本的过程中，浏览器会暂停HTML的解析，直到脚本执行完毕。这种方法对于小脚本...

    HTML5 对各个标签的定义与规定：script

    ### HTML5中的`&lt;script&gt;`...`&lt;script&gt;`标签是HTML5中非常重要的元素之一，它支持多种属性来控制脚本的行为。合理利用这些属性可以帮助开发者构建出更高效、响应更快的应用程序。了解这些细节对于优化Web性能至关重要。

    js的[defer]和[async]属性

    JS中defer和async属性是HTML文档加载和执行外部JavaScript文件时的重要关键字，它们指示浏览器如何处理脚本与页面内容的加载顺序和执行时机。了解这两个属性对于编写高性能的网页至关重要。 首先，我们需要了解...

    javascript中的用法与意思

    随着HTML5的发展，`type`属性默认值已经被设置为`application/javascript`，因此现代浏览器中不再需要显式地指定`type="text/javascript"`。然而，在某些旧版的HTML文档或者为了保持兼容性时，仍然会见到这样的写法...

    浅谈HTML5 defer和async的区别

    HTML5的`&lt;script&gt;`元素提供了两个可选的属性，`defer`和`async`，它们主要用于控制外部JavaScript脚本的加载和执行方式。这两者的设计目标都是为了优化页面加载性能，避免因为脚本的执行阻塞页面的渲染。 1. **没有...

    jquerytree async 异步

    jQueryTree的异步加载功能主要通过API中的`data-url`属性实现，这个属性可以设置一个URL，当用户展开树形结构的某个节点时，jQueryTree会发送一个Ajax请求到该URL，获取子节点的数据。 **配置异步加载** 在使用...

    html与Java Script

    HTML（HyperText Markup Language）和JavaScript是Web开发中的两种核心技术，它们共同构建了现代网页的交互性和动态性。HTML作为标记语言，负责定义网页的基本结构和内容，而JavaScript则是一种脚本语言，用于增加...

    JS script脚本中async和defer区别详解

    在JavaScript的世界里，`async` 和 `defer` 是两个在`&lt;script&gt;`标签中用于控制脚本加载和执行方式的关键属性。它们主要用来解决脚本阻塞页面渲染的问题，确保网页的加载性能和用户体验。下面将详细讲解这两个属性的...

    async和DOM Script文件加载比较

    async属性是HTML5标准中的一部分，它的主要目的是允许浏览器异步加载JavaScript文件。这意味着浏览器可以在下载JavaScript文件的同时继续构建DOM，下载JavaScript文件不会阻塞DOM的构建。一旦文件下载完成，它会立即...

    动态给head添加script

    在网页开发中，有时我们需要在页面加载过程中动态地向`&lt;head&gt;`标签内添加`&lt;script&gt;`元素，以便实现异步加载脚本、延迟加载或按需加载等功能。这种技术对于优化网页性能、减少首屏加载时间以及提高用户体验至关重要。...

    您应该了解的独特 HTML 属性

    8. 异步：async 属性与 &lt;script&gt; 元素一起使用，指示脚本应该异步执行。例如：&lt;script async src="myscript.js"&gt;&lt;/script&gt; 该属性可以应用于脚本加载优化、页面性能优化等场景，提高页面加载速度。 9. 接受属性：...

    【第八章】JavaScript【Script标签与访问HTML页面(2)】

    【第八章】JavaScript【Script标签与访问HTML页面(2)】这一主题主要涵盖了JavaScript在网页中的应用，特别是关于`&lt;script&gt;`标签的使用以及如何通过JavaScript来操作和访问HTML页面内容。JavaScript是一种广泛用于Web...

    06-defer和async.md

    在前端技术领域，理解`&lt;script&gt;`标签的`defer`和`async`属性的区别是开发中常见的需求，这关系到页面加载性能和脚本执行顺序。本篇文档围绕这两个属性进行解释，并扩展到前端面试相关的知识点。 ### defer和async的...

Magicbox
Global site tag (gtag.js) - Google Analytics