关于Js脚本的延迟执行

  关于标签，我们有一般会放在两个地方，一个是在标签的内部，另一个是放在前面。这一次我们着重讲解一下放在标签内部。在我们用Js操作DOM元素时，如果不延时执行，DOM元素其实是根本还没有被渲染出来的。所以各种

getElementById

、

getElementsByTagName

实质上是获取不到的，也谈不上如何进行Style样式的修改或者更多的操作。所以当我们把Js脚本放在了标签里，我们需要延时执行Js脚本文件。

1、标签属性

defer

和

async

  这个是HTML5的属性，在标签内部标注了

defer

或者

async

。我们来看一下这两个属性是做什么的。

async属性：Js脚本加载和文档渲染是异步进行的， 但当脚本加载完成后便执行。所以当两个外部脚本都有这个属性的时候，我们是无法确定哪个文件先执行，很难解决依赖问题。

defer属性：Js脚本加载和文档渲染也是异步进行的，不同的地方是，它是等DOM元素渲染完后才会执行。并且按照HTML标准规定，它是会按顺序执行的，并且是在

DOMContentLoaded

这个事件触发之前发生。这个会更符合我们的实际要求。

2、关于这个

DOMContentLoaded

事件

  这个事件我们是用过挺多的，例如Jquery里的

ready

事件。这个事件就是当DOM元素渲染结束后触发的，和

load

事件不同，

load

事件我接下来会说。那我们该怎么使用这个事件呢，当然也是很简单的啦，直接看看代码。

document.addEventListener("DOMContentLoaded", function(){
/* 放置代码 */
}, false);

3、最后一个

load

事件

  在这个

load

事件里，会在DOM元素渲染并加载完毕后才会触发。那在实际到底加载完毕是指的什么呢，最明显的就是加载图片。如果仅仅是DOM渲染后便去获取图片的宽度，图片是完全没有加载完的。所以这个时候我们需要用

load

事件，这个事件会在图片加载完后触发。但是如果我们不需要图片加载后再执行Js脚本，我们最好不使用

load

事件，因为这会导致延迟很久才执行，造成用户体验不佳。所以我们什么时候用

DOMContentloaded

和

load

，我们要作出一个选择。

  最后，我们习惯把Js脚本放在前是最好的，它是会在DOM渲染后便执行，可以兼容更多旧的浏览器。

哎哟用Markdown好辛苦，写的东西感觉都怪怪的，调皮不起来了~~看来要多练习