我是否已达到浏览器中 JavaScript 可以处理的对象大小的限制？

2023-11-25

我正在嵌入一个大数组<script>我的 HTML 中的标签，如下所示（没什么奇怪的）：

<script>
    var largeArray = [/* lots of stuff in here */];
</script>

In this particular example, the array has 210,000 elements. That's well below the theoretical maximum of 2³¹ - by 4 orders of magnitude. Here's the fun part: if I save JS source for the array to a file, that file is >44 megabytes (46,573,399 bytes, to be exact).

如果你想亲自看看，你可以从 GitHub 下载。（里面的所有数据都是固定的，所以很多都是重复的。在生产中不会出现这种情况。）

现在，我真的不关心serving那么多数据。我的服务器对其响应进行 gzip 压缩，因此实际上不需要那么长时间即可通过网络获取数据。然而，页面一旦加载，就会有一种非常令人讨厌的倾向：crash浏览器。我根本不在 IE 中进行测试（这是一个内部工具）。我的主要目标是 Chrome 8 和 Firefox 3.6。

在 Firefox 中，我可以在控制台中看到一个相当有用的错误：

Error: script stack space quota is exhausted

在 Chrome 中，我只需获取悲伤标签页面：

enter image description here

切入正题，已经

Is this really我们现代的“高性能”浏览器无法处理太多数据？
我能做些什么*来优雅地处理这么多数据吗？

顺便说一句，我能够在 Chrome 中打开和关闭它（阅读：不会使选项卡崩溃）。我真的认为 Chrome 至少是由更坚硬的东西制成的，但显然我错了......

Edit 1

@Crayon：我并不是想证明自己的合理性why我想立即将这么多数据转储到浏览器中。简短版本：要么我解决这个（诚然不是那么容易）问题，要么我必须解决一大堆其他问题。我现在选择更简单的方法。

@various：现在，我并不是特别寻找实际减少数组中元素数量的方法。我知道我可以实现 Ajax 分页或其他什么，但这在其他方面给我带来了一系列问题。

@Phrogz：每个元素看起来像这样：

{dateTime:new Date(1296176400000),
 terminalId:'terminal999',
 'General___BuildVersion':'10.05a_V110119_Beta',
 'SSM___ExtId':26680,
 'MD_CDMA_NETLOADER_NO_BCAST___Valid':'false',
 'MD_CDMA_NETLOADER_NO_BCAST___PngAttempt':0}

@Will：但我有一台配备 4 核处理器、6 GB RAM、超过半 TB 磁盘空间的计算机......而且我什至不要求浏览器快速执行此操作 - 我只是要求让它发挥作用at all! ☹

Edit 2

任务完成！

有了来自的现场建议Juan也Guffa，我能够让它发挥作用！看来问题就出在parsing源代码，实际上并没有在内存中使用它。

总结一下胡安回答中的评论泥潭：我不得不将我的大数组分成一系列较小的数组，然后Array#concat()他们，但这还不够。我also不得不把它们分开var声明。像这样：

var arr0 = [...];
var arr1 = [...];
var arr2 = [...];
/* ... */
var bigArray = arr0.concat(arr1, arr2, ...);

对于所有为解决此问题做出贡献的人：谢谢。第一轮由我来！

_{*other than the obvious: sending less data to the browser}

这就是我要尝试的：你说这是一个 44MB 的文件。这肯定需要超过 44MB 的内存，我猜这需要超过 44MB 的 RAM，也许是半个 gig。您能否减少数据直到浏览器不崩溃并查看浏览器使用了多少内存？

即使仅在服务器上运行的应用程序也不会读取 44MB 文件并将其保留在内存中。话虽如此，我相信浏览器应该能够处理它，所以让我运行一些测试。

（使用Windows 7，4GB内存）

第一次测试我将阵列切成两半，没有任何问题，使用 80MB，没有崩溃

第二次测试我将数组分成两个单独的数组，但仍然包含所有数据，使用 160Mb，没有崩溃

第三次测试由于 Firefox 说它耗尽了堆栈，问题可能是它无法立即解析数组。我创建了两个单独的数组 arr1, arr2 然后执行 arr3 = arr1.concat(arr2);它运行良好，仅使用略多的内存，大约 165MB。

第四次测试我正在创建 7 个这样的数组（每个 22MB）并将它们连接起来以测试浏览器限制。页面加载完成大约需要 10 秒。内存上升至 1.3GB，然后下降至 500MB。所以 chrome 可以处理它。它只是无法一次解析全部内容，因为它使用某种递归，正如控制台的错误消息所示。

Answer创建单独的数组（每个数组小于 20MB），然后将它们连接起来。每个数组应该位于其自己的 var 语句中，而不是使用单个 var 进行多个声明。

我仍然会考虑只获取必要的部分，这可能会使浏览器变得缓慢。但是，如果这是一项内部任务，那应该没问题。

最后一点：您没有达到最大内存级别，只是达到最大解析级别。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)