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

2018-06-24 01:57:39来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

引言问题

<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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:node.js环境下写的vue项目

下一篇:styled-components真的好吗?