推荐的网页性能计时：多久算太久？

“不到一秒”通常被认为是加载的最佳时间，但这意味着什么呢？一秒钟应该被视为指示用户新内容请求已发出并将加载的最大时间限制，例如浏览器显示页面标题以及显示页面的背景颜色。

从请求中检索到的第一个资源通常是 HTML 文档，然后该文档会调用其他资源。如关键渲染路径的描述中所述，浏览器在收到 HTML 后会立即开始处理它，并在接收内容时渲染内容，而不是等待其他资源加载。

是的，加载时间目标为一秒，但这很少有网站能达到。期望值不同。“Hello World”在公司网络上预计会在几毫秒内加载，但用户在西伯利亚北部使用五年前的设备通过边缘网络下载猫视频，可能会发现 20 秒的下载速度很快。如果您等待三到四秒钟而不向用户传达加载正在进行并显示一些进度，那么典型的网站将会失去潜在的访问者，而这些访问者如果回来的话，也会需要很长时间。

在优化性能时，请设置一个雄心勃勃的首加载目标，例如在移动 3G 网络上为 5 秒，在办公室 T1 线路上为 1.5 秒，对于后续页面加载设置更雄心勃勃的页面加载目标，利用 Service Workers 和缓存。对于初始加载页面与加载其他资源、响应用户交互以及确保动画流畅，有不同的建议时间。

浏览器是单线程的（尽管支持 Web Workers 的后台线程）。这意味着用户交互、绘制和脚本执行都在同一个线程上。如果线程忙于执行复杂的 JavaScript，则主线程将无法响应用户输入，例如按下按钮。因此，脚本执行的范围应有限，应将其划分为可以执行 50 毫秒或更短时间的代码块。这使得线程可用于用户交互。

为了使滚动和其他动画看起来流畅且具有响应性，内容重绘应以每秒 60 帧 (60fps) 的速度发生，即每 16.7 毫秒一次。16.7 毫秒包括脚本、重排和重绘。请意识到文档大约需要 6 毫秒才能渲染一帧，剩下大约 10 毫秒用于其他操作。低于 60fps 的任何内容，尤其是不均匀或变化的帧率，看起来都会很卡顿。

当用户与内容交互时，务必提供反馈并确认用户的响应或交互，并且在 100 毫秒内完成，最好在 50 毫秒内完成。50 毫秒感觉很及时。对用户交互的确认通常应感觉很及时，例如悬停或按钮按下，但这并不意味着完成的响应应是即时的。虽然低于 100 毫秒的反应可能会在用户交互和响应之间造成脱节，但 100 到 200 毫秒的响应转换可能有助于用户注意到其交互所触发的响应，例如菜单打开。如果响应需要超过 100 毫秒才能完成，请提供某种形式的反馈以告知用户交互已发生。