htmlcssjs三者的加载顺序

Posted smy225

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了htmlcssjs三者的加载顺序相关的知识,希望对你有一定的参考价值。

页面的加载顺序时从上往下加载的:

1、DOM树加载到llink标签

css文件的加载和DOM树的加载是可以同时进行的,也就是说,css在加载时DOM树还在继续构建。

这个过程中如果遇到css样式或者img,会向服务器发送一个请求,待资源返回后,将其添加到DOM中的相应位置。

2、DOM树加载到script标签

由于JS是单线程模式,因此不会与DOM并行加载,因此需要等到整个js文件加载完后再继续加载DOM。倘若JS文件过大,则可能导致浏览器页面显示滞后,出现“阻塞效应”。

.JS阻塞其他资源加载的原因是:浏览器为了防止js修改DOM树,需要重新构建DOM树的情况出现

3、解决方法 

前提:JS是外部脚本

在script标签中添加 defer=“ture”,则会让js与DOM并行加载,待页面加载完成后再执行js文件,这样则不存在阻塞;

在scirpt标签中添加 async=“ture”,这个属性告诉浏览器该js文件是异步加载执行的,也就是不依赖于其他js和css,也就是说无法保证js文件的加载顺序,但是同样有与DOM并行加载的效果;

同时使用defer和async属性时,defer属性会失效;

可以将scirpt标签放在body标签之后,这样就不会出现加载的冲突了。

以上是关于htmlcssjs三者的加载顺序的主要内容,如果未能解决你的问题,请参考以下文章

htmlcssjs文件加载顺序及执行情况

htmlcssjs文件加载顺序及执行情况

java中的静态代码块、代码块、构造器的执行顺序是怎样呢,这三者有啥作用呢

Java构造方法成员变量初始化以及静态成员变量初始化三者的先后顺序是什么样的?

java 成员变量 静态成员变量 方法 静态方法初始化顺序

idea修改htmlcssjs不能同步加载的解决办法