专栏首页自律神仙ScarSuDevtools 老师傅养成[7] - Memory 内存

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

内存占用:

  1. allocate 分配内存(eg 声明变量
  2. 使用内存
  3. 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开始记录内存
  1. Heap snapshot堆快照,记录当前时间点内存中页面 js 对象和 dom 节点的分配情况
  2. Allocation instrumentation on timeline按时间轴记录内存,可以选记录内存分配调用栈(可以帮助定位到具体分配内存的源码)
  3. 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 -

本文分享自微信公众号 - 自律神仙ScarSu(ScarSu_Dev),作者:ScarSu

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Devtools 老师傅养成[1] - Chrome Devtools介绍

    国产的所有 “双核浏览器”,都是基于 Chromium 开发的,当然 Chrome 也是基于它。

    scarsu
  • Devtools 老师傅养成[4] - Sources 面板

    “BlackBox Script”可以在调试中忽略某些脚本(此处的 BlackBox 为动词),在 Call Stack 堆栈中会将该脚本隐藏,单步调试时也不会...

    scarsu
  • Devtools 老师傅养成[6] - Performance 面板

    google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/

    scarsu
  • 聊一聊内存管理(一)

    在我们的日常生活中,经常会遇到这样的对话。当电脑运行程序变得很慢很卡的时候,就会听到身边的朋友建议我们去增加电脑的内存。这是为什么呢?内存在计算机体系结构中起了...

    算法与编程之美
  • Android Studio 4.1 中的本地内存分析

    本文是 Android Studio 4.1 中 Profiler 有哪些新增特性 的第二部分。之前的文章侧重于介绍 Android Studio 中 Syst...

    Android 开发者
  • 一次 Node.js 内存溢出

    因为内存上限设置不合理,引起的内存溢出问题。之前压测时候只关注了是否存在内存泄露与cpu占用,而忽视了内存占用这个问题。对于部署服务时,要根据机器的内存上限以及...

    腾讯IVWEB团队
  • linux 内存管理初探

    本文主要介绍 linux 内存组织结构和页面布局,内存碎片产生原因和优化算法,linux 内核几种内存管理的方法,内存使用场景以及内存使用的那些坑。

    郑剑
  • 【 Android 场景化性能测试】内存性能及内存泄漏篇

    承接《Android场景化性能测试-方向与框架篇》,本篇详述内存性能的具体测试方案和内存泄漏问题简单定位方法。

    腾讯移动品质中心TMQ
  • 翻译 | 带你秒懂内存管理 - 第一部(共三部)

    原文地址:A crash course in memory management 原文作者:Lin Clark 译者:黑黑 校对者:Bob 要理解为什么将 Ar...

    iKcamp
  • 内存泄露

    1.简介       在计算机科学中,内存泄漏(memory leak)指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况。内存泄漏并非指内存在物理...

    猿人谷

扫码关注云+社区

领取腾讯云代金券