Javascript 的 Defer 属性

文章出处：http://www.cftea.com/c/2009/11/SVQAUJN25SI02Z6A.asp

 

Script 中的 Defer 属性

如果你是一个对系统性能比较关心和在意的人，我想你应该会对 Script 脚本中的 defer 属性感兴趣的。

script 中的 defer 属性默认情况下是 false 的。按照 DHTML 编程宝典中的描述，对于 Defer 属性是这样写的：

Using the attribute at design time can improve the download performance of a page because the browser does not need to parse and execute the script and can continue downloading and parsing the page instead.

也就是说：如果是编写脚本的时候加入 defer 属性，那么浏览器在下载脚本的时候就不必立即对其进行处理，而是继续对页面进行下载和解析，这样会提高下载的性能。

这样的情况有很多种。比如你定义了很多 javascript 变量，或者在引用文件（.inc）中写了很多的脚本需要处理，那不妨在这些脚本中加入 defer 属性，对性能的提高肯定有所帮助。

举例如下：

<script language="javascript" defer>

var object = new Object();

....

</script>

因为 defer 属性默认是为 false 的，那么在这里

<script language="javascript" defer>

显式声明 defer 属性后等同于

<script language="javascript" defer=true>

声明了 defer 属性之后，需要判断是否有别的变量引用了 defer 脚本块中的变量，否则的话会导致脚本错误的产生。

引用

DEFER 是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它，但是看完这里的介绍后，相信你就离不开它。它告诉浏览器 Script 段包含了无需立即执行的代码，并且，与 SRC 属性联合使用，它还可以使这些脚本在后台被下载，前台的内容则正常显示给用户。

最后请注意两点：

1、不要在 defer 型的脚本程序段中调用 document.write 命令，因为 document.write 将产生直接输出效果。

2、而且，不要在 defer 型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活！

比较下面的 3 个例子：

<button id="myButton" onclick="alert('ok')">test</button>

<script>

myButton.click();

</script>

<script defer>

myButton.click();

</script>

<button id="myButton" onclick="alert('ok')">test</button>

<script>

myButton.click();

</script>

<button id="myButton" onclick="alert('ok')">test</button>