使用QQ浏览器开发者工具可分析网页性能，依次通过“网络”面板查看资源加载耗时、在“控制台”执行Performance API脚本获取页面总加载时间、利用“时间轴”记录分析首次绘制与内容绘制等关键节点，全面掌握页面加载各阶段耗时情况。
如果您需要分析网页性能，了解页面加载各阶段所消耗的时间，可以通过QQ浏览器的开发者工具进行详细查看。该工具能够提供网络请求、资源加载、渲染等环节的耗时数据。
本文运行环境：iPhone 15 Pro，iOS 18
一、使用开发者工具查看网页加载时间
开发者工具中的“网络”（Network）面板可以记录页面加载过程中所有资源的请求与响应情况，通过该面板可精确查看每个资源的加载耗时及总体页面加载时间。
1、打开QQ浏览器，进入目标网页。
2、点击浏览器右上角的菜单按钮（三个点），选择“更多工具”下的“开发者工具”。
3、在开发者工具界面中，切换到“网络”标签页。
4、刷新当前网页，观察“网络”面板中列出的所有资源加载记录。
5、查看每项资源右侧的“耗时（ms）”数值，底部会显示总请求数和完全加载时间。
6、点击任意资源条目，可在下方查看其详细的加载时间分段，如DNS解析、TCP连接、SSL握手、等待响应、内容下载等。
二、通过控制台执行性能测量脚本
利用JavaScript的Performance API可以直接获取关键性能指标，这种方法适合需要编程方式获取首屏时间或白屏时间的场景。
1、在QQ浏览器中打开目标网页。
2、启用开发者工具，切换至“控制台”（Console）标签页。
3、输入以下代码并回车执行：
console.log(performance.timing.loadEventEnd - performance.timing.navigationStart)
4、控制台将输出从页面开始加载到完全加载完成的总耗时（单位：毫秒）。
5、您也可以使用 performance.getEntriesByType("navigation") 获取更详细的导航和加载性能数据。
三、启用时间轴记录进行深度分析
时间轴（Timeline）功能可以记录页面加载和交互过程中的CPU、内存、渲染行为，帮助识别导致加载缓慢的具体操作。
1、打开QQ浏览器并进入需检测的网页。
2、开启开发者工具，找到并点击“时间轴”或“性能”（Performance）面板。
3、点击“开始记录”按钮（通常为圆形红色图标）。
4、刷新页面，让浏览器完整加载网页内容。
5、加载完成后，点击“停止记录”，工具将生成详细的加载过程火焰图。
6、在结果中查看“First Paint”（首次绘制） 和 “First Contentful Paint”（首次内容绘制） 等关键时间节点及其对应耗时。
