UD5工具箱
常见问题
什么是Resource Timing API？
Resource Timing API是W3C标准化的浏览器性能接口，允许JavaScript代码精确测量页面中每个网络资源的加载耗时。通过调用performance.getEntriesByType('resource')方法，开发者可以获得一个PerformanceResourceTiming对象数组，每个对象包含了该资源从发起请求到加载完成的完整时间线信息，包括DNS查询耗时、TCP连接耗时、TLS握手耗时、请求等待时间、内容下载时间等。这些数据对于诊断前端性能瓶颈、构建性能监控系统至关重要。
缓冲区是什么？为什么需要关注它？
Resource Timing缓冲区是浏览器为存储资源时序数据而分配的固定大小内存空间，默认容量为150条记录。当页面加载的网络资源数量超过缓冲区容量时，新产生的资源条目将无法被记录到缓冲区中，导致性能数据不完整。对于需要完整采集所有资源加载数据的性能监控系统（如自研APM工具），必须密切关注缓冲区状态，及时调整缓冲区大小或采用PerformanceObserver等替代方案来确保数据不丢失。
如何判断浏览器缓存是否命中？
通过Resource Timing条目中的几个关键字段可以判断缓存命中情况：如果transferSize为0且encodedBodySize大于0，说明资源从磁盘缓存或内存缓存中加载，未产生网络传输；如果responseEnd - responseStart非常短（接近0毫秒），也可能是缓存命中的表现；如果fetchStart - requestStart为0，说明浏览器在发送请求前就从缓存中找到了匹配的资源。综合这些字段可以准确判断资源的缓存策略是否生效。
如何正确处理bufferfull事件？
处理bufferfull事件有三种推荐策略：第一种是调用performance.clearResourceTimings()清空缓冲区释放空间，但这会导致之前的数据丢失，适用于数据已同步到服务端的场景；第二种是调用performance.setResourceTimingBufferSize(newSize)增大缓冲区容量，适用于内存充裕的场景；第三种是停止依赖缓冲区，转而使用PerformanceObserver持续监听新的resource条目，这是最推荐的方案，因为Observer模式不会受缓冲区大小限制，且资源消耗更低。
为什么有些资源的计时数据为0？
Resource Timing条目中某些时间戳字段显示为0通常有以下原因：跨域资源未设置Timing-Allow-Origin响应头，浏览器出于安全原因隐藏了详细时序信息；资源使用了service worker拦截，导致实际网络请求时序与常规不同；资源在页面导航之前就开始加载（如预加载链接），部分阶段的时间戳可能不可用；资源加载被取消或出错，导致某些中间阶段缺失。通过本工具可以直观地观察到这些异常情况。
PerformanceObserver相比轮询有什么优势？
PerformanceObserver相比定期调用getEntriesByType轮询有三大优势：第一是实时性，Observer在新的性能条目被记录时立即触发回调，无需等待下一次轮询间隔；第二是完整性，Observer可以通过buffered属性获取页面加载早期就已产生的条目，不会遗漏；第三是效率，Observer基于事件驱动，无需设置定时器持续轮询，节省CPU资源。现代性能监控SDK普遍推荐使用PerformanceObserver作为主要的数据采集方式。
Resource Timing与Navigation Timing有什么区别？
Resource Timing用于测量单个网络资源的加载时序，而Navigation Timing用于测量整个页面的导航加载过程。Navigation Timing提供的数据更为丰富，包括重定向、应用缓存、DNS查询、TCP连接、DOM解析、资源加载、页面卸载等完整生命周期的时间戳。两者的缓冲区机制类似，但Navigation Timing只有一个条目（对应当前页面导航），而Resource Timing可以有多个条目（对应多个资源）。在实际应用中，两者通常配合使用来全面评估页面加载性能。