推荐的 Web 性能时间：多长时间算太长？

加载目标

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

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

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

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

空闲目标

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

动画目标

为了使滚动和其他动画看起来流畅且响应迅速，内容重绘应以每秒 60 帧（60fps）的速度发生，即每 16.7 毫秒一次。16.7 毫秒包括脚本、重排和重绘。请注意，渲染一帧大约需要 6 毫秒，剩下大约 10 毫秒用于其余部分。任何低于 60fps 的帧率，尤其是参差不齐或变化的帧率，都会显得卡顿。

响应目标

当用户与内容交互时，在 100 毫秒内（最好是 50 毫秒内）提供反馈并确认用户的响应或交互非常重要。50 毫秒感觉是即时的。用户交互的确认通常应该感觉是即时的，例如鼠标悬停或按钮按下，但这并不意味着完成的响应应该是即时的。虽然慢于 100 毫秒的响应可能会在用户交互和响应之间产生脱节，但 100 到 200 毫秒的过渡响应可能有助于用户注意到他们发起的交互所产生的响应，例如打开菜单。如果响应需要超过 100 毫秒才能完成，请提供某种形式的反馈，告知用户交互已发生。