【Memory】chrome调试面板

本篇文章以chrome版本67.0.3396.99为例，介绍如何使用Chrome和DevTools查找影响页面性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收。

一、参考链接

https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=zh-cn

二、有哪些内存问题？

1、内存泄露
页面的性能随着时间的延长越来越差，这可能是内存泄漏的症状。内存泄漏是指，页面中的错误导致页面随着时间的延长使用的内存越来越多。

// 内存泄漏案例

var x = [];
function createSomeNodes() {
    var div,
        i = 100,
        frag = document.createDocumentFragment();
    for (;i > 0; i--) {
        div = document.createElement("div");
        div.appendChild(document.createTextNode(i + " - "+ new Date().toTimeString()));
        frag.appendChild(div);
    }
    document.getElementById("nodes").appendChild(frag);
}
function grow() {
    x.push(new Array(1000000).join('x'));
    createSomeNodes();
    setTimeout(grow,1000);
}

2、内存膨胀
页面的性能一直很糟糕，这可能是内存膨胀的症状。内存膨胀是指，页面为达到最佳速度而使用的内存比本应使用的内存多。
3、频繁垃圾回收
页面出现延迟或者经常暂停，这可能是频繁垃圾回收的症状。垃圾回收是指浏览器收回内存，浏览器决定何时进行垃圾回收。回收期间，所有脚本执行都将暂停。因此，如果浏览器经常进行垃圾回收，脚本执行就会被频繁暂停。

三、如何查找内存问题？

1、使用Chrome任务管理器实时监视内存使用。
任务管理器是一个实时监视器，可以告诉您页面当前正在使用的内存量。打开chrome->右上角选择更多工具->任务管理器->内存占用空间，查看内存是否在增长？右键点击任务管理器的表格标题并启用JavaScript memory，会发现表格多了一列。

Memory列表示原生内存，DOM节点存储在原生内存中。如果此值正在增大，则说明正在创建DOM节点。
JavaScript Memory列表示JS堆。实时数字表示您的页面上的可到达对象正在使用的内存量。如果此数字在增大，要么是正在创建新对象，要么是现有对象正在增长。

转载于:https://www.cnblogs.com/camille666/p/memory_debug_chrome.html