浏览器加载资源顺序？

最新推荐文章于 2025-10-15 20:49:13 发布

原创最新推荐文章于 2025-10-15 20:49:13 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ

文章标签：

#HTTP #HTTP

面试专栏收录该内容

4 篇文章

订阅专栏

预先知识：

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

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

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浏览器中查看解析执行的顺序：