移动端网页首字节时间为何比预期长？
首字节时间是指从导航开始到接收到第一个响应字节的时间，可以通过 performanceTiming API 中的 responseStart 与 navigationStart 属性计算得出。
计算首字节时间的具体步骤
在浏览器控制台中获取 performanceTiming 对象，该对象包含页面加载过程中各个时间点的只读时间戳。通过 window.performance.timing 可以访问这些数据。计算首字节时间需要使用 responseStart 属性，该属性表示浏览器接收到响应数据的第一个字节的时间点。导航开始的时间点由 navigationStart 属性表示，这是页面导航流程的起始时刻。将这两个时间戳相减，即可得到首字节时间。在 JavaScript 中，可以使用 const ttfb = time.responseStart - time.navigationStart; 来实现这一计算。需要注意的是，这两个属性都来自已弃用的 performanceTiming API，但在所有浏览器中仍受支持。
在移动端调试时，确保页面已经完成导航流程，否则 responseStart 可能返回 0。如果页面使用了缓存或本地资源，responseStart 的时间点可能会提前。计算出的首字节时间以毫秒为单位，反映了从发起请求到服务器开始返回数据的时间间隔。这个指标可以帮助开发者识别网络延迟或服务器处理速度的问题。通过在控制台执行上述代码，可以实时获取当前页面的首字节时间，从而评估移动端网络性能。
如何判断计算结果是否正常
根据性能指标，首字节时间通常应该小于 200 毫秒，具体数值取决于网络环境和服务器配置。如果计算结果远超预期，可能意味着 DNS 解析、TCP 握手或 TLS 协商阶段存在延迟。可以通过对比 domainLookupEnd 与 domainLookupStart 的差值来检查 DNS 查询时间，或通过 connectEnd 与 connectStart 的差值来检查 TCP 连接时间。如果这些阶段的耗时正常，但首字节时间仍然较长，则可能是服务器端处理请求的时间过长。
在移动端网络环境下，由于信号不稳定或带宽限制，首字节时间可能会比桌面端更长。可以通过多次刷新页面并记录计算结果，观察是否存在波动。如果首字节时间持续异常，建议检查服务器的响应速度、网络连接质量或是否存在不必要的重定向。通过 performanceTiming API 提供的各个时间点，可以逐步排查性能瓶颈，从而优化移动端网页的加载速度。
利用 Performance Entry API 获取更详细数据
虽然 performanceTiming API 已被弃用，但它仍然被广泛支持。为了获取更详细的导航和资源加载信息，可以使用 Performance Entry API。通过 performance.getEntriesByType('navigation') 可以获取导航类型的性能条目，其中包含了首字节时间等指标。在支持的环境中，还可以使用 performance.getEntriesByType('paint') 来查询首绘和首次内容绘制的时间，这些数据对于评估用户体验非常有帮助。
在移动端开发中，结合 Performance Entry API 和 performanceTiming API 可以更全面地分析页面性能。例如，通过 performance.getEntriesByType('resource') 可以获取每个资源的加载时间，从而识别哪些资源导致了首字节时间的延长。通过这些工具，开发者可以针对性地优化网络请求和资源加载策略，提升移动端网页的响应速度和用户体验。
排查首字节时间过长的常见原因
首字节时间过长可能由多种原因导致，包括 DNS 解析延迟、TCP 连接建立缓慢或服务器处理请求的时间过长。在移动端，由于网络环境复杂，这些因素更容易被放大。例如，如果 DNS 解析时间较长，可以通过预解析域名或使用本地 DNS 缓存来减少延迟。如果 TCP 握手时间较长，可以尝试使用持久连接或 HTTP/2 协议来优化连接建立过程。
服务器端的处理速度也是影响首字节时间的重要因素。如果服务器响应缓慢，可能需要检查服务器的配置、负载情况或代码执行效率。此外，重定向或复杂的路由也可能导致首字节时间延长。通过 performanceTiming API 提供的各个时间点，可以逐步定位问题所在，并采取相应的优化措施，从而缩短首字节时间，提升移动端网页的加载性能。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。