Firefox DevTools 如何分析应用启动耗时

酷辰大大_3844

酷辰大大_3844

2026-07-09

551人浏览

原创

firefox中网页“启动耗时”即页面加载过程,通过network面板的finish时间获总下载耗时,performance面板分析domcontentloaded、load、长任务及脚本执行等关键阶段,并结合performance.mark/measurement自定义业务节点以精准定位瓶颈。

firefox devtools 如何分析应用启动耗时

Firefox DevTools 本身不直接提供“应用启动耗时”这一抽象指标(如移动端的冷启动/热启动),但对 Web 应用而言,页面加载过程就是它的“启动过程”。你可以通过 Firefox 的开发者工具精准拆解从导航开始到内容可交互的完整耗时链条,定位瓶颈所在。


? 查看网页首次加载总耗时(类比“启动时间”)

打开 Network 面板是最直接的方式:

  • 按 Ctrl+Shift+E(Windows/Linux)或 Cmd+Option+E(macOS)打开 Network 面板
  • 勾选 Disable Cache(禁用缓存),模拟真实用户首次访问
  • 刷新页面(F5 或 Ctrl+R)
  • 观察底部状态栏显示的 Finish 时间 —— 这是所有网络请求完成的总耗时
  • 点击任意请求 → 右侧 Timing 标签页,可查看分段耗时:
    • DNS Lookup
    • Initial connection(含 TCP + SSL/TLS 握手)
    • Request sent / Waiting (TTFB)
    • Content Download

⚠️ 注意:“Finish” ≠ 用户感知的启动完成。它只反映资源下载结束,不包含 JS 执行、渲染、首屏绘制等关键体验阶段。


? 分析主线程执行与首屏渲染(真正影响“启动感”的环节)

Performance 面板用于深入分析页面加载期间的主线程行为:

  • 按 Shift+F5 打开 Performance 工具(或菜单:工具 → Web 开发者 → 性能)
  • 确保 Enable JavaScript profiler 已勾选(在设置中)
  • 点击录制按钮 → 刷新页面 → 自动停止录制
  • 查看时间轴中的关键标记:
    • DOMContentLoaded(蓝色竖线):HTML 解析完成,DOM 构建就绪
    • Load(紫色竖线):所有资源(JS/CSS/图片等)加载完毕
    • First Paint / First Contentful Paint(FCP):需结合页面实际渲染判断(Firefox 当前不原生标出 FCP,但可通过帧截图+时间轴估算)

重点关注以下区域:

Codex Deep Search
Codex Deep Search

一款AI工具,主要用于使用 Codex CLI 进行深度网络搜索,适用于需要多源综合分析的复杂查询。当 `web_search`(Brave)返回结果不足,或用户……时使用,适合需要提升相关任务效率的用户。

下载
  • 长任务(Long Tasks):持续 > 50ms 的 JS 执行会阻塞渲染,直接拖慢“可交互时间”
  • Layout / Recalculate Style:样式重计算或布局抖动,常见于 JS 动态操作 DOM
  • Script Evaluation:JS 文件解析与执行耗时,尤其注意 main.js、框架初始化代码

? 结合 Timing API 补充自定义启动节点

DevTools 不自动埋点,但你可以主动注入关键时间戳,让分析更贴近业务逻辑:

// 在 HTML head 中尽早插入
performance.mark('app-start');

// 在应用入口(如 React.render / Vue.createApp)前打点
performance.mark('framework-init-start');
// … 初始化后
performance.mark('framework-init-end');
performance.measure('framework-init', 'framework-init-start', 'framework-init-end');

// 最终可交互时
performance.mark('app-interactive');

之后在 Performance 面板录制中,点击右上角 ⋯ → Show Timeline Events,即可看到这些 mark 和 measure 标记,与主线程活动对齐分析。


? 对比与回归:识别启动变慢的根源

Firefox 支持导出性能数据(JSON 格式),可用于版本间对比:

  • 录制完成后,点击右上角 ⋯ → Save recording
  • 将不同版本、不同环境(如 dev vs prod)的记录导入对比工具(如 Perfume.js 可视化器,或本地脚本解析)
  • 关注变化显著的指标:
    • TTFB 增加 → 后端或 CDN 问题
    • Script Evaluation 增加 → 新增逻辑或依赖膨胀
    • Layout 时间突增 → 意外触发强制同步布局(如读取 offsetTop 后立即修改 class)

不复杂但容易忽略

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

firefox

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4566

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1149

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4504

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

900

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1796

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3285

4

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

2023.09.12

4253

6

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

2023.09.20

2760

5

java访问控制修饰符介绍
java访问控制修饰符介绍

java访问控制修饰符有四种,分别是public、protected、private、默认访问修饰符。详细介绍:1、public,public是最宽松的访问控制修饰符,被修饰的类、方法和变量可以被任何其他类访问,当一个类、方法或变量被声明为public时,它们可以在任何地方被访问,无论是同一个包中的类还是不同包中的类;2、protected修饰符等等。

2023.09.20

888

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Firebug入门教程
Firebug入门教程

共7课时 | 5.2万人学习

前端最全HTTP基础原理及应用
前端最全HTTP基础原理及应用

共12课时 | 2.1万人学习