• Web 网页性能优化

    Web 网页性能及性能优化

    一、Web 性能

    Web 性能是 Web 开发的一个重要方面，侧重于网页加载速度以及对用户输入的响应速度

    通过优化网站来改善性能，可以在为用户提供更好的体验

    网页性能既广泛又非常深入

    1. 为什么性能这么重要？

    1. 性能关乎留住用户

    性能对于任何在线业务都至关重要

    与加载速度缓慢、让人感觉运行缓慢的网站相比，加载速度快并能及时响应用户输入的网站能更好地吸引并留住用户

    2. 性能能提高转化次数

    性能会对网站用户是否会浏览应用产生重大影响

    3. 性能关乎用户体验

    随着网页开始加载，用户会等待一段时间，等待内容显示。在此之前，就谈不上用户体验

    快速连接会让这种体验一闪而过。而如果连接速度较慢，用户就不得不等待

    image

    性能是打造良好用户体验的基本要素

    当网站发送大量代码时，浏览器必须使用用户流量套餐中的兆字节流量下载应用

    尤其是移动设备的 CPU 性能和内存有限。这可能会导致糟糕的性能条件，而且考虑到人们了解人类的行为，用户只能容忍网站上的不利条件长达很长的时间，然后才会放弃网站

    2. 网页核心指标

    2.1. 指标类型：

    • 感知加载速度：网页可以多快地加载网页中的所有视觉元素并将其渲染到屏幕上

    • 加载响应速度：页面加载和执行组件快速响应用户互动所需的任何 JavaScript 代码的速度

    • 运行时响应速度：网页在加载后对用户互动的响应速度

    • 视觉稳定性：页面上的元素是否会以用户意想不到的方式发生偏移，是否可能会干扰用户的互动？

    • 流畅性：过渡和动画是否以一致的帧速率渲染，并在一种状态之间流畅地流动？

    2.2. 要衡量的指标：

    • FCP（First Contentful Paint）：从网页开始加载到网页内容的任何部分呈现在屏幕上所用的时间

    • LCP（Largest Contentful Paint）：从网页开始加载到屏幕上呈现最大的文本块或图片元素所用的时间

    • INP（Interaction to Next Paint）：与网页进行的每次 tap、click 或键盘互动的延迟时间，并根据交互的数量选择页面中最差的交互延迟作为单个代表性值来描述页面的总体响应性

    • TBT（Total Blocking Time）：从 FCP 到可交互时间 (TTI) 之间的总时长

    • CLS（Cumulative Layout Shift）：从页面开始加载到其生命周期状态更改为隐藏期间发生的所有意外布局偏移的累计分数

    • TTFB（Time to First Byte）：网络使用资源的第一个字节响应用户请求所花费的时间

    • FID（First Input Delay）：用户首次与网页互动（即，点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件）到浏览器实际能够开始处理事件处理脚本以响应相应互动的时间

    2.3. Web 页面性能衡量指标-以用户为中心的性能指标

    Web 页面性能衡量指标-以用户为中心的性能指标

    二、性能优化

    1. HTML 页面性能优化

    每个网站都是从请求 HTML 文档开始的，该请求对网站的加载速度有着重大影响

    要想构建可快速加载的网站，第一步就是要及时从服务器接收网页 HTML 的响应

    当在浏览器的地址栏中输入网址时，浏览器会向服务器发送 GET 请求进行检索

    网页的第一个请求针对的是 HTML 资源，因此，确保 HTML 以最短延迟快速到达是关键性能目标

    1.1. 尽量减少重定向

    在请求资源时，服务器可能会做出一个重定向响应，该重定向可以是永久重定向（301 Moved Permanently 响应）或临时重定向（302 Found 响应）

    重定向会降低网页加载速度，因为它需要浏览器在新位置发出额外的 HTTP 请求来检索资源。重定向有两种类型：

    1. 完全发生在源站内的同源重定向。这些类型的重定向完全由项目控制，因为管理它们的逻辑完全位于的 Web 服务器上
    2. 由其他源启动的跨域重定向。这些类型的重定向通常无法控制
    1.2. 缓存 HTML 响应

    缓存 HTML 响应很困难，因为响应可能包含指向其他关键资源（例如 CSS、JavaScript、图片和其他资源类型）的链接。这些资源的文件名中可能包含唯一指纹，该指纹会根据文件的内容而变化

    但是较短的缓存生命周期（而不是不缓存）具有诸多优势：

    • 允许在 CDN 中缓存资源，减少从源服务器传送的请求数量

    • 在浏览器中传送资源，从而重新验证资源而不是再次下载此

    • 可以将缓存资源的适当时间设置为合适的分钟数

    缓存 HTML 的一种方法是使用 ETag 或 Last-Modified 响应标头

    ETag（也称为实体标记）标头是一个标识符，用于唯一标识所请求资源，通常使用资源内容的哈希值：

    ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

    每当资源发生变化时，都必须生成新的 ETag 值。在后续请求中，浏览器会通过 If-None-Match 请求标头发送 ETag 值。如果服务器上的 ETag 与浏览器发送的 ETag 匹配，服务器会返回 304 Not Modified 响应，浏览器则会使用缓存中的资源。虽然这仍然会导致网络延迟，但 304 Not Modified 响应比整个 HTML 资源小得多

    但是，重新验证资源的新鲜度涉及的网络延迟也本身也是一个缺点，需自行决定以这种方式缓存 HTML 的额外工作是否值得，或者最好是谨慎操作，不必费心缓存 HTML 内容。

    1.3. 测量服务器响应时间

    如果响应未缓存，则服务器的响应时间在很大程度上取决于的托管服务提供商和后端应用堆栈

    与动态网页相比，提供动态生成的响应（例如从数据库获取数据）的网页的 TTFB 可能更高，无需在后端投入大量计算时间即可立即提供

    1.4. 压缩

    基于文本的响应（例如 HTML、JavaScript、CSS 和 SVG 图片）应进行压缩，以减小通过网络传输时的大小，从而加快其下载速度。最常用的压缩算法是 gzip 和 Brotli。Brotli 比 gzip 提高了约 15% 到 20%。

    • 尽可能使用 Brotli，所有主流浏览器都支持 Brotli，但如果网站有大量用户在旧版浏览器中使用，请确保将 gzip 用作后备选项，因为任何压缩都比不进行压缩要好。
    • 文件大小至关重要。非常小的资源（小于 1 KiB）压缩得不太好，有时甚至根本压缩不到。任何类型的数据压缩的效果都取决于能够使用压缩算法找到更多可压缩数据位的大量数据。文件越大，压缩效果就越好
    • 了解动态压缩和静态压缩。动态压缩和静态压缩是确定何时应压缩资源的不同方法
      • 动态压缩会在请求资源时压缩资源，有时甚至在每次请求资源时压缩资源。
      • 静态压缩消除了压缩本身涉及的延迟时间，在使用动态压缩的情况下，这可能会增加服务器响应时间。JavaScript、CSS 和 SVG 图片等静态资源应静态压缩，而 HTML 资源应动态压缩。
    1.5. CDN

    CDN 是分布式服务器网络，服务器从源服务器缓存资源，反过来再从物理上更靠近用户的边缘服务器传送资源。在距离用户较近时，可以缩短往返时间 (RTT)，而 HTTP/2 或 HTTP/3、缓存和压缩等优化技术则可以让 CDN 更快地提供内容，而不是从源服务器提取内容。在某些情况下，使用 CDN 可以显著改善网站的 TTFB。

    2. 关键渲染路径

    关键渲染路径是网页性能中的一个概念。

    关键渲染路径是指网页开始在浏览器中呈现之前所涉及的步骤。为了呈现网页，浏览器需要 HTML 文档本身以及呈现该文档所需的所有关键资源。

    2.1. 渐进式渲染

    网络是自然分布的。与客户端和 APP 不同，浏览器不能依赖于拥有呈现页面所需的所有资源的网站。因此，浏览器非常擅长渐进式呈现页面。原生应用通常有一个安装阶段，然后是运行阶段。然而，对于网页和网络应用来说，这两个阶段之间的界限就不那么明显了。

    2.2. 关键渲染路径

    浏览器需要知道它应该等待的最小资源数量，以避免呈现明显不正常的体验。

    另一方面，浏览器也不应该等待超过必要的时间才向用户显示一些内容。浏览器在执行初始呈现之前所采取的步骤序列称为关键渲染路径。

    呈现路径涉及以下步骤：

    • 通过 HTML 构建文档对象模型 (DOM)

    • 通过 CSS 构建 CSS 对象模型 (CSSOM)

    • 应用任何会更改 DOM 或 CSSOM 的 JavaScript

    • 通过 DOM 和 CSSOM 构建渲染树

    • 在页面上执行样式和布局操作，看看哪些元素适合显示

    • 在内存中绘制元素的像素

    • 如果有任何像素重叠，则合成像素

    • 以物理方式将所有生成的像素绘制到屏幕上

    在这里插入图片描述

    只有在完成所有这些步骤后，用户才会在屏幕上看到内容

    这一呈现过程会发生多次。初始渲染会调用此流程，但随着更多会影响网页渲染的资源可用，浏览器将会重新运行此流程（或许只是其中的一部分），以更新用户看到的内容。关键渲染路径侧重于之前为初始渲染概述的流程，并依赖于执行初始渲染所需的关键资源

    2.3. 关键渲染路径上有哪些资源？

    浏览器需要等待一些关键资源下载完毕，然后才能完成初始渲染。这些资源包括：

    • HTML 的一部分
    • 元素中阻塞渲染的 CSS
    • 元素中的阻塞渲染的 JavaScript

    关键在于浏览器以流式方式处理 HTML。浏览器一旦获取网页 HTML 的任何部分，就会开始对其进行处理。然后，浏览器就可以（并且通常确实）决定先呈现网页，然后再接收网页的其余部分 HTML

    3. 优化资源加载

    网页加载时，其 HTML 中会引用许多资源，通过 CSS 提供网页的外观和布局，并通过 JavaScript 提供互动性。

    3.1. 渲染阻塞

    CSS 是一种阻塞渲染的资源，因为它会阻止浏览器渲染任何内容，直至构建了 CSS 对象模型 (CSSOM)。浏览器会阻止呈现，以防止出现非样式内容闪烁 (FOUC)

    渲染阻塞未必是不可取的，但需要通过对 CSS 进行优化来最大限度地缩短其持续时间

    3.2. 预加载扫描器
    3.2.1. 什么是预加载扫描程序？

    预加载扫描程序的角色是推测性，也就是说，它会检查原始标记，以便查找资源，以便在主要 HTML 解析器发现之前抓取相应资源

    预加载扫描程序是一种浏览器优化，采用辅助 HTML 解析器的形式，可扫描原始 HTML 响应，以找出并推测性地提取资源，然后主 HTML 解析器才会发现这些资源

    为了充分利用预加载扫描器，服务器发送的 HTML 标记中应包含关键资源。预加载扫描器无法发现以下资源加载模式：

    • 由 CSS 使用 background-image 属性加载的图片。这些图片引用位于 CSS 中，预加载扫描器无法发现这些引用
    • 动态加载的脚本，采用