Javascript-脚本内存与DOM存储

Question

我正在编写用于为用户解决方程式的代码。 用户将能够输入矩阵，向量等。 现在，当我求解这些方程式时，我将解决方案写入表格，每一行代表任何给定的变量或方程式。 在计算过程中用于保存方程的javascript对象被破坏。 我这样做的目的是为了防止将大量数据存储在内存中，并可能减慢脚本速度。 以后需要数组时，将其从适当的表行读入对象。

我想知道像这样在DOM中保存内存与在内存中的对象中保存内存相比如何。 通过将这些内容作为对象而不是DOM保留在内存中，是否更有可能减慢代码执行速度？ 同样，由于这些对象将需要代码的多个部分进行访问，因此这些对象必须是全局对象。 对？

Answer 1

一言以蔽之。

Web开发中有一个恒定的规则： DOM较慢 。

选择，访问和迭代DOM元素以及读取和修改其属性是在浏览器JS中最慢的操作之一。 另一方面，使用本机JS对象非常快。 通常，我尽量避免使用DOM。

您做出（不正确的）假设，即低内存使用量在某种程度上等于提高了性能。 实际上，增加内存使用率会提高应用程序性能通常是¹ （而不仅仅是在浏览器中）。 通过将计算结果缓存在内存中的本质，您避免了在以后花费大量时间和精力来重建数据的处理器需求。 当然，您必须在内存使用与性能需求之间取得平衡。

在您的情况下，我一定会将等式对象保留在内存中。 它可能使用了非常少的内存。 例如，我刚刚在Chrome中创建了一个由1,000个整数组成的数组，并且内存分析器告诉我它使用的内存不足40 kB –几乎所有对象开销。 值本身仅占用4 kB – 1000 * 4字节（32位）。

当您认为读取DOM来重新生成对象的例程可能要花费数十到数百毫秒（或更糟糕的是，取决于复杂性）来运行时，为什么不只生成一次对象并保留它，特别是因为成本这么低？

但是，与所有性能问题一样，真正的答案是您必须分析应用程序以查看性能瓶颈的真正根源。 使用Chrome的开发人员工具的“配置文件”标签，可以在使用应用程序时获取CPU配置文件 （可衡量一段时间内的处理器利用率）和堆快照 （可即时测量内存使用情况）。

^{1-这实际上取决于您的程序是否使用了太多内存，因此必须换出页面。 在16 GB RAM已变得司空见惯的台式机上，您几乎无需担心。 但是，在资源更加受限的移动设备上观察内存使用情况仍然很重要。}

Answer 2

我想知道像这样在DOM中保存内存与在内存中的对象中保存内存相比如何。

测试一下，我希望DOM使用更多的内存，并且访问速度会慢得多。 无论如何，除非您要存储很多东西，否则对内存的影响可能很小。

通过将这些内容作为对象而不是DOM保留在内存中，是否更有可能减慢代码执行速度？

我期望相反。 访问DOM将非常慢。

同样，由于这些对象将需要代码的多个部分进行访问，因此这些对象必须是全局对象。 对？

错误。 您可以将引用保存在闭包中，也可以将所有对象放入单个数组或对象中。 无论如何，全局对象本身并不坏，它们只是被认为是不整洁的，并增加了名称冲突的机会。