Chrome F12 之 Timeline页面性能分析

最新推荐文章于 2025-05-17 16:55:22 发布
原创 最新推荐文章于 2025-05-17 16:55:22 发布 · 1.7w 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#chrome #性能 #浏览器

本文详细介绍了Chrome浏览器在前端开发领域的优势，如V8引擎带来的高速运行、CSS兼容性、易用的F12工具等，并通过实例分析了如何利用Chrome的网络面板和Timeline面板进行性能优化，特别强调了脚本合并压缩、增加本地缓存、使用懒加载等优化策略，以提升页面加载速度和用户体验。

虽然做前端不应有偏见，但我的确更喜欢Chrome浏览器，它的V8引擎带来无比畅快的运行速度，它的CSS兼容性最接近标准，它的F12最好用，界面简洁没有任何多余，虽说有时安装应用扩展不太方便，但对开发如此友好的浏览器，怎能不让人喜欢。

IE11的F12更加不好用了，可能是不习惯吧，FF还要安装Firebug插件，而Chrome自带的F12就够用了。审查元素查看CSS样式，可以随手改写样式和HTML，改了就生效，你不需要改一个样式就F5一下，可以批量改几个地方看好效果再统一写回文件中去。network可以直接拦截页面所有的HTTP请求，查看头信息、数据信息更方便了，而且哪个文件访问出错也一目了然。
这里写图片描述

Status标示了请求的状态，最想看到的当然是200，304了，304表示文件未做修改，不再下载，有时我们希望连304都不要有，直接from cache来进一步提高性能。Size显示了文件的大小，Time表示一共用了多长时间，而Time-line-Start Time一项表示文件开始下载的时间。我们希望这个时间越靠前越好，越短越好。截图中的性能整体还不错，几乎都是同时开时，而且时间都在毫秒级。
当然，上面的页面还有不少优化空间，脚本合并压缩，增加本地缓存，再用上脚本的懒加载，性能会更好。

不过network里面的timeline显示的只是个大概，更详细的还需要timeline面板里的功能。

Timeline面板预览
Timeline面板有三个主要的窗口：顶部的预览窗口，中间的记录窗口，底部的工具条，如下图：
这里写图片描述
上面的一些按钮单独解释真的很吃力，但其实在实战中使用时，很快就能掌握它们的作用！
在你开启记录（就好像打开了录像机的录制功能）后，在这期间你的应用中发生的所有事件都会被记录下来形成一条日志记录，按照记

最低0.47元/天 解锁文章
zhenzigis
关注
性能分析利器：精通Chrome DevTools进行JavaScript性能瓶颈诊断
码觉客的博客
04-19 1265
Chrome DevTools是一个功能极其丰富的工具集，精通它需要持续的学习和大量的实践。本文介绍了最核心的性能分析功能和流程，但工具的潜力远不止于此。不要害怕深入探索DevTools的各个角落，尝试不同的视图和选项。最重要的是，将性能分析融入你的日常开发流程中，养成对性能敏感的习惯。当你能够熟练运用DevTools这个“性能分析利器”时，那些隐藏在代码深处的性能瓶颈将无所遁形，你也能更有信心地构建出高性能、用户体验一流的Web应用。
chrome开发者工具-timeline的详细介绍
09-24
主要给大家介绍了chrome开发者工具-timeline的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考价值，需要的朋友们下面来一起学习学习吧。
chrome使用Timeline做性能分析
weixin_30909575的博客
06-23 382
使用Timeline做性能分析 Timeline面板记录和分析了web应用运行时的所有活动情况，这是研究和查找性能问题的最佳途径。###Timeline面板概览 Timeline面板主要有三个部分构成：顶部的概述部分、记录视图和工具栏。 点击开始/停止切换按钮，开始或停止记录（参考记录） 点击清理按钮来从Timeline中清除已有的记录 关联异步事件模式让你更容易的关联异步事件和这...
谷歌浏览器F12开发者工具NETWORK的用法详解
winkexin的博客
05-17 1万+
谷歌浏览器开发者工具中的Network是前端,程序等相关开发者经常用到的,那么你都知道他们每个功能的意义吗?相信读了这篇文章,将会对你的工作带来事倍功半的效果因本人经常有360极速浏览器,谷歌内核,所以本文以360极速浏览器的开发者工具Network为例,基本和谷歌的Network一致看接口的返回值看接口的请求头，响应头查看资源的加载速度查看资源的大小，缓存情况，响应情况（cdn、waiting 等时间）功能区 2.筛选区(功能区漏斗需要开启) 3.快照区(功能区需要打开屏幕捕获)
浏览器F12的time时间
开摆
12-28 1014
请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte),发送请求完毕到接收请求开始的时间;是浏览器得到要发出这个请求的指令到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。请求第一个字节发出前到最后一个字节发出后的时间，也就是上传时间。收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间。浏览器请求时间 F12 发送url请求 查看timing。查看页面前端请求数据的时间。
F12抓包12：Performance（性能）前端性能分析
土小帽_Tester的博客
09-15 1825
使用场景: ① 前端界面加载性能测试。 ② 导出性能报告给前端开发。
10年测试工程师 —— 手把手教会你做前端性能测试（超详细）
m0_58026506的博客
09-08 1万+
普通用户如何评价一个网站的体验好不好呢？ 除了满足他的功能需求以外，用得爽不爽可能是最大的评估因素。这个爽不爽可以简单理解为快不快，好不好看，是不是符合他的操作习惯等等。而这里的快不快就是我们说的性能。 有数据表明，性能在一定程度上跟公司的收益直接相关。
Chrome 关闭F12 网络选项下的大时间段图
qq_40394751的博客
02-18 1160
点开F12点右上的小齿轮，把。
浏览器F12调试
时光里的博客
02-07 4054
1)显示的位置调整:靠右靠左靠下独立窗口2)设置颜色和语言(chrome)3)手机版本的切换，适合测试H5页面小程序测试，可以方便在电脑操作和调试;也可以选择尺寸和不同的手机型号。
微软已发布 Windows 10 Timeline 功能的官方 Chrome 插件
03-09 139
　微软已发布 Windows 10 Timeline 功能的官方 Chrome 插件，这个插件名为 Web Activities，功能是跨 Windows 10 和 Microsoft Launcher 同步 Chrome 浏览的页面，甚至是跨设备继续浏览。 　　可以在 Chrome Web Store 免费下载 Windows 10 Timeline 官方 Chrome 插件。 ...
JS代码优化一：谷歌浏览器的timeline工具的使用
sdfujichao的博客
08-06 3758
谷歌浏览器Timeline用法详解: 大家都知道，谷歌浏览器自带的相关工具是前端开发人员的利器。 点击F12会弹出一个界面，顶部带有功能的选项卡，其中有几个功能强大，但是相对较为复杂，比如Timeline,console和network。 （1）.关于console的使用可以参阅谷歌控制台console相关命令介绍一章节。 （2）.关于network的使用可以参阅谷歌浏览器network用
优化页面渲染性能：Chrome Timeline工具使用指南
weixin_35756130的博客
05-17 386
本文旨在介绍如何使用Chrome浏览器中的Timeline工具来审计和优化网页的渲染性能。文章详细解释了浏览器如何渲染网页，包括解析HTML和CSS、布局元素以及绘制页面的过程，并教授了如何通过Timeline工具监控页面加载、脚本执行、渲染和绘制活动。此外，文章还提供了识别和解决页面卡顿（jank）问题的实战技巧，以及如何利用CSS过渡来提升动画流畅度。
f12控制台时间戳
weixin_42825556的博客
01-13 2469
时间戳
chrome浏览器中F12的简单介绍
early_day的博客
05-20 3958
Chrome开发者工具中主要使用的四个功能页面： 元素（Elements）、控制台（Console）、源代码（Sources）、网络（Network） 1、元素（Elements） 用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。 查看元素代码：点击红色方框左侧箭头，或者使用快捷键Ctrl+Shift+C进行选择元素模式，再从页面中选择需要查看的元素，最后从页面中选择需要查看的元素（Elements），一栏中定位到该元素源代码的具体位置。 查看元素属性：可从被定位的源码中查看部
浏览器F12 waterfall性能检测详解详解
iloki的博客
04-27 766
Queueing 是排队的意思 Stalled 是阻塞 请求访问该URL的主机是有并发和连接数限制的,必须要等之前的执行才能执行之后的,这段时间的耗时 DNS Lookup 是指域名解析所耗时间 Initial connection 初始化连接时间,这里一般是TCP 3次连接握手时间 SSL https特有,是一种协议 Request sent 发送请求所消耗的时间 Waiting 等待响应时间,这里一般是最耗时的 Content Download 下载内容所需要消耗的时间 ...
chrome浏览器中 F12 功能的简单介绍
while_int的博客
10-20 5161
首先介绍Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等。箭头（或用者用快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性，如下图位置查看。右边的侧栏个功能的介绍:如下图所示。
F12开发者工具
小萌学习笔记
09-16 4013
按下 F12 键可以打开浏览器的“开发者工具（Developer Tools）”。开发者工具包括多个面板，每个面板有不同的功能，能让开发者更深入地了解页面的结构、行为、网络请求、性能等。
谷歌浏览器F12开发者模式网络不要展示请求毫秒 谷歌浏览器控制台network界面那个时间段怎么隐藏
Caiqiudan的博客
11-09 1169
https://blog.youkuaiyun.com/Z_Joker_J/article/details/84643663
前端开发调试必备技能F12开发者工具之Elements（元素）面板，详细图解带流程
热门推荐
提笔忘字的帝国
04-30 1万+
大家好！我是爷爷的茶七里香，这个名字有没有让你想起周董的歌捏？好了，废话不多说，开始今天咱们的内容： 一、进入浏览器开发工具的几种方式 相必是个老手都知道按键盘上的f12就行了，但是有些网站会有反调式的机制，有时候你按f12没反应，不是你卡了也不是你键盘坏了，而是网站不允许你调出f12的面板，那么这个时候我们该怎么办呢？我们可以通过点击浏览器右上角的三个小点点，里面会有开发工具的选项，如图： 除了上面介绍的两种方法，还有一种是直接在界面上鼠标右键...
使用Chrome DevTools分析React应用内存泄漏的具体步骤是什么？
最新发布
11-20
<think> 我们被要求提供使用Chrome DevTools分析React应用内存泄漏的具体步骤。结合引用内容，特别是引用[1]、[2]、[3]中关于Chrome DevTools的使用，我们可以整理出以下步骤。 注意：我们需要围绕React应用的内存泄漏分析，因此会结合React特性来阐述。 步骤分解： 1. **识别内存泄漏迹象** - 在React应用中，内存泄漏的常见表现： - 页面长时间运行后越来越卡顿 - 标签页内存占用持续上升（可通过Chrome任务管理器查看） - 控制台出现"Can't perform a React state update on an unmounted component"警告 2. **使用Chrome DevTools Memory面板进行内存分析** - 打开Chrome DevTools（F12） - 切换到Memory面板 3. **选择内存分析工具** 在Memory面板中，有三种主要的内存分析工具： - **Heap Snapshot**：用于捕获当前时刻的堆内存分配情况，通过比较不同时刻的堆快照可以找出未被释放的对象。 - **Allocation instrumentation on timeline**：实时记录内存分配的时间线，可以查看内存分配的位置和分配趋势。 - **Allocation sampling**：通过采样方式记录内存分配，对性能影响较小，适合长时间运行的应用。 4. **具体操作步骤（以Heap Snapshot为例）** a. **开始记录**： - 在Memory面板，选择"Heap snapshot"，点击"Take snapshot"按钮，进行第一次快照（此时建议应用处于初始状态）。 b. **执行操作**： - 模拟可能导致内存泄漏的操作（例如：反复进入和离开某个React组件，模拟路由切换）。 c. **再次记录**： - 执行多次操作后，再次点击"Take snapshot"获取第二次快照。 d. **比较快照**： - 在第二次快照的视图下拉菜单中选择"Comparison"，然后选择第一次快照作为比较基准。 - 查看比较结果，关注`#Delta`（增量）为正且持续增长的对象，特别是与React组件相关的对象（如`React Fiber`节点）和DOM元素。 5. **分析内存泄漏源** - 在比较结果中，重点关注： - 未被释放的组件实例（可通过构造函数名识别，如`MyComponent`） - 被遗忘的定时器（`setInterval`, `setTimeout`） - 事件监听器（`EventListener`） - 闭包中保留的大型对象 - 点击具体对象，可以在下面的"Retainers"面板中查看该对象的引用链，从而定位到为什么没有被垃圾回收。 6. **结合React DevTools** - 安装React DevTools扩展，可以查看组件树，帮助识别已卸载组件是否仍存在引用。 7. **修复与验证** - 根据分析结果修复代码（如添加清理函数）。 - 重复上述步骤，验证内存增量是否消失。 8. **使用Allocation instrumentation on timeline** - 此工具更适合捕获间歇性内存泄漏： - 点击"Allocation instrumentation on timeline"然后点击"Start"。 - 执行一系列操作（如：打开和关闭一个弹窗组件多次）。 - 停止记录，观察蓝色的内存分配柱状图。如果每次操作后内存未回落，则存在泄漏。点击柱状图可以查看分配位置。 9. **注意事项** - 测试时使用无痕模式，避免浏览器扩展干扰。 - 确保测试操作可复现。 - 多次采样取平均值，避免误判。 引用说明： - 引用[1]提到了使用React Profiler和Chrome DevTools，但这里我们主要使用Chrome DevTools。 - 引用[2]和[3]详细介绍了Chrome DevTools的高级用法，特别是内存面板的使用。 最后，我们可以生成相关问题。 注意：由于我们之前已经回答过关于useEffect清理函数的问题，因此相关问题可以围绕内存分析工具的使用和React特定场景展开。 </think> 以下是使用 Chrome DevTools 分析 React 应用内存泄漏的具体步骤，结合最佳实践和专业工具指南[^1][^2][^3]： ### 一、准备工作 1. **开启无痕模式** `Ctrl+Shift+N`(Win)/`Cmd+Shift+N`(Mac) 启动无痕窗口，排除浏览器扩展干扰 2. **启动开发服务器** ```bash npm start -- --expose-gc # 启用垃圾回收API ``` --- ### 二、内存泄漏检测步骤 #### 步骤1：基础内存监控 1. 打开 DevTools (`F12` 或 `Ctrl+Shift+I`) 2. 切换到 **Performance Monitor** 标签 3. 勾选： - JavaScript Heap Size - DOM Nodes - Event Listeners ```mermaid graph LR A[打开DevTools] --> B[Performance Monitor] B --> C[勾选关键指标] ``` #### 步骤2：创建内存基准线 1. **强制垃圾回收** 控制台执行： ```javascript global.gc() // 需要 --expose-gc 参数 ``` 2. **记录初始堆快照** Memory面板 → Heap snapshot → Take snapshot #### 步骤3：模拟用户操作 1. **执行可疑操作**（如路由切换、弹窗开闭等） ```jsx // 典型内存泄漏场景 function LeakyComponent() { useEffect(() => { const timer = setInterval(() => {}, 1000); window.addEventListener('resize', handleResize); // 缺少清理函数！ }, []); } ``` 2. **重复操作 5-10 次** 放大泄漏效果 #### 步骤4：记录对比快照 1. 再次强制垃圾回收 (`global.gc()`) 2. 记录新快照 3. 选择 **Comparison** 模式对比初始快照 ```mermaid graph TD S1[初始快照] --> Compare S2[新快照] --> Compare Compare --> Result[分析Delta变化] ``` --- ### 三、分析内存泄漏源 #### 关键指标解读 | 指标 | 正常范围 | 泄漏特征 | |------|----------|----------| | JS Heap | 操作后回落 | 持续增长不回落 | | DOM Nodes | 操作后减少 | 只增不减 | | Event Listeners | 保持稳定 | 持续增加 | #### 定位泄漏对象 1. 在 Comparison 视图筛选 `#Delta > 0` 的对象 2. 重点关注： - Detached DOM trees (游离DOM节点) - `EventListener` 对象 - `Timer` 或 `Interval` 实例 - 第三方库对象 (如地图/图表实例) 3. 点击具体对象 → 查看 **Retainers** 标签： ```javascript // 典型泄漏引用链 Window └── Closure (事件处理函数) └── ComponentInstance (已卸载组件) └── StateObject (大型状态对象) ``` --- ### 四、React 专项检测技巧 1. **过滤 React 组件** 在快照搜索框输入 `react` 或 `fiber` 2. **识别未卸载组件** 检查已卸载组件是否仍存在引用： ```javascript // 泄漏组件特征 fiber: <LeakyComponent> stateNode: { ... } // 组件实例仍存在 ``` 3. **检测事件监听器** 在 Memory 面板使用 **Allocation instrumentation** 工具： ```markdown 操作流程： 1. 开始记录 2. 执行组件挂载/卸载 3. 停止记录 → 查看事件监听器分配 ``` --- ### 五、修复验证 1. 添加清理函数： ```jsx useEffect(() => { const timer = setInterval(() => {}, 1000); window.addEventListener('resize', handleResize); return () => { clearInterval(timer); window.removeEventListener('resize', handleResize); }; }, []); ``` 2. 重复步骤2-4验证： - JS Heap 应稳定回落 - DOM Nodes 数量归位 - Delta 值接近0 > **专业提示**：对于复杂泄漏，使用 **Performance** 标签记录操作过程，结合火焰图分析内存分配时间点[^3][^4]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值