关于Js脚本的延迟执行

时间:2021-02-13 01:51:59

  关于标签,我们有一般会放在两个地方,一个是在标签的内部,另一个是放在前面。这一次我们着重讲解一下放在标签内部。在我们用Js操作DOM元素时,如果不延时执行,DOM元素其实是根本还没有被渲染出来的。所以各种getElementByIdgetElementsByTagName实质上是获取不到的,也谈不上如何进行Style样式的修改或者更多的操作。所以当我们把Js脚本放在了标签里,我们需要延时执行Js脚本文件。


1、标签属性deferasync

  这个是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事件,因为这会导致延迟很久才执行,造成用户体验不佳。所以我们什么时候用DOMContentloadedload,我们要作出一个选择。


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

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