Script标签里的defer属性，您知多少 _Web前端

Script标签里的defer属性，你知多少？
先看下面三段代码，写出你认为的输出结果？

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

你一定对第二种很感兴趣，在第二段代码中，script标签的加载顺序跑在了它下面的button后面，这里要讲解script标签中的defer属性。

先摘录一段貌似官方的说法：

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

其实我们一般的写法中也有defer属性的，只不过它的默认值是false，比如

<script src="aaa.js"></script>

它等价于

<script src="aaa.js" defer=false></script>

我们可以显示的定义defer

<script src="aaa.js" defer></script>

或者是

<script src="aaa.js" defer=true></script>

当然了，好处就是那个官方的说法，浏览器不会立即对其进行处理，这样的好处是提高载入代码的性能，不过用defer有几点需要注意的

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

2、而且，不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。
加上defer等于在页面完全在入后再执行，相当于 window.onload，但应用上比window.onload更灵活！下面举个defer的实际应用，通常我们说eval是邪恶的，eval is evil，那么有了这个defer属性，我们就可以打造属于自己eval方法

var eval = function() {
	var h = document.getElementsByTagName('HEAD').item(0);
	var s = document.createElement( "script" );
	s.language = "javascript";
	s.type = "text/javascript";
	[color=red]s.defer = true;[/color]


	s.text = this;
	h.appendChild( s );
};

具体参见http://pldream.com/b/?post=63