页面js脚本与img等资源的下载顺序问题。

引言问题

<img src="background.jpg">
<script src="test.js"></script>

test.js和background.jpg是并行下载，还是test.js先下载后执行完成后再下载background.jpg???

<script src="test.js"></script>
<img src="background.jpg">

这样呢？

我会在文章最后给出解答。

之前都只了解了大概，没有深入地做测试验证他人所说，这次一定要整的明明白白。

浏览器的渲染引擎

script

值得一提的是js外部脚本的加载方式

没有defer、async属性时

值得注意的是对于多个script标签，比如

<script src="a.js"></script>
<script src="b.js"></script>

有defer属性，并行下载完后等到页面解析完后执行

有async属性，也就是并行下载完后就执行

 此外这里还有他人总结的一份笔记，写的挺好的。

题目解答

回到之前的题目上，按照阮一峰博客解释，传统情况下，应该是这样的：

1.当script在img标签前时，js会阻塞img的下载，js文件会先下载，下载后执行，执行完成后再下载img.

因为解析到script标签时，页面会暂停解析，将网页渲染的控制权会交给js引擎，js文件下载完成后执行，执行完成后控制权交还渲染引擎，恢复往下解析，然后解析到img标签就下载img

<script src="test.js"></script>
<img src="background.jpg">

测试结果（蓝色为下载时间）

2.当img在script标签前时，img文件是异步下载，不会阻塞js的下载，会和js一起并行下载

因为link,img等都是异步下载。

<img src="background.jpg">
<script src="test.js"></script>

然而今天我去问了下大佬，大佬说，

下载脚本不阻塞，执行才会阻塞，只是阻塞渲染

传统结果是这样的，但是现代浏览器会尝试所有的资源都尽快的加载，测试时可以看到并行的结果

然后我又去测试了下，发现不管是img在前还是js在前都有出现并行下载的情况，也证实了大佬的说法

总结

浏览器实际渲染过程：

1.解析整个html文档（HTML代码解析为DOM，CSS代码解析为CSSOM（CSS Object Model））

2.解析过程中遇到外部脚本和资源就异步下载，下载好后缓存。

3.将dom和cssom构建成渲染树（解析文档的过程就已经开始构建渲染树了）--------渲染树构建完成则触发DOMContentLoaded事件

4.根据渲染树渲染页面（计算布局、绘制页面）

5.渲染过程中遇到script节点（不含defer和async）时，暂停渲染，执行js脚本。

　　如果是异步脚本，则不会阻塞渲染：

• 如果脚本带有defer属性，则不会执行，需要等到页面渲染完成再执行。
• 如果脚本带有async属性，则下载完后就执行，不需要等到页面渲染完成再执行，并且不会暂停渲染。（因此不要在异步脚本中操纵dom）

6.继续渲染直到完成。--------页面渲染完成则触发load事件

以上过程并非严格按照顺序执行，第一步还没完成，第二第三步可能就已经开始了。第二第三步还没完成，第四步就已经开始了

感谢大佬的指导@箫秦

参考了阮一峰的浏览器环境概述：http://javascript.ruanyifeng.com/bom/engine.html

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有