仰望星空的天台

0%

html、css、js加载顺序问题

不包含js的html加载

当我们的页面只包含css、html和图片的时候,浏览器允许css和html还有图片并行加载,即使图片或者css还没有加载完成, html也可以提前加载完成,只要等图片或者css加载完成后,根据对应的id、css 或者url 来放到对应的DOM结点位置上就可以。

也就是说,css 图片的加载不需要一棵稳定的DOM树

包含js的html加载

但是如果页面中存在js,那么在加载js的过程中,浏览器不会允许css 图片 和 html 并行加载,也就是说,加载js是同步的。

原因是,js可以改变结点结构,如果,先让图片 和 css 加载完成后, js中的代码改变了html的结构,浏览器就不知道将加载好的图片或css丢到那个结点了,

所以,加载js的时候浏览器不允许其他资源进行加载,html要么在js前面加载,要么在js加载完后加载,

但是,js十分庞大的时候,html没加载的话,会导致页面有一段空白期,用户可能看到白页以为网速慢,就没有耐心在等下去了

这也就是为什么js的script标签需要放到html的后面的原因

Table of Contents