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