预先知识:
浏览器加载的时候是自上而下的,加载和渲染为同步进行
加载不会阻塞下载,解析会阻塞下载
js解析的时候会阻塞其他的加载
一般浏览器会在后面解析js文件,因为js中的代码很有可能改变dom树的结构
浏览器的加载一般顺序为:
- 将资源分类
- 安全策略检查
- 资源优先级计算
- 根据优先级下载资源
资源分类:
- 主资源 html
- 图片
- css
- js
- 字体
- ajax
- svg
- 引入的html资源
- 多媒体资源,视频等
浏览器加载资源的顺序:
- 最高级:html,css,font
- 然后:js,xhr
- 然后是多媒体:图片-语音-视频
- 最后:prefetch预加载的资源
根据实际的规则,浏览器会对加载的资源顺序有所调整:
- 同步的xhr请求优先级最高
- 如果图片的视图在可见范围之内,优先加载图片
测试:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="./index.css">
<script type="text/javascript"></script>
</head>
<body>
<embed height="100" width="100" src="./img/music/1.mp3"></embed>
<img src="./img/1.png">
<img src="./img/2.png">
<img src="./img/3.png">
<img src="./img/4.png">
<img src="./img/5.png">
<img src="./img/6.png">
<img src="./img/7.png">
<img src="./img/8.png">
<img src="./img/9.png">
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
chrome浏览器中查看解析执行的顺序:
虽然mp3文件放在了img的前面,但是解析的时候还是优先解析了图片资源。此时的图片在可视的视图之内。
由此可见,浏览器解析资源的一般顺序为:
html → css → 可视化图片 → js → 媒体 → ...
待续...