script defer属性

定义和用法

defer最初是从 html4.0 标准中诞生出的概念,最早只有 ie 浏览器提供支持。
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。
如果您的脚本不会改变文档的内容(非 document.write 方法来创建当前的文档内容),可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。用defer可以避免脚本加载阻塞从而提高页面下载和解析的速度。

使用

script中的defer属性默认情况下是false的。
defer既可用于载入js文件,也可用于行内脚本。
加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!实际上 defer 更接近于 DomContentLoad。
事实上脚本执行于onload事件之前,即文档载入后即执行,不用等于包括图片在内的资源下载完毕。

实例

<script type="text/javascript" defer>
alert(document.getElementById("p1").firstChild.nodeValue);
</script>

注意

请注意两点:
1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。
2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。 声明了defer属性之后,需要判断是否有别的变量引用了defer脚本块中的变量,否则的话会导致脚本错误的产生。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>defer test</title>
</head>
<body>
<script defer>
alert('defer');
</script>
<script>
alert('script');
</script>
<script>
window.onload=function(){
alert('onload');
}
</script>
</body>
</html>

按照这个例子的话,如果浏览器支持defer,那么应该会按照”script –> defer –> onload”这样的顺序显示

chrome支持defer属性,但并不按照上面顺序执行。

浏览器的测试结果:

opera 11 “defer –> script –> onload”(支持,但顺序不一致)

safari 5.0 “defer –> script –> onload” (支持,但顺序不一致)

ie8 “script –> defer –> onload” (顺序一致)

ie6 “defer –> script –> onload” (支持,但顺序不一致)

chrome 17.0.963.26 “defer –> script –> onload” (支持,但顺序不一致)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>