浏览器加载资源顺序?

预先知识:

浏览器加载的时候是自上而下的,加载和渲染为同步进行

加载不会阻塞下载,解析会阻塞下载

js解析的时候会阻塞其他的加载

一般浏览器会在后面解析js文件,因为js中的代码很有可能改变dom树的结构

 

浏览器的加载一般顺序为:

  1. 将资源分类
  2. 安全策略检查
  3. 资源优先级计算
  4. 根据优先级下载资源

 

资源分类:

  • 主资源 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 → 媒体 → ...

 

待续...

 

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值