Devtools 老师傅养成[7] - Memory 内存
时间:2022-07-27
本文章向大家介绍Devtools 老师傅养成[7] - Memory 内存,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文结构
- 系列文相关
- 内存 & 内存泄漏 & GC
- 造成内存泄漏的常见原因
- 内存监控1-Task Manager 任务管理器
- 内存监控2-Devtools Performance面板
- 内存监控3-Devtools Memory面板
- 扩展
本文共计:1620字6图
预计阅读时间:4min10s
系列文相关
- 本文基于 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 内存占用大小
-
Memory
列表示原生内存。DOM 节点存储在原生内存中。如果此值正在增大,则说明正在创建 DOM 节点。 -
JavaScript Memory
列表示 JS 堆。此列包含两个值。实际大小表示页面上的对象正在使用的内存量。如果此数字在增大,要么是正在创建新对象,要么是现有对象正在增长。
内存监控 2-Devtools Performance 面板
- 在
Performance
面板记录性能时,勾选memory
即可在分析结果中看到 memory 占用情况
//示例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);
//示例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);
内存监控 3-Devtools Memory 面板
- 如上图所示,在右侧三种内存分析模式选择一种后,即可点击左上角
record
开始记录内存
-
Heap snapshot
堆快照,记录当前时间点内存中页面 js 对象和 dom 节点的分配情况 -
Allocation instrumentation on timeline
按时间轴记录内存,可以选记录内存分配调用栈(可以帮助定位到具体分配内存的源码) -
Allocation sampling
使用抽样方法记录内存分配。具有最小的性能开销,可用于长时间运行的操作。提供了由 JavaScript 执行堆栈细分的良好近似分配。
- 左上角的垃圾桶图标
Collect garbage
是强制执行一次垃圾回收,内存监控的最佳实践是在监控内存前执行一次强制垃圾回收 - 利用上述示例 2 代码,执行时间线 Memory 分析:
扩展
- 内存相关术语[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 -
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法