南顺网络

JavaScript性能故事：选择可视化方法

不完美的堆造就完美的图形

　　这些工具能提供多少价值，将由其快速诊断内存配置文件问题的能力的大小决定。考虑到我可以利用直觉工程 来增强可视化的方法，我提出了三个成功的标准:

　　能够很容易创建基线。 这样用户就可以在不同的堆配置文件或时间样本之间轻而易举的看出差异。

　　能够快速有效地传达问题。

　　能够有效地显示许多节点。 许多，许多，许多。

　　为了有效地创建基线，我们需要一些能够一目了然就能表示很多相关数据的东西。 我用来表示节点的两种工具是大小和颜色。 通过大小绘制节点，能够快速的将占用内存大的应用程序给高亮显示出来。 类似地，通过颜色会直接点也能够一目了然的分析堆状态。

　　有了这个总体思路,如何传达问题这个难题也就迎刃而解了。结合Chrome堆配置文件的输出和我自己的经验，我知道节点自身大小和保留大小至关重要。 我也知道我需要找出一些代表保留者的方法，因为它们在解决内存问题方面发挥了关键作用。

　　第一个猜测？力导向图

　　需要寻找出一个能够既能够单独显示实体格式大小的和颜色的，又能够指示出它们之间的关系，因此我想到了力导向图

力导向图非常棒！为了体现通信的重要性,它们会检查所有的box——有效地表示不同大小的节点，颜色，它们显示节点之间的关系。D3甚至提供了一个强制布局模块，使得它可以很容易地实现其中一个sucker。

　　不幸的是，它们没有达到性能的要求。强制布局的计算成本很高。大多数浏览器需要几分钟的时间来布局数千个节点。 此外，当它们变大时，看上去也会变得很拥挤。

编辑:--ns868