一:测试脚本的放置顺序对元素加载的影响
(Chrome)
01:我们更改script的加载时间为20秒放在三个css文件的前面,
最后结果是
我们可以看到先加载完成index.html 然后接着是图片和css,但是页面始终是白屏,这是因为script放在了页面dom等元素的前面导致阻塞后面内容的呈现。只有当js加载完成并立即执行后页面内容才能呈现到用户面前。
那这里就有个问题:为什么我看到是css先加载完成的,那为什么页面时白色的?因为script影响了css的计算,只有当script获取到才能进行页面的绘制。
02:那css为什么要放前面?是因为我希望css优先加载。那假如我们把css放在后面会发生什么?
可以看到浏览器先加载完成html和图片以及三个css文件后没有展示页面,当前是白屏状态,但是加载完成js文件后才立即呈现到用户面前,所以css不优先执行会被js给阻塞导致白屏时间长等bug。
(Firfox)
我们知道Chrome和Firfox的加载机制不同
Chrome是白屏加载,而Firfox是无样式内容闪烁
意思就是火狐浏览器会先显示已经加载完成DOM树,然后逐步加载无样式的内容,等css加载完成后突然展现样式。而谷歌浏览器是会同时加载html和css分别构建dom树和cssom树等两者构建完成之后绘制渲染树,然后页面显示。所以Chrome的后果是用户看到的都是最终渲染完成的。而火狐我们可以看到为未渲染的html。
测试脚本的放置顺序对元素加载的影响、
可以看到Firfox是先加载完成html然后加载完成一个css就执行一个css,页面就渲染一次。