UD5工具箱
使用教程
第一步：理解Resource Timing缓冲区
在使用本工具之前，建议先了解Resource Timing API的基本概念。浏览器会为每个页面维护一个Resource Timing缓冲区，用于存储所有网络资源的性能时序数据。默认缓冲区大小为150条记录，当超过这个限制时，最早的数据会被丢弃。通过performance.setResourceTimingBufferSize(size)可以调整缓冲区大小。
第二步：查看当前缓冲区状态
打开工具页面后，顶部仪表盘会立即显示当前页面的缓冲区使用情况。绿色区域表示已使用的缓冲区槽位，灰色区域表示剩余可用空间。下方的数字面板展示了具体的数值，包括已使用槽位数、总容量、使用百分比等。如果当前页面没有任何网络资源加载，缓冲区使用率将显示为0%。
第三步：模拟资源加载以填充缓冲区
点击页面上的"模拟资源加载"按钮，选择要模拟的资源类型和数量。工具会通过创建Image对象、动态插入script标签、发起fetch请求等方式生成真实的网络资源。每生成一个资源，缓冲区使用率就会相应增加。建议从少量资源开始（如10-20个），逐步增加数量直到触发bufferfull事件。
第四步：观察缓冲区满事件
当缓冲区达到容量上限时，浏览器会触发bufferfull事件。本工具会捕获该事件并在事件日志面板中显示。同时，页面顶部会出现红色警告横幅，提醒你缓冲区已满。此时，新增的资源时序数据将不再被记录。你可以观察事件日志中的时间戳，分析事件触发的频率和时机。
第五步：调整缓冲区大小
使用页面上的滑块或输入框调整缓冲区大小。调整后，工具会调用performance.setResourceTimingBufferSize()方法实时生效。你可以观察缓冲区使用率的变化，并测试不同大小的缓冲区对性能监控数据完整性的影响。建议在生产环境中根据实际资源数量合理配置缓冲区大小。
第六步：使用PerformanceObserver采集数据
除了传统的轮询方式（定期调用getEntriesByType），本工具还演示了使用PerformanceObserver监听resource类型条目的方式。这种方式更加高效，因为它基于事件驱动，无需定时轮询，且不会受到缓冲区大小限制的影响。在工具设置中启用PerformanceObserver模式后，日志面板会显示通过Observer捕获的新增资源条目。
第七步：导出和分析数据
当缓冲区中积累了足够的数据后，点击"导出CSV"按钮将所有资源时序数据下载为CSV文件。该文件可以在Excel或Google Sheets中打开，利用数据透视表和图表功能进行深度分析。导出的字段包括资源URL、类型、协议、域名、开始时间、响应开始时间、响应结束时间、持续时间、传输大小等。
第八步：实际项目中的应用
在实际项目中，本工具的使用场景包括：开发性能监控SDK时验证数据采集的完整性、排查资源加载性能问题时获取详细的时序数据、测试应用在高资源负载下的稳定性、以及学习和演示Resource Timing API的各种用法。建议将本工具加入你的前端调试工具箱，作为性能优化工作流的重要组成部分。