Web性能入门

本文参考 High Performance Browser Networking，获取更多详细内容请查看原文。

Web性能的影响因素

在复杂的网络环境中，优化性能的过程通常涉及到多个独立层的相互作用，每一层都有其特定的限制与挑战。通过对以往的网络组件进行深入研究，现阶段我们需要关注Web性能优化的整体架构。

这包括：

网络延迟与带宽的关系
影响HTTP的数据传输协议（如TCP）
HTTP协议的特性
当前Web应用程序的趋势和性能需求
浏览器特性及其优化能力

要有效地优化这些不同层级之间的协作并不是简单的数学方程，不同的解决方案总是存在的。随着技术的迅速发展与用户连接方式的变化，各组件也在不断更新，从而使得Web应用的复杂性与执行效率都发生了显著变化。

首先，我们需要明确现代Web应用程序的定义，掌握我们现有的工具，以及如何衡量Web的性能，最终了解哪些系统部分在推动或阻碍我们的发展。

超文本与Web应用的演变

过去数十年中，Web的发展可归纳为三种主要的体验形态：超媒体文档、丰富的网页以及交互式Web应用程序。后两者的界限并不明确，但从性能角度看，每种形式需要的处理和指标也是各不相同。

超文本文档：这是Web的起源，展现为一种基本格式的纯文本，并包含一些超链接。尽管在现代看来可能相对简单，但其促成了Web的基础构架。
网页：随着技术的发展，早期的浏览器与HTML标准拓展了超文本的概念，能够融合多种媒体类型，比如图像和音频，使得网页具备了更丰富的视觉效果。
Web应用程序：借助JavaScript和AJAX等技术，通过提升响应性使得用户在浏览器中与页面进行互动，进而形成复杂的依赖关系与结构。

HTTP的演进与性能指标

最初的HTTP 0.9简单地处理单个文档请求，随后的HTTP版本增强了元数据的处理能力，如缓存和连接持久性，使得多个TCP连接的创建成为可能，关键性能指标也从文档加载时间转向了页面加载时间，通常被称为PLT。

PLT可以被定义为”浏览器中的加载微调器停止旋转的时间”，不仅要考虑页面的加载，也要关注应用程序在不同交互下的响应。现代Web应用程序构建在动态交互之上，必须关注用户交互的时间、参与度等关键指标。

理解现代Web应用

根据HTTP归档的信息，现代Web应用的组成部分大致是：

90个请求，来自15个主机，传输总量为1,311 KB

具体分配为：

HTML文档：10个请求，52 KB
图片：55个请求，812 KB
JavaScript：15个请求，216 KB
CSS：5个请求，36 KB
其他资源：5个请求，195 KB

当今的Web应用的平均大小相比于初期已有显著提升，通常超过1MB，且来自多于15个主机的请求数量达到百个之多！

用户体验与性能感知

对用户来说，速度和性能是相对的。不同行业和应用场景都制定了一系列针对性的需求。在快速反应用户的输入时，我们应着重关注用户感知的过程，以提供即时反应。依照统计数据，用户对某些延迟在瞬间感知上是敏感的，若延迟在250毫秒以内，则影响较小；而一旦超出这一范围则可能导致用户操作的放弃。

资源管理与分析

在讨论Web性能时，资源的有效管理是核心话题。资源瀑布图展示了每个HTTP请求的详细流程，包括DNS解析、TCP连接、HTTP请求等各个环节的时间分布。通过分析，我们可以深入理解每一项请求对于性能的影响，从而在结构与实现上做出优化。

接下来，浏览器优化策略也应当纳入考量，现代浏览器在管理资源请求与解析时，采用了多种策略，包括：预解析DNS、预连接以及推测用户操作等。这些优化在细节上看似微小，却在整体性能上能够显著提升用户体验。

核心性能指标详解

1. 页面加载指标

指标名称	描述	推荐值	影响因素
FCP (First Contentful Paint)	首次内容绘制时间	< 1.8秒	服务器响应速度、资源大小
LCP (Largest Contentful Paint)	最大内容绘制时间	< 2.5秒	图片加载、主要内容块加载
TTI (Time to Interactive)	可交互时间	< 3.8秒	JavaScript执行时间
FID (First Input Delay)	首次输入延迟	< 100ms	JavaScript阻塞时间
CLS (Cumulative Layout Shift)	累积布局偏移	< 0.1	动态内容加载、字体加载

2. 网络性能优化建议

DNS优化
- 使用DNS预解析
- 选择高效的DNS服务商
- 实施DNS缓存策略
TCP连接优化
- 启用Keep-Alive
- 实施TCP Fast Open
- 优化TCP窗口大小
HTTP优化
- 使用HTTP/2
- 启用HSTS
- 实施浏览器缓存策略

3. 资源加载优化

资源类型	优化建议	加载策略
JavaScript	• 代码分割 • Tree Shaking • 延迟加载	async/defer
CSS	• 关键CSS内联 • 媒体查询优化 • 压缩合并	preload
图片	• 响应式图片 • WebP格式 • 懒加载	loading=”lazy”
字体	• WOFF2格式 • 预加载 • 字体子集化	font-display

性能优化最佳实践

在资源优化方面，我们需要合理实施压缩算法，选择现代图片格式如WebP，并建立有效的缓存策略，以减少不必要的网络请求。同时，代码层面的优化同样重要，应着重避免长任务阻塞主线程，持续优化JavaScript的执行效率，并通过合理的代码结构来减少页面重排重绘的次数。

在加载策略上，采用渐进式加载可以显著提升用户体验，通过合理划分优先级来确保关键资源优先加载，并利用预加载技术提前获取重要资源。为了进一步优化用户体验，可以实施骨架屏来提供即时的视觉反馈，在加载过程中添加适当的提示信息，并持续优化各类交互的响应速度，从而提供流畅的用户体验。

小结

现代Web性能的优化是一个复杂的系统工程，需要从系统的各个层面进行整体把控。随着技术的不断演变，优化不应仅局限在单一层次，跨层级的综合优化与响应速度提升同样是确保用户满意度的关键。通过合理的资源调配与分析工具，我们能够不断提升Web应用的性能。