justcode.ikeepstudying.com
如何使用 Timeline 工具, chrome插件, 网站调试工具, Timeline时间线事件参考 - Just Code
使用 Chrome DevTools 的 Timeline 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。 TL;DR 执行 Timeline 记录,分析页面加载或用户交互后发生的每个事件。 在 Overview 窗格中查看 FPS、CPU 和网络请求。 点击火焰图中的事件以查看与其相关的详细信息。 放大显示一部分记录以简化分析。 Timeline 面板概览 Timeline 面板包含以下四个窗格: Controls。开始记录,停止记录和配置记录期间捕获的信息。 Overview。 页面性能的高级汇总。更多内容请参见下文。 火焰图。 CPU 堆叠追踪的可视化。您可以在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件。 Details。选择事件后,此窗格会显示与该事件有关的更多信息。 未选择事件时,此窗格会显示选定时间范围的相关信息。 Overview 窗格 Overview 窗格包含以下三个图表: FPS。每秒帧数。绿色竖线越高,FPS 越高。 FPS 图表上的红色块表示长时间帧,很可能会出现卡顿。 CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型。 NET。每条彩色横杠表示一种资源。横杠越长,检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间(从请求资源到第一个字节下载完成的时间)。 深色部分表示传输时间(下载第一个和最后一个字节之间的时间)。 横杠按照以下方式进行彩色编码: HTML 文件为蓝色。 脚本为黄色。 样式表为紫色。 媒体文件为绿色。 …