Web 性能
为什么要优化 Web 性能? 或者说 Web 速度为什么很重要?
总结一下 web.dev(性能)这篇文章这几点(建议阅读原文,其中有不少案例).
- 关乎用户留存率
- 提高转化次数
- 用户体验
相比于加载速度缓慢,加载速度快并能及时响应用户输入的网站能更好地吸引并留住用户。性能不佳可能会 对业务成果产生负面影响.
速度慢的网站会对收入产生不利影响，而速度较快的网站可以提高转化率并改善业务成果.
网页加载速度延迟的网站可能会让用户感受到压力.
衡量网页指标
- Largest Contentful Paint (LCP) 最大内容绘制： 衡量加载性能。为了提供良好的用户体验，LCP 应在网页首次开始加载后的 2.5 秒内发生。
- Interaction to Next Paint (INP)：衡量互动。为了提供良好的用户体验，网页的 INP 应不超过 200 毫秒。
- Cumulative Layout Shift (CLS)：衡量视觉稳定性。为了提供良好的用户体验，网页应将 CLS 保持在 0.1 或更低。
- First Contentful Paint (FCP) 首次内容绘制 从网页开始加载到网页任何部分的内容呈现在屏幕上所用的时间。
- (TTFB)加载第一个字节所需时间 网络使用资源的第一个字节响应用户请求所需的时间。
如何测量速度？
在Chrome 开发者工具中可以使用lighthouse来分析当前网页性能.
在PageSpeed Insights中输入网址,可以分析你的网页性能.给出评分和建议. webpagetest会识别阻塞渲染和解析器的资源.
关键路径
关键路径是指网页开始在浏览器中呈现之前所涉及的步骤,为了呈现网页，浏览器需要 HTML 文档本身以及呈现该文档所需的所有关键资源。
渐进式渲染
浏览器不会等待所有的资源下载完成才渲染网页,浏览器非常擅长渐进式渲染.
关键渲染路径
浏览器在执行初始渲染之前执行的一系列步骤称为“关键渲染路径”。
了解关键渲染路径可确保您不会过度地阻止初始网页渲染，从而帮助您提高网页性能。但同时，也请务必从关键渲染路径中移除首次渲染所需的资源，以免过早地进行渲染。
- 通过 HTML 构建文档对象模型 (DOM)。
- 通过 CSS 构建 CSS 对象模型 (CSSOM)。
- 应用任何会更改 DOM 或 CSSOM 的 JavaScript。
- 通过 DOM 和 CSSOM 构建渲染树。
- 在页面上执行样式和布局操作，看看哪些元素适合显示。
- 在内存中绘制元素的像素。
- 如果有任何像素重叠，则合成像素。
- 以物理方式将所有生成的像素绘制到屏幕上。
.不过通过上面图片可以对网页渲染有一个简单的了解.
关键渲染路径上的资源
浏览器需要等待一些关键资源下载完毕，然后才能完成初始渲染。这些资源包括：
-
HTML 的一部分。
-
<head>元素中阻塞渲染的 CSS。 -
<head>元素中的阻塞渲染的 JavaScript。 在首次渲染时，浏览器通常不会等待： -
所有 HTML。
-
字体。
-
Images.
-
<head>元素外（例如，位于 HTML 末尾的<script>元素）之外的非阻塞渲染的 JavaScript。 -
<head>元素外或media 属性值不 适用于当前视口的 CSS，不会阻止内容渲染。
阻塞渲染的资源
CSS 默认会阻塞渲染,浏览器在完成对该 CSS 的下载和处理之前，将避免呈现更多内容。尽管 CSS 默认会阻塞渲染,但也可以通过更改 <link> 元素的 media 属性来指定与当前条件不匹配的值，将其转换为不阻塞渲染的资源：<link rel=stylesheet href="..." media=print>。 以允许非关键 CSS 以不阻塞渲染的方式加载。
阻塞解析器的资源
阻塞解析器的资源是指那些阻止浏览器通过继续解析 HTML 来寻找要执行的其他工作的资源。默认情况下，JavaScript 会阻塞解析器（除非明确标记为异步或延迟），因为 JavaScript 可能会在执行时更改 DOM 或 CSSOM.
优化资源加载
CSS
CSS 是一种阻止呈现的资源,因此优化 CSS 可能会对整体网页加载时间产生重大影响。
-
缩减大小 简而言之就是通过压缩css文件里面的空格或其他不可见的字符使得压缩后的文件大小变小。现在工程化框架在build后 会自动压缩css文件。
-
避免使用 CSS @import 声明 HTML
<link>元素是 HTML 响应的一部分，因此会比通过 @import 声明下载的 CSS 文件更早地被发现。
JavaScript
JavaScript 作为影响网页解析的资源.加载不带 defer 或 async 属性的 <script> 元素时，浏览器会阻止解析和呈现，直到脚本下载、解析并执行完毕。同样，内联脚本也会阻止解析器，直到解析和执行脚本。
图片来自html.spec.whatwg.org
使用 async 加载的脚本会在下载后立即解析和执行，而使用 defer 加载的脚本会在 HTML 文档解析完成时执行 - 这与浏览器的 DOMContentLoaded 事件同时发生。此外，async 脚本可能会不按顺序执行，而 defer 脚本则会按照它们在标记中出现的顺序执行。
默认情况下，使用 type="module" 属性加载的脚本会处于延迟状态，而使用 JavaScript 将 <script> 标记注入 DOM 中加载的脚本则像 async 脚本。
- 拆分代码 与css类似,使用构建工具打包时会自动压缩js文件使得脚本变得更小。
通过资源提示更快的加载资源
- 资源提示可以告知浏览器如何加载资源并确定资源优先级，从而帮助开发者进一步缩短网页加载时间。
- 资源提示会指示浏览器提前执行某些操作，这些操作可以提高加载性能。
- 资源提示可以执行操作，例如执行早期 DNS 查找、提前连接到服务器，甚至在浏览器通常发现资源之前提取资源。
preconnect
后续需要链接的域名,跨源服务器,常用用例是对提供字体的网域执行preconnect
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
dns-prefetch
虽然尽早打开与跨源服务器的连接可以显著缩短初始网页加载时间，但同时与多个跨源服务器建立连接可能不合理或不可行。如果您担心可能过度使用了 preconnect，可以使用 dns-prefetch 提示来使用开销大大降低的资源提示。DNS 查找的费用相当低廉，并且由于费用相对较小，在某些情况下，它们可能比 preconnect 更适合。
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
preload
提前请求呈现网页所需的资源,使用 preload 指令下载的资源会以高优先级有效下载，如果过度使用，preload 可能会造成带宽争用，对网页加载速度产生负面影响。
<link rel="preload" href="/lcp-image.jpg" as="image">
prefetch
针对可能会用于未来导航的资源发起低优先级请求
-
Prefetch 预取回的资源并不会被立刻解析、运行,例如取回的js文件不会被执行,只是文件保存到了浏览器缓存中。 这也是Prefetch与普通 link 标签的核心区别。
-
Prefetch 的触发时机不确定,由浏览器决定.
fetchpriority
fetchpriority 属性在用于页面的 LCP 映像时尤其有效。通过使用此属性提高 LCP 图片的优先级，您可以相对轻松地改进网页的 LCP。
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
默认情况下，系统会以较低的优先级提取图片。完成布局后，如果发现图片位于初始视口内，优先级将提升为高。在前面的 HTML 代码段中，fetchpriority 会立即告知浏览器以高优先级下载较大的 LCP 图片，而以较低的优先级下载不太重要的缩略图。
现代浏览器分两个阶段加载资源。第一阶段预留给关键资源，并在所有阻塞脚本下载和执行后结束。在此阶段，低优先级资源的下载可能会延迟。通过使用 fetchpriority="high"，您可以提高资源的优先级，使浏览器能够在第一阶段下载资源。
不过此属性兼容性还不是很好 Chrome 102版本得到了支持,Firefox 截止2024-06-03 尚未支持。