JavaScript内存在浏览器中是如何工作的？

Question

在构建高级JS接口和游戏时，我发现我必须深入了解浏览器如何处理JS的内存。我在内存和JavaScript方面的经验是，在以下情况下，内存变得模糊(并使动画和计算变得缓慢/滞后)：

• 页面上有大量JS生成的内容。
• 页面上有很多图形(img-元素)？

因此，我得出的结论是，如果我想保持内存新鲜，我应该从文档开始就尽可能多地包含HTML代码，因为它将被缓存，而不是保存在内存中。并移除所有当前未使用的元素。

有人有更多关于这个的信息吗？资源？链接？

Answer 1

有些事情要记住：

• 被DOM的复杂性杀死了。页面中的元素越多，获得的速度就越慢。我看到页面速度明显减慢，其中只有3000个元素(如果您有一个包含10列和100行的网格，就在那里有1000个元素)。正确的方法通常是从DOM卸载隐藏部分(分离它们)。
• 如果HTML元素附加了javascript处理程序，IE也有很长的历史不正确地释放HTML元素。如果您有一个经常刷新的长寿页面，请阅读IE内存泄漏，以及如何解决这些问题。
• 所有浏览器都将未压缩的图像存储在内存中。所以，如果你在预装背景中的海量图像，那通常是个坏主意。
• 更新DOM属性将导致页面重构，在复杂页面上这可能需要很长时间。有时，甚至获取DOM属性(例如offsetHeight)都会非常缓慢。

通常，javascript本身并不是性能瓶颈。杀死它的是与DOM的交互。不接触DOM的代码很少有性能问题。这里只有经验法则:尽可能少地与DOM交互，尽可能降低DOM的复杂性，避免重复的页面重构。

Answer 2

作为开场白。所有的HTML，无论是“从一开始就包含”，都保存在内存中。很可能也是当前页面的所有图像内容。最低限度，你在任何给定时间在屏幕上看到的所有东西都保存在当时的内存中。

Answer 3

诚实地说，这更多地取决于你在做什么。如果您没有与javascript交互，那么许多图形不会对javascript做蹲处理，但是如果您有一个包含不同元素的巨大页面，并且正在搜索整个文档中的单个元素，那么这就完全不同了。

我在做一些事情时遇到了麻烦，比如给页面添加大量的事件。在一个页面中运行太多的循环和太多的计时器。

如果javascript性能是一个问题，并且您正在计划执行密集的javascript，那么您可能需要查看网络工作者。以下是网站工作者的更多链接：

• 约翰·雷西格
• 规格