关于标签,我们有一般会放在两个地方,一个是在标签的内部,另一个是放在前面。这一次我们着重讲解一下放在标签内部。在我们用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好辛苦,写的东西感觉都怪怪的,调皮不起来了~~看来要多练习