本文结构
- 系列文相关
- 内存 & 内存泄漏 & GC
- 造成内存泄漏的常见原因
- 内存监控1-Task Manager 任务管理器
- 内存监控2-Devtools Performance面板
- 内存监控3-Devtools Memory面板
- 扩展
本文共计:1620字6图
预计阅读时间:4min10s
系列文相关
-
系列文请点击上方Devtools老师傅养成系列专辑
-
本文基于 chrome 浏览器版本 73.0.3683.103(正式版本)总结
-
本文目的:关于【devtools 能做什么】建立完善的知识结构,至于怎么做,请查阅官方文档;工具类知识需要实践,建议阅读本文时打开 sample[1]和 devtools 操作一遍
-
参考 1:google developers 官方文档[2]
-
参考 2:来自作者 Jon Kuoerman 在 FrontEndMaster 的 Mastering Chrome Developer Tools v2 课程[3]
-
参考 3:来自 作者 Tomek Sułkowski 在 medium 的系列文章[4]
-
Devtools脑图.png[5]
内存 & 内存泄露 & GC
内存占用:
-
allocate 分配内存(eg 声明变量
-
使用内存
-
release 释放内存
内存泄漏:
-
内存泄露-Memory Leak
:内存被占用后无法被 release,且无法被垃圾回收器回收 -
内存泄漏会引起性能问题,且时间越久越严重,因为被占用且无法回收的内存只会增加不会减少
GC 垃圾回收 Garbage Collect:
-
浏览器收回内存。浏览器决定何时进行垃圾回收。回收期间,所有脚本执行都将暂停。因此,如果浏览器经常进行垃圾回收,脚本执行就会被频繁暂停
造成内存泄露常见原因
-
fogotten timer
被遗忘的计时器:例如调用 setInterval()方法一定要加结束条件 -
Dettached HTMLElement
分离的 dom 节点:在 dom 被移除后,dom 变量仍然存在
内存监控 1-Task manager 任务管理器
-
chorme 浏览器 -> task manager 任务管理器工具中,可以监控每个 tab 页的 js 内存占用大小
![](https://i-blog.csdnimg.cn/blog_migrate/e35beb124d095cc259a9be4f4a2d2534.png)
-
Memory
列表示原生内存。DOM 节点存储在原生内存中。如果此值正在增大,则说明正在创建 DOM 节点。 -
JavaScript Memory
列表示 JS 堆。此列包含两个值。实际大小表示页面上的对象正在使用的内存量。如果此数字在增大,要么是正在创建新对象,要么是现有对象正在增长。
内存监控 2-Devtools Performance 面板
-
在
Performance
面板记录性能时,勾选memory
即可在分析结果中看到 memory 占用情况
![](https://i-blog.csdnimg.cn/blog_migrate/431b322d20cd28b4d1ba1435289bfb7d.png)
//示例1:正常的内存占用与GC
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement("div"));
}
x.push(new Array(1000000).join("x"));
}
setInterval(grow, 100);
![](https://i-blog.csdnimg.cn/blog_migrate/63cde11006ee868c3a0a755d7578a284.png)
//示例2:不可被GC的内存泄漏
function grow() {
// for (var i = 0; i < 10000; i++) {
// document.body.appendChild(document.createElement("div"));
// }
// x.push(new Array(1000000).join("x"));
var ul = document.createElement("ul");
for (var i = 0; i < 10; i++) {
var li = document.createElement("li");
ul.appendChild(li);
}
detachedTree = ul;
}
setInterval(grow, 1000);
![](https://i-blog.csdnimg.cn/blog_migrate/3ecdcac85e6cd3a145ad3e10d723c684.png)
内存监控 3-Devtools Memory 面板
![](https://i-blog.csdnimg.cn/blog_migrate/67ab9c5f70b9af427c3a34802e6dc2bb.png)
-
如上图所示,在右侧三种内存分析模式选择一种后,即可点击左上角
record
开始记录内存
-
Heap snapshot
堆快照,记录当前时间点内存中页面 js 对象和 dom 节点的分配情况 -
Allocation instrumentation on timeline
按时间轴记录内存,可以选记录内存分配调用栈(可以帮助定位到具体分配内存的源码) -
Allocation sampling
使用抽样方法记录内存分配。具有最小的性能开销,可用于长时间运行的操作。提供了由 JavaScript 执行堆栈细分的良好近似分配。
-
左上角的垃圾桶图标
Collect garbage
是强制执行一次垃圾回收,内存监控的最佳实践是在监控内存前执行一次强制垃圾回收 -
利用上述示例 2 代码,执行时间线 Memory 分析:
![](https://i-blog.csdnimg.cn/blog_migrate/b73c5034e2a8e88a7487db4ca7707711.png)
扩展
-
内存相关术语[6]
-
深入内存分析[7]
参考资料
[1]
sample: https://masteringdevtools.com/
[2]google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/
[3]Mastering Chrome Developer Tools v2 课程: https://frontendmasters.com/courses/chrome-dev-tools-v2
[4]系列文章: https://medium.com/@tomsu
[5]Devtools脑图.png: https://i.loli.net/2019/04/19/5cb95639a9f73.png
[6]内存相关术语: https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101
[7]深入内存分析: https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots
- END -相关文章
Devtools 老师傅养成[1] - Chrome Devtools介绍
Devtools 老师傅养成[2] - Elements 面板
Devtools 老师傅养成[3] - Console 面板
Devtools 老师傅养成[4] - Sources 面板
Devtools 老师傅养成[5] - Network 面板
Devtools 老师傅养成[6] - Performance 面板
其他文章
我的博客
www.scarsu.com
点个“在看”鼓励我吧????