引言问题

<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>

 

好了总结完毕，了结了心腹大患，睡觉。

有疑问可以评论博客。

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

 

版权声明：本文为wuguanglin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wuguanglin/p/JSAndImgLoadOrder.html