Web网页中资源加载的优先级详解

Web 开发中，资源加载的优先级是一个重要的优化点，可以显著影响网页的加载速度和用户体验。浏览器会根据一定的规则来决定哪些资源应该优先加载。以下是关于资源加载优先级的详解：

### 1. 浏览器的资源加载顺序

浏览器在解析 HTML 文档时，会按照以下优先级加载资源：

- **HTML**：HTML 文档本身是最先被加载的，因为它是页面的基础结构。

- **CSS**：CSS 文件通常优先于大多数其他资源进行加载，因为它们影响页面的渲染。

- **JavaScript**：JavaScript 的加载优先级通常较低，特别是在不影响页面初始渲染的情况下。

- **Images**：图片的加载优先级通常较低，尤其是那些不在可视区域内的图片。

### 2. 影响加载优先级的因素

- **位置**：资源在 HTML 中的位置会影响其加载优先级。例如，`<link>` 和 `<script>` 标签位于 `<head>` 中的资源会比位于 `<body>` 末尾的资源更早加载。

- **异步与延迟**：使用 `async` 和 `defer` 属性可以改变 JavaScript 的加载和执行顺序。

- `async`：异步加载并立即执行脚本，不会阻塞 HTML 解析。

- `defer`：异步加载但会在 HTML 解析完成后按顺序执行。

- **预加载和预获取**：使用 `<link rel="preload">` 和 `<link rel="prefetch">` 可以显式地告诉浏览器应该提前加载或获取某些资源。

### 3. 示例代码

```html

<!DOCTYPE html>

<head>

<title>Resource Loading Priority</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

```

- **逻辑解释**：在这个示例中，CSS 样式表首先加载，`large-image.jpg` 被预加载以便页面渲染时更快显示，JavaScript 脚本在 HTML 完全解析后按顺序执行。

### 4. 相关主题

1. **性能优化**：

- 合理设置资源加载的优先级可以显著提升网页性能。

2. **Critical Rendering Path**：

- 了解和优化关键渲染路径有助于减少首次渲染时间。

3. **HTTP/2 多路复用**：

- HTTP/2 的多路复用特性允许多个请求同时通过单个连接传输，提升资源加载效率。

4. **Lazy Loading**：

- 对于图片和 iframe 等资源，使用懒加载（Lazy Loading）可以推迟资源加载，减少初始加载时间。

5. **Content Delivery Network (CDN)**：

- 使用 CDN 可以加速资源加载，通过更靠近用户的节点提供静态资源。

通过了解和优化资源加载优先级，可以显著提升网页的加载速度和用户体验，特别是针对移动设备和低带宽环境。

我的文章可能还有不足之处，如有不同意见，请留言讨论。

能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。

原理解析

那么为什么会出现上面的现象呢？我们从浏览器的渲染过程来解析下。

不同的浏览器使用的内核不同，所以他们的渲染过程也是不一样的。目前主要有两个：

webkit渲染过程

Gecko渲染过程

从上面两个流程图我们可以看出来，浏览器渲染的流程如下：

HTML解析文件，生成DOM Tree，解析CSS文件生成CSSOM Tree
将Dom Tree和CSSOM Tree结合，生成Render Tree(渲染树)
根据Render Tree渲染绘制，将像素渲染到屏幕上。

从流程我们可以看出来

DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。
然而，由于Render Tree是依赖于DOM Tree和CSSOM Tree的，所以他必须等待到CSSOM Tree构建完成，也就是CSS资源加载完成(或者CSS资源加载失败)后，才能开始渲染。因此，CSS加载是会阻塞Dom的渲染的。
由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

DOMContentLoaded

对于浏览器来说，页面加载主要有两个事件，一个是DOMContentLoaded，另一个是onLoad。而onLoad没什么好说的，就是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。

而DOMContentLoaded，顾名思义，就是当页面的内容解析完成后，则触发该事件。那么，正如我们上面讨论过的，css会阻塞Dom渲染和js执行，而js会阻塞Dom解析。那么我们可以做出这样的假设

当页面只存在css，或者js都在css前面，那么DomContentLoaded不需要等到css加载完毕。
当页面里同时存在css和js，并且js在css后面的时候，DomContentLoaded必须等到css和js都加载完毕才触发。

我们先对第一种情况做测试：

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>css阻塞</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script>
 document.addEventListener('DOMContentLoaded', function() {
 console.log('DOMContentLoaded');
 })
 </script>
 <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
 </head>
 <body>
 </body>
</html>

实验结果如下图：

从动图我们可以看出来，css还未加载完，就已经触发了DOMContentLoaded事件了。因为css后面没有任何js代码。

接下来我们对第二种情况做测试，很简单，就在css后面加一行代码就行了

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>css阻塞</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script>
 document.addEventListener('DOMContentLoaded', function() {
 console.log('DOMContentLoaded');
 })
 </script>
 <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
 <script>
 console.log('到我了没');
 </script>
 </head>
 <body>
 </body>
</html>

实验结果如下图：

我们可以看到，只有在css加载完成后，才会触发DOMContentLoaded事件。因此，我们可以得出结论：

如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完后才执行。
其他情况下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。

总结

由上所述，我们可以得出以下结论:

css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行、

因此，为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法:

使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)
合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

今的网络中，页面加载速度是最重要的网站指标之一。即使是毫秒也会对用户体验、产品产生巨大影响，而缓慢的页面加载会轻易的的降低转化率。您可以采用许多工具和技术来加快网站速度。在本文中，我们将介绍可用于改善前端性能的最佳CSS优化技巧。

1.查找性能瓶颈

所有优化中最重要的事情是从全面诊断开始。幸运的是，有许多CSS诊断工具可以帮助您发现任何性能瓶颈。首先，您可以使用网络浏览器的DevTools检查资产加载的速度。在大多数浏览器中，您可以通过按F12按钮打开DevTools 。

例如，在Firefox DevTools中，可以使用“ 网络”选项卡检查页面加载的所有CSS文件的大小和加载时间。您还可以测试使用和不使用缓存时CSS加载的速度。由于DevTools还显示了外部CSS，例如Google字体文件和从第三方CDN提取的CSS资源，因此您可以找到许多您以前都不知道的资源。

Pingdom Tools和Google提供的Lighthouse是开发人员经常用来分析网站速度和前端性能的另外两个免费工具。例如，如果您运行简单的网站速度测试，则Pingdom Tools会为您提供一些有用的CSS优化技巧。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

2.缩小和压缩CSS文件

大多数网站都依赖多个CSS文件。尽管在大多数情况下，模块化CSS被认为是最佳实践，但是加载所有文件可能需要一段时间。但是，这正是CSS缩小和压缩工具存在的原因。如果您适当地使用它们，则可以大大缩短页面加载时间。

有一些在线工具，例如CSS Minify，可让您通过将其复制粘贴为简单形式来缩小CSS文件的大小。这种类型的工具可以与较小的项目很好地配合。但是，对于带有多个CSS文件的大型项目，使用它们会变得很麻烦且耗时。在这种情况下，最好选择自动化解决方案。

如今，大多数构建工具可让您在代码库上自动执行压缩。例如，默认情况下，Webpack将所有文件作为缩小的包返回。PostCSS还具有诸如CSS Nano之类的智能插件，它们不仅可以缩小文件的大小，还可以通过许多有针对性的优化来运行它。

3.使用Flexbox和CSS网格

如果在编写CSS时仍仅依靠传统的框模型，并使用边距，填充和浮点在屏幕上对齐项目，则应考虑采用更现代的布局模块，即flexbox和CSS Grid。这些新模型使您可以用更少的代码来实现复杂的布局。

使用较旧的技术，您甚至需要进行许多技巧和调整，即使是比较简单的事情，例如将项目垂直居中。但是，flexbox和CSS Grid并非如此。尽管拾取新的布局模块可能要花费一些时间，但还是值得的，因为CSS文件要小得多。flexbox尤其如此，到目前为止，flexbox具有相当不错的浏览器支持（目前全球支持 98.3％）。

尽管浏览器对CSS Grid的支持还不够完善（目前占全球的92.03％），但如果不必支持旧版浏览器或愿意提供后备功能，则仍然可以使用它。

4.使用<link>标记代替@import规则**

您可以使用两种主要技术来使网页加载CSS文件：

使用<link>标记将它们添加到HTML页面的<head>部分，

使用*@import *CSS规则从其他样式表导入它们。

您需要将@import规则添加到主CSS文件的顶部。在大多数情况下，它用于加载较小的资源，例如字体和其他设计元素。最初，这似乎是一个不错的解决方案，但是，与HTML页面使用<link>标记直接加载样式表相比，浏览器加载额外的样式表所花的时间要长得多。

当您在HTML页面中添加多个CSS文件时，请务必注意CSS特殊性。首先添加最通用的样式表，然后再选择更具体的样式表。您需要这样做，因为以后添加的样式表会覆盖以前的CSS文件的规则。例如，以下示例以正确的顺序添加CSS文件时：

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="component.css">

5.使用渐变和SVG代替图像

将所有图像加载到网页上可能要花费大量时间。开发人员使用许多图像优化技术来减轻这种影响，例如从外部CDN加载图像或使用诸如TinyJPG之类的图像压缩工具。这些解决方案可以提供很多帮助，但是很多时候，您都可以使用原生CSS效果替换大量资源的JPG和PNG图像。

例如，您可以使用渐变来代替背景图像，而背景图像可能会大大降低用户浏览器的速度。您可以使用CSS的渐变功能来创建线性，径向和重复渐变。使用这些CSS原生功能，您不仅可以定义颜色，还可以定义渐变的角度。

例如，以下规则创建了一个很好的渐变背景，其加载速度比任何图像都要快：

div {
    background: linear-gradient(45deg, lightgreen, royalblue);
}

对于更复杂的渐变和纹理，还可以使用CSSmatic（在下图显示）和ColorZilla这样的生成器。

除渐变外，您还可以使用可缩放矢量图形（SVG）替换传统的JPG和PNG图像。它们不仅加载速度更快，而且您只需要包含该图像的一个版本。这是因为SVG由于其向量性质而可以按比例放大到任何大小而没有任何质量损失。此外，您也可以使用CSS设置SVG的样式，就像普通的HTML文件一样。

6.避免重要规则

尽管！important规则在某些情况下可能是天赐之物，但您仅应将其作为最后的选择。此规则从级联中创建一个异常。因此，当您在CSS声明中添加！important时，它将覆盖所有其他声明，即使是那些具有更高特异性的声明。它的语法如下所示：

h1{
  margin-bottom: 20px!important;
}

如果CSS中有太多重要规则，则用户的浏览器将不得不对代码进行额外的检查，这可能会大大降低页面速度。根据经验，切勿在整个站点范围的CSS或创建主题或插件时使用！important。如果可能，请仅在要覆盖来自第三方库的CSS时使用它。

7.考虑CSS重构

尽管CSS重构很少是一件容易的事，但在许多情况下，它可以显着提高网站性能。例如，如果CSS文件太大，或者您继承了旧版代码库，或者页面加载时间很差，严重损害了转换率。CSS重构的目标是使代码更整洁，更可维护并且加载更快。

CSS重构是一个多步骤的过程，在此过程中，您需要分析CSS代码库的各个方面。您需要检查几件不同的事情，例如：

无论您有未使用或重复的CSS规则或资源，

是否可以利用Flexbox和CSS网格等更现代的技术，

是否使用过多的特异性（可以使用此视觉特异性计算器进行计算），

CSS文件的结构是否合理（例如，维护较小的文件比维护较大的文件更容易），

是否值得使用自动构建工具，

还有很多其他

在开始重构之前，还应设置可衡量的目标并选择要使用的基准，例如页面加载时间或第一个有意义的绘制，以便您可以比较它们的前后值。

同样不要忘记使用版本控制工具，例如Git。这样，如果出现任何问题，您可以返回到以前的代码版本。

包起来

您可以使用许多CSS优化技巧来改善网站的性能。它们中的大多数易于实现，但会对页面加载时间产生重大影响。更快的加载页面不仅可以增强用户体验，还可以帮助您在Google和其他搜索引擎中获得更好的排名。

除了CSS优化最佳实践之外，您还可以使用许多其他技术来提高加载速度，例如缓存，Google AMP和HTTPS协议。

作者：游X鱼
链接：https://www.jianshu.com/p/69198ac60e53

在线咨询

上一篇：常见视频格式解析与区别
下一篇：JSP：优缺点、生命周期的核心4步、基于生命周期的代

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web网页中资源加载的优先级详解

原理解析

DOMContentLoaded

总结

您的项目需求