自建开发工具系列 -Webkit 内存动量监控 UI（一）

Tim

关注

发布于: 3 小时前

调试 JS 内存泄漏问题，一直使用 Chrome 的 Memory 模块

每次到下一个步骤或者页面的时候就需要点击按钮生成记录快照，并且通过快照之间的对比来找到内存泄漏的模块。

但是随着修复的进展不断加快，后期已经不需要对比快照了，主要是需要那个环节内存变化与累积量增大。这个阶段再使用内存快照的方式，效率就不太高了，毕竟打一个快照需要几秒的时间。于是就动了心思做个工具优化这个环节。

找了一下浏览器环境中的 API，发现 Webkit 提供的 window.performance 中有 JS 内存使用的信息，如下

> window.performance.memoryMemoryInfo {totalJSHeapSize: 5165379, usedJSHeapSize: 3270971, jsHeapSizeLimit: 2172649472}jsHeapSizeLimit: 2172649472totalJSHeapSize: 5165379usedJSHeapSize: 3270971__proto__: MemoryInfo

复制代码

将这些信息公式化，就可以得到

lastUsedHeap = performance.memory.usedJSHeapSize;change = performance.memory.usedJSHeapSize - lastUsedHeap;

复制代码

就可以根据 change 的值显示 GC 的内存下降时间的 UI

这时候还需要显示一个当前内存的值，所以还得做一个字节转化的方法

function bytesToMB(bytes) {    precision = Math.pow(10, 0);    i = Math.floor(Math.log(bytes) / Math.log(1024));    return `${Math.round((bytes * precision) / Math.pow(1024, i)) / precision} MB`;}

复制代码

这个时候就需要一个数据曲线展示内存变化与 GC 的模块

    const updateLoop = () => {      // 更新数据UI      if (window.performance.memory) {        window.setTimeout(updateLoop, 1000) //继续调用      }    }    window.setTimeout(updateLoop, 1000)

复制代码

这样一个便捷查看当前内存粗略情况的 UI 就准备好基本元素了，咱们下一期继续后续的工具搭建的步骤

发布于: 3 小时前阅读数: 4

原文链接:【http://xie.infoq.cn/article/e053a0641f13865df1e1633ce】。文章转载请联系作者。

Tim

关注

还未添加个人签名 2018.05.01 加入

还未添加个人简介

发布

暂无评论

创作场景

自建开发工具系列 -Webkit 内存动量监控 UI（一）

Tim

评论