javascript中的defer是什么？

今天看到stackoverflow上的这样一个问题（问题链接），大概是说用jQuery获取不到元素，这是我们刚开始接触javascript常常会碰到的问题，回答者列举了4中方法去解决获取不到元素的问题。

前三种我们应该都很熟悉：

1.将脚本放在要获取的元素的下面；

2.使用window.onload；

3.使用事件委托；

4.使用<script>标签的defer属性；

我在看这个问题前，还真的不知道script标签有这么一个属性，写法是这样的：

<script src="http://gh-canon.github.io/misc-demos/log-test-click.js" defer></script>

简单的在script标签中加上defer，这是HTML5的写法，也可以写成defer=true；

那么这个属性的作用是什么呢？

我们知道HTML的加载是同步的，如果我们把一个script标签写在页面的最顶端，页面加载时会先加载这个script标签，再执行这个脚本，然后再继续往下加载页面，如果我们的脚本文件过大，这会使我们的网页看起来很慢。

其实defer属性，你可以想象成和jQuery中的ready()类似，都是等到页面元素结构加载完毕再执行脚本，但是ready()在第一次加载时，浏览器就已经编译了ready()中的所有脚本内容，但是带有defer属性的script标签加载进来的脚本文件并不会立刻编译，而是等到页面元素结构加载完毕再去编译和执行，这样就大大加速了页面的加载速度。

当然，我们得考虑到脚本间的依赖关系，所以defer并没有想象中的那么好用，而且要IE10及以上才识别这个属性。还有一点要注意，defer只能用于外部脚本，即那些具有src属性的script标签。

 

转载于:https://www.cnblogs.com/chinajins/p/5796135.html