推荐阅读：解决内存问题

1. 任务管理器

我们看看下面这幅图：

内存占用空间：原生内存，Dom节点就是存在原生内存里面的。

Javascript使用的内存：代表JS堆内存，我们只需要关心括号里面的值（实时值）就可以了，JavaScript对象就存在JS堆里面。

2. Performance

我们看看下面这幅图，我在不停给vue的v-for加元素，很明显的Nodes不断在增长，但是JS Heap却起起落落。

JS堆占用上升我们可以理解，但是为什么会下降了，我们放大看可以看到，每次下降都是GC（garbage collection 垃圾回收）执行过后。

所以我们不但可以利用performance来看JS堆的使用情况，还可以看线程在执行什么任务，占用了多久时间。

3.Memory  拍摄堆快照

刚刚我们我们在任务管理器和Performance可以看到JS Heap的大小和趋势，但是我们没办法看到堆里面的细节内存，这个时候，我们可以到Memory页签，拍摄一个堆快照，看看里面的细节内容。

下面这幅图我们看到了堆里面都有什么对象，其中非常醒目的2列就是shallow size 和 Retained Size (推荐阅读：内存术语)

Shallow Size：浅层大小，就是对象本身的大小（不包括它内部引用的对象），这个我们通常不太关注

Retained Size：保留大小，就是如果GC回收这个对象后，可以释放多少内存，这个我们非常关注

以下面这幅图为例，VueComponent本身的大小非常小，但是它的Retained Size很大，占了总占用的60%，如果把VueComponent销毁，我们就可以释放出16.85M的内存。

这个是典型的小对象，导致大问题。对象本身不大，但是引用了一些大对象，使得这些大对象没办法被GC回收。

好奇的我看了下，vue给对象加上双向绑定的话，占用的内存多了多少。newObj是我自定义写的构造函数，可以看到，上面一副图的newObj占了6.16M(加了getter setter的双向绑定)，下面这幅图newObj只占用640K。可以判断出来，加了双向绑定，对象本身是10倍的内存占用。这个还不排除Watcher的占用 (不过watcher通常占用不多，这个例子的话是从1k变成了837k)

4. Performance Monitor

还有一个入口比较隐蔽的内存监测器，在下图这里打开。

这个监测器我理解就是上面说到的Performance的实时简化版本，上面的Performance可以录快照，可以看到每个点比较详细的信息，但是不是实时的。

而这个Performance Monitor是实时的，但是没办法像Performance一样可以看到这么多细节信息。

最新文章

  1. asp.net下调用Matlab生成动态链接库
  2. centos6.5kvm虚拟化安装部署
  3. UVA11542 Square(高斯消元 异或方程组)
  4. 如何创建 CSS
  5. 简单来谈谈alloc分配器
  6. IE内存泄露与无法回收研究小结
  7. 在刚接触TI-DM8127-ipnc框架时注意的问题
  8. go build 时报错 cc1.exe: sorry, unimplemented: 64-bit mode not compiled in
  9. redis单主机多实例
  10. Itext简绍及操作PDF文件
  11. 解决Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/Student_recruit]]
  12. VIm快捷操作
  13. RocketMQ
  14. .NetCore 下开发独立的（RPL）含有界面的组件包 （六）实现业务功能
  15. Apache Kafka - KIP-42: Add Producer and Consumer Interceptors
  16. Yii2 Restful api搜索实现
  17. pom中配置的仓库无效的问题
  18. Oracle如何解决日期格式“01-3月 -18”的显示问题（3种处理方式）
  19. RabbitMQ 队列、消息持久化
  20. js数据类型 --运算符

热门文章

  1. CSS定位以及z-index属性（层叠性）的详解（转）
  2. Java 中的锁原理、锁优化、CAS、AQS 详解！
  3. （十五）struts2之注解
  4. （十）springmvc之文件的处理
  5. tiny-Spring【2】逐步step分析-新加入特性
  6. Java Web 深入分析（6） Tomcat
  7. Windows 批处理 bat 开启 WiFi 菜单选项 设置ID PWD
  8. Java 18套JAVA企业级大型项目实战分布式架构高并发高可用微服务电商项目实战架构
  9. Go part 4 数据容器（数组，slice，string，map，syncMap，list）
  10. restTemplate源码解析（四）执行ClientHttpRequest请求对象