JavaScript内存如何在浏览器中运行？

Question

在构建高级JS界面和游戏时，我发现我必须深入研究浏览器如何为JS处理内存。我在内存和JavaScript方面的经验是，在以下情况下，内存会被记录（并使动画和计算变慢/滞后）：

• 有很多JS生成的内容 在页面上
• 有很多图形 （img-elements）在页面上？

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

有没有人对此有任何更多信息？资源？链接？

Answer 1

要记住的一些事情：

• IE被DOM复杂性杀死。元素越多，页面的一部分就越慢。我看到页面显着减慢，只有3000个元素（如果你有一个10列100行的网格，那就是1000个元素）。正确的方法通常是从DOM中卸载隐藏的部分（分离它们）
• IE还有很长的历史，如果他们附加了javascript处理程序，就无法正确释放HTML元素。如果你有一个经常刷新的长期页面，请阅读IE内存泄漏，以及如何解决这些问题。
• 所有浏览器都将未压缩的图像存储在内存中。所以，如果你在后台预装了大量的大图像，那通常是一个坏主意。
• 更新DOM属性将导致页面重排，在复杂页面上可能需要很长时间。有时即使获取DOM属性（例如offsetHeight）也会非常慢。

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

Answer 2

首先。所有HTML，无论是否“从头开始”，都保存在内存中。最有可能也是当前页面的所有图像内容。至少，您在任何给定时间在屏幕上看到的所有内容都会保留在内存中。

Answer 3

说实话，它更倾向于更依赖于你正在做的事情。如果你没有与它们进行交互，很多图形都不会蹲到javascript，但如果你有一个填充了不同元素的巨大页面，并且你在整个文档中搜索单个元素，那么这是一个不同的完全是事情。

我在处理向页面添加大量事件方面遇到了问题。在页面中运行太多循环和太多计时器。

如果javascript性能存在问题并且您计划进行密集型javascript，则可能需要查看webworkers。以下是关于网络工作者的更多链接：

• John Resig
• The spec