讲师中心 微信公众号
AI工具推荐 视频效率加速

JS 项目中未清理的定时任务怎么用性能工具找出来

云静同学_1397

云静同学_1397

发布时间:2026-10-14 09:23:33

|

615人浏览过

|

来源于php中文网

原创

Chrome DevTools 的 Memory 和 Performance 面板可精准定位定时器内存泄漏:Performance 面板通过 Timer Fired 事件和火焰图识别未清除的活跃定时器;Memory 面板对比堆快照,筛选 Interval、Detached DOM 和持续增长的构造函数,确认残留引用;Sources 面板启用 Timers 断点快速溯源闭包捕获对象;Console 命令辅助排查活跃定时器。

js 项目中未清理的定时任务怎么用性能工具找出来

直接用 Chrome DevTools 的 Memory 和 Performance 面板就能定位,不用猜、不靠日志。关键是看“定时器是否还在跑”和“它拽着哪些对象不放”。

Performance 面板抓活跃定时器触发

打开 DevTools → Performance 面板 → 勾选 Memory 和 Timers(可在录制设置里展开更多选项)→ 点击录制 → 做一段操作(比如进入页面、打开弹窗、再关闭)→ 停止录制。

回放时重点关注:

  • 时间轴下方的 Timer Fired 事件条:如果在页面已离开或组件已卸载后,仍有密集、规律出现的 Timer Fired,说明定时器没停
  • 点开某个 Timer Fired 事件 → 查看 Call Stack → 能直接看到是哪行代码调用了 setInterval 或 setTimeout
  • 配合 Main 线程火焰图,看回调函数是否引发长任务(>50ms),这往往是泄漏叠加性能卡顿的信号

Memory 面板拍快照查残留引用

这是确认内存泄漏最可靠的一步:打开 Memory 面板 → 点击 Take heap snapshot → 操作(如打开又关闭一个模块)→ 再拍一张 → 对比两次快照。

在第二张快照中筛选:

Wjs Uploading Video
Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载
  • 搜索 Interval 或 setInterval:如果结果里 JSFunction / Closure 数量明显多于第一张,且持有大量闭包变量,就是未清理的定时器在作祟
  • 筛选 Detached DOM tree:若这些脱离 DOM 的节点被某个 Interval 回调引用着,说明定时器正锁住整片 DOM 内存
  • 按 Constructor 排序,关注持续增长的类名(如 VueComponent、ReactRoot、ChartInstance),再往上追溯到它们被哪个 Closure 持有

Sources 面板设断点快速溯源

想立刻知道某个定时器从哪来?打开 Sources 面板 → 左侧边栏点 Event Listener Breakpoints → 展开 Timers → 勾选 setTimeout 和 setInterval。

刷新页面或触发相关逻辑,执行流会在定时器注册那一刻自动中断。此时:

  • 看右侧 Scope 面板,能直观看到闭包捕获了哪些变量(尤其是 this、vm、data、refs 等大对象)
  • 看 Call Stack,逐层点进去,就能定位到原始调用位置(比如某个 useEffect 或 mounted 钩子)
  • 配合右键某帧 → Reveal in Overview,可跳转到 Performance 时间轴对应时刻,交叉验证

命令行辅助排查(适合高频怀疑场景)

在 Console 中输入以下命令,能快速列出当前所有活跃定时器及其回调源码位置:

getEventListeners(window).setTimeout || []
getEventListeners(window).setInterval || []

注意:这个 API 并不直接返回定时器 ID 列表,但结合 Performance 录制 + 断点,可以快速锁定可疑 ID。更实用的是:

  • 手动运行 debugger; setInterval(() => {}, 1000);,然后立即在 Timers 断点处暂停,观察上下文
  • 在关键生命周期钩子(如 React 的 cleanup 函数)里加 console.log('clearing timer:', id),确认清除逻辑是否真被执行

热门AI工具

更多
Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

相关专题

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

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

4866

2023.06.20

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

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

1209

2023.07.04

js四舍五入
js四舍五入

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

4784

2023.07.04

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

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

940

2023.09.01

JavaScript转义字符
JavaScript转义字符

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

1876

2023.09.04

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

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

3445

2023.09.04

如何启用JavaScript
如何启用JavaScript

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

4473

2023.09.12

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

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

2940

2023.09.20

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

0

2026.10.15

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn