预先知识：
浏览器加载的时候是自上而下的，加载和渲染为同步进行
加载不会阻塞下载，解析会阻塞下载
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 → 媒体 → ...
待续...
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
