引言问题
- <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
来源: https://www.cnblogs.com/wuguanglin/p/JSAndImgLoadOrder.html