javascript - Chrome 开发者工具探查器

标签 javascript google-chrome google-chrome-devtools profiler

在 Javascript 应用程序中搜索内存泄漏时,我尝试使用 Chrome DevTools Profiler。是否有一些详细信息描述可能在其中找到的所有条目?

例如,在执行一个简单的“打开主页,打开另一个页面,返回主页”并查看快照比较后,我可以找到对象数很大并且感兴趣的行“(array)”。打开该节点时,我看到数千行,例如...

  • (脚本行结束)[] @89876
  • (转换数组)[] @748323
  • (对象属性)[] @77529
  • ( map 描述符)[] @13823
  • (代码搬迁信息)[] @722653
  • []@748003
  • (对象元素)[] @40917

我在哪里可以读到它?

最佳答案

堆中有许多不同的 v8 内部事物无法从 javascript 访问。

例如(脚本行结束)是一个数组,其中包含脚本的行结束偏移量。 v8 需要它来设置断点。

每次创建对象时,v8 都会做很多事情并为它们分配内存。 请参阅有关 v8 的 Lars Bak 视频。 http://www.youtube.com/watch?v=hWhMKalEicY

如果您对这个主题感兴趣,可以找到许多关于 v8 内部结构的幻灯片和演示文稿。

查找泄漏的最简单方法是使用“记录堆分配”配置文件。 它向您显示带有分配的“实时”图表。

您需要开始记录,重复您的场景几次,如果代码有泄漏,您将在图表上看到相同数量的蓝色垂直条。所以你应该停止录制并选择中间某处的蓝色条,看看它有什么对象。

第一个蓝色条并不有趣,因为它可能只分配了一次。

最后一个也不有趣,因为它可能有分配,将在您的场景的下一次重复时释放。

所以最好的候选人是中间的酒吧。 http://www.youtube.com/watch?v=x9Jlu_h_Lyw

最有趣的项目是由您的脚本创建的对象。

关于javascript - Chrome 开发者工具探查器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18870868/

相关文章:

javascript - 如何通过按散点图中的更新按钮来更改(过渡)每个圆的半径?

javascript - 使用 `which` 属性以编程方式触发 keydown 事件

google-chrome - 如何跳过 cucumber 中的错误?

google-chrome - chrome CPU 时间线中的条纹灰色区域是什么意思?

google-chrome-devtools - 源面板中的 `threads` 是什么

javascript - 如何使 javascript 函数中的语句在 chrome 扩展中按顺序运行?

javascript - 当我用 JavaScript 在 Chrome 浏览器上拖放图片时,如何防止打开新标签页?

javascript - 如果父类有子类,则使用 CSS 或 Jquery 隐藏母亲 div secondchild 类

javascript - 在 Nightwatch 中运行 "traditional"单元测试

google-chrome - 在 chrome 57 和 58 浏览器中未为 '.amazonaws.com' 设置 Cookie