Performance 内存监控使用技巧详解

目录
  • Performance
    • 介绍
    • 使⽤
    • 内存问题的具体体现
    • 监控内存的⼏种⽅式
    • TimeLine

Performance

介绍

为什么使⽤Performance呢？GC 的⽬的是为了实现内存空间的良性循环，⽽良性循环的基⽯是合理的使⽤内存空间。 由于 ECMAScript 并没有提供操作内存的 API，所以内存分配是否合理我们不可知。Performance 提供了多种⽅式，在程序运⾏时可以时时监控，确定内存分配是否合理。

使⽤

具体步骤

打开浏览器输⼊⽬标⽹址

进⼊开发⼈员⼯具⾯板

开启录制功能，访问具体⻚⾯

执⾏⽤户⾏为，⼀段时间后停⽌录制

分析界⾯中记录的内存信息

内存问题的具体体现

内存问题的外在显示（限定⽹络情况正常）

  • ⻚⾯出现延迟加载或经常性暂停

    • 可能存在频繁的垃圾回收，程序代码可能瞬间占满内存空间
  • ⻚⾯持续性出现糟糕的性能（卡顿）
    • 可能存在内存膨胀，为了达到最优的效果，程序⼀直在申请内存空间，⽽申请的空间⼤⼩远超过当前设备能提供的内存⼤⼩。
  • ⻚⾯的性能随时间延⻓越来越差可能存在内存泄露。某些代码会随着时间的增⻓，让可⽤内存空间越来越少。 监控内存的⽅式 界定内存问题的标准
  • 内存泄漏：内存使⽤持续⾛⾼，没有下降趋势。 通过内存⾛势图可以得到相关信息
  • 内存膨胀：相对模糊。在多数设备（硬件）上都可能存在性能问题。可以测试不同的设备。 如果在常⽤设备上程序表现都⽐较差，那就不是设备问题⽽是程序本身的问题。
  • 频繁垃圾回收：通过内存变化图进⾏分析，通过界⾯很难感知到。

监控内存的⼏种⽅式

  • 浏览器任务管理器 以数值的形式，体现程序运⾏过程中内存的变化
  • Timeline时序图记录 以时间点的形式呈现内存的变化
  • 堆快照查找分离DOM 分离 DOM 其实就是内存的泄露。堆快照可以有针对性的查找分离DOM
  • 判断是否存在频繁的垃圾回收 使⽤其他⼯具 任务管理器监控 代码演示：通过点击事件创建⻓度很⻓的数组。
 <body>
<button id="btn">Add</button>
</body>
<script>
	const oBtn = document.getElementById('btn')
	oBtn.onclick = function(){
		let arrList = new Array(1000000)
	}
</script>

  • Memory 列表示原⽣内存。DOM 节点存储在原⽣内存中。 如果此值正在增⼤，则说明正在创建 DOM 节点。
  • JavaScript Memory 列表示 JS 堆。此列包含两个值。 实时数字（括号中的数字）表示⻚⾯上的可到达对象正在使⽤的内存量。 如果此数字在增⼤，要么是正在创建新对象，要么是现有对象正在增⻓。

此时点击按钮，实时内存增⼤。如果持续增⻓，当前⼯具⽆法监控。只能判断，⽆法定位问题。

TimeLine

可以定位问题 代码示例：

<body>
<button id="btn">Add</button>
</body>
<script>
var x = []
function grow() {
for (var i = 0; i < 10000; i++) {
	// 创建⼤量元素
	document.body.appendChild(document.createElement('div'))
}
// 创建字符串
x.push(new Array(1000000).join('x'))
}
document.getElementById('btn').addEventListener('click', grow)
</script>

每次按代码中引⽤的按钮时，将向⽂档正⽂附加 1 万个 div 节点，并将⼀个由 100 万个 x 字 符组成的字符串推送到 x 数组。 然后

  • 在 DevTools 上打开 Timeline ⾯板。
  • 启⽤ Memory 复选框。
  • 做记录。

如果查看节点计数器（绿⾊图表），节点计数以离散步⻓⽅式增⼤。 可以假定节点计数的每次增⼤都是对 task() 的⼀次调⽤。 JS 堆图表（蓝⾊图表）的显示并不直接。为了符合最佳做法，第⼀次下降实际上是⼀次强制垃圾回收（通过按 Collect garbage 按钮实现）。随着记录的进⾏， JS 堆⼤⼩⾼低交错变化。这种现象是正常的并且在预料之中：每次点击按钮，JavaScript代码都会创建 DOM 节点，在创建由 100 万个字符组成的字符串期间，代码会完成⼤量⼯作。这⾥的关键是，JS 堆在结束时会⽐开始时⼤（这⾥“开始”是指强制垃圾回收后的时间点）。在实际使⽤过程中，如果您看到这种 JS 堆⼤⼩或节点⼤⼩不断增⼤的模式，则可能存在内存泄漏。

通过时序图和屏幕快照，可以找到具体的问题所在。

以上就是Performance 内存监控使用技巧详解的详细内容，更多关于Performance 内存监控的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • High Performance JavaScript(高性能JavaScript)读书笔记分析

    第一章:加载和执行 浏览器的JavaScript的引擎是编译器层的优化: 当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味着<script>标签每次出现都霸道地让页面等带脚本的解析和执行(每个文件必须等到前一个文件下载并执行完成才会开始下载),所以头部的JS和CSS用来渲染页面,交互行为(几乎所有)的JS放在<body>底部: 主流浏览器都允许并行下载JS. 减少外链脚本数量将会改善性能(合并JS) 任何网站都可以使用一个把制定文件合并处理后的URL

  • .NET性能调优之一：ANTS Performance Profiler的使用介绍

    .NET性能调优之一：ANTS Performance Profiler的使用介绍

    在使用.NET进行快速地上手与开发出应用程序后,接下来面临的问题可能就是程序性能调优方面的问题,而性能调优有时候会涉及方方面面的问题,如程序宿主系统.数据库.网络环境等等,而当程序异常庞大复杂的时候,性能调优将变得更加无从下手. 本系列文章主要会介绍一些.NET性能调优的工具.Web性能优化的规则(如YSlow)及方法等等内容.成文前最不希望看到的就是园子里不间断的"哪个语言好,哪个语言性能高"的争论,不多说,真正的明白人都应该知道这样的争论有没有意义,希望我们能从实际性能优化的角度去

  • MySQL5.7中 performance和sys schema中的监控参数解释(推荐)

    1.performance schema:介绍 在MySQL5.7中,performance schema有很大改进,包括引入大量新加入的监控项.降低占用空间和负载,以及通过新的sys schema机制显著提升易用性.在监控方面,performance schema有如下功能: ①:元数据锁: 对于了解会话之间元数据锁的依赖关系至关重要.从MySQL5.7.3开始,就可以通过metadata_locks表来了解元数据锁的相关信息: --哪些会话拥有哪些元数据锁    --哪些会话正在等待元数据锁

  • 出现错误mysql Table 'performance_schema...解决办法

    测试环境搭了一个mariadb 5.7,使用jdbc驱动 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.34</version> </dependency> 在hibernate工程中正常. 临时搭建了一个jdbc的简单工程,发现连接数据库报错: Table 'pe

  • PerformanceObserver自动获取首屏时间实现示例

    PerformanceObserver自动获取首屏时间实现示例

    目录 介绍 构造函数 提供的方法 重点我们看看observer.observe(options); 实例 实际使用 介绍 PerformanceObserver 可用于获取性能相关的数据,例如首帧fp.首屏fcp.首次有意义的绘制 fmp等等. 构造函数 PerformanceObserver() 创建并返回一个新的 PerformanceObserver 对象. 提供的方法 PerformanceObserver.observe() 当记录的性能指标在指定的 entryTypes 之中时,将调

  • Performance 内存监控使用技巧详解

    Performance 内存监控使用技巧详解

    目录 Performance 介绍 使⽤ 内存问题的具体体现 监控内存的⼏种⽅式 TimeLine Performance 介绍 为什么使⽤Performance呢?GC 的⽬的是为了实现内存空间的良性循环,⽽良性循环的基⽯是合理的使⽤内存空间. 由于 ECMAScript 并没有提供操作内存的 API,所以内存分配是否合理我们不可知.Performance 提供了多种⽅式,在程序运⾏时可以时时监控,确定内存分配是否合理. 使⽤ 具体步骤 打开浏览器输⼊⽬标⽹址 进⼊开发⼈员⼯具⾯板 开启录制功

  • Golang 内存管理简单技巧详解

    目录 引言 预先分配切片 结构中的顺序字段 使用 map[string]struct{} 而不是 map[string]bool 引言 除非您正在对服务进行原型设计,否则您可能会关心应用程序的内存使用情况.内存占用更小,基础设施成本降低,扩展变得更容易/延迟. 尽管 Go 以不消耗大量内存而闻名,但仍有一些方法可以进一步减少消耗.其中一些需要大量重构,但很多都很容易做到. 预先分配切片 数组是具有连续内存的相同类型的集合.数组类型定义指定长度和元素类型.数组的主要问题是它们的大小是固定的——它们

  • myeclipse8.5优化技巧详解

    还在为自己的配置低而抛弃MyEclipse8.5?还在为那低下的速度而苦恼吗?下面我们看看myeclipse8.5优化技巧的具体方法. 取消自动validation validation有一堆,什么xml.jsp.jsf.js等等,我们没有必要全部都去自动校验一下,只是需要的时候才会手工校验一下! 取消方法: windows–>perferences–>myeclipse–>validation 除开Manual下面的复选框全部选中之外,其他全部不选 手工验证方法: 在要验证的文件上,单

  • Java VisualVM监控远程JVM(详解)

    Java VisualVM监控远程JVM(详解)

    我们经常需要对我们的开发的软件做各种测试, 软件对系统资源的使用情况更是不可少, 目前有多个监控工具, 相比JProfiler对系统资源尤其是内存的消耗是非常庞大,JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到一个比较直观的界面 从左边Applications树中可以知道,不光可以监控本地JVM运行情况, 还可以监控远程机器上的JVM运行情况. 本地监控:只要打开某个JAVA程序就会自

  • Java 用Prometheus搭建实时监控系统过程详解

    上帝之火 本系列讲述的是开源实时监控告警解决方案Prometheus,这个单词很牛逼.每次我都能联想到带来上帝之火的希腊之神,普罗米修斯.而这个开源的logo也是火,个人挺喜欢这个logo的设计. 本系列着重介绍Prometheus以及如何用它和其周边的生态来搭建一套属于自己的实时监控告警平台. 本系列受众对象为初次接触Prometheus的用户,大神勿喷,偏重于操作和实战,但是重要的概念也会精炼出提及下.系列主要分为以下几块 Prometheus各个概念介绍和搭建,如何抓取数据(本次分享内容)

  • Redis实战之Jedis使用技巧详解

    目录 一.摘要 二.Jedis 2.1.基本使用 2.2.连接池 2.3.连接池配置 2.4.字符串常用 API 操作 2.5.哈希常用 API 操作 2.6.列表常用 API 操作 2.7.集合常用 API 操作 2.8.有序集合常用 API 操作 三.集群配置 3.1.哨兵模式 3.2.集群模式 四.小结 一.摘要 在上一篇文章中,我们详细的介绍了 redis 的安装和常见的操作命令,以及可视化工具的介绍. 刚知道服务端的操作知识,还是远远不够的,如果想要真正在项目中得到应用,我们还需要一个

  • 关于Java变量的声明、内存分配及初始化详解

    实例如下: class Person { String name; int age; void talk() { System.out.println("我是: "+name+", 今年: "+age+"岁"); } } public class TestJava2_1 { public static void main(String args[]) { Person p; if (p == null) { p = new Person(); }

  • Linux共享内存实现机制的详解

    Linux共享内存实现机制的详解

    Linux共享内存实现机制的详解 内存共享: 两个不同进程A.B共享内存的意思是,同一块物理内存被映射到进程A.B各自的进程地址空间.进程A可以即时看到进程B对共享内存中数据的更新,反之亦然.由于多个进程共享同一块内存区域,必然需要某种同步机制,互斥锁和信号量都可以. 效率: 采用共享内存通信的一个显而易见的好处是效率高,因为进程可以直接读写内存,而不需要任何数据的拷贝.对于像管道和消息队列等通信方式,则需要在内核和用户空间进行四次的数据拷贝,而共享内存则只拷贝两次数据[1]: 一次从输入文件到

  • JavaScript代码异常监控实现过程详解

    JavaScript代码异常监控实现过程详解

    这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 JavaScript异常一般有两方面:语法错误和运行时错误.两种错误的捕获和处理方式不同,从而影响具体的方案选型.通常来说,处理JS异常的方案有两种:try...catch捕获 和 window.onerror捕获.以下就两种方案分别分析各自的优劣. 虽然语法错误本应该在开发构建阶段使用测试工具避免,但难免会有马失前蹄部署到线上的时候.

  • 分布式监控系统之Zabbix主动、被动及web监控的过程详解

    前文我们了解了zabbix的网络发现功能,以及结合action实现自动发现主机并将主机添加到zabbix hosts中,链接指定模板进行监控:回顾请参考https://www.jb51.net/article/200678.htm:今天我们来了解下zabbix的主动监控.被动监控以及web监控相关话题: 1.什么是主动监控?什么是被动监控? 我们知道获取数据的方式有两种,一种是get,一种是push:在zabbix中描述主动监控和被动监控都是站在agent的一方来描述的:我们把agent主动将数

随机推荐