如何用 Performance API 计算首字节时间 TTFB
通过 Performance API 可以精确计算首字节时间，这有助于判断服务器响应速度是否达标。
获取导航时间数据
在浏览器控制台输入 performance.getEntriesByType('navigation') 即可获取导航时间数据。这个方法返回一个数组，其中包含了页面加载过程中的所有性能指标。MDN 文档指出，Navigation Timing API 提供了从导航开始到页面完全加载的各个时间点，这些数据是只读的，可以帮助我们分析页面性能瓶颈。通过这种方式，我们不需要手动记录时间戳，就能直接获取浏览器记录的标准化性能数据。
获取到数据后，需要从中提取第一个导航条目。通常页面加载只会有一个导航条目，因此使用 [0] 索引即可。这个条目包含了诸如 navigationStart、responseStart 等关键时间戳。navigationStart 表示浏览器开始导航的时刻，而 responseStart 表示浏览器接收到响应第一个字节的时间。这两个时间戳的差值就是首字节时间的核心计算依据，它们共同构成了 TTFB 指标的基础。
计算首字节时间 TTFB
计算首字节时间 TTFB 的公式非常简单，即 responseStart 减去 navigationStart。MDN 文档明确给出了这个计算方式，并指出这是通过 Performance Timing API 测量页面加载性能的核心方法之一。在实际操作中，我们可以将这两个时间戳相减，得到的结果就是从导航开始到接收到第一个字节所经过的毫秒数。这个数值直接反映了服务器处理请求并返回数据所需的时间。
为了验证计算结果，可以在控制台直接运行计算代码。例如，let timing = performance.getEntriesByType('navigation')[0]; let ttfb = timing.responseStart - timing.navigationStart;。如果计算结果为 0，可能是因为页面使用了本地缓存，或者浏览器没有记录下该时间戳。如果结果是一个较大的数值，则说明服务器响应较慢，可能需要检查服务器配置或网络连接情况。
判断响应速度是否达标
根据 MDN 文档的建议，将 DOMContentLoaded 事件持续时间控制在 50 毫秒以内有助于确保用户界面响应迅速。虽然 TTFB 本身不直接决定 DOMContentLoaded 的时长，但它是页面加载流程中的关键一环。如果 TTFB 过长，会导致后续的 DOM 解析和脚本执行被推迟，从而影响整体的用户体验。因此，我们需要关注 TTFB 的数值，并将其作为评估服务器性能的一个重要指标。
判断响应速度是否达标，通常需要结合具体的业务场景。对于移动端页面，由于网络环境可能不稳定，过长的 TTFB 会导致用户感知到明显的延迟。如果计算出的 TTFB 超过了 200 毫秒，建议进一步排查服务器端的处理逻辑，例如数据库查询是否过慢或服务器负载是否过高。通过这种方式，我们可以针对性地优化服务器性能，从而提升页面的加载速度。
排查性能瓶颈的方法
除了计算 TTFB，我们还可以利用 Performance API 检查其他相关指标，例如 DNS 查询时间、TCP 连接时间和 TLS 握手时间。MDN 文档提到，这些时间戳可以通过 domainLookupStart、connectStart 和 secureConnectionStart 等属性获取。通过对比这些时间戳，我们可以确定性能瓶颈究竟出在 DNS 解析、网络连接还是服务器处理上。例如，如果 DNS 查询时间过长，可能需要优化 DNS 服务器配置或使用 CDN。
在排查性能瓶颈时，建议多次测试并取平均值，以排除偶然的网络波动影响。同时，可以使用浏览器的开发者工具 Network 面板查看详细的资源加载信息。虽然 MDN 文档主要关注 API 的使用方法，但结合开发者工具的直观展示，可以更全面地理解页面加载过程中的各个阶段。通过这种综合分析，我们可以找到具体的优化点，并实施相应的改进措施。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。