我<script>
在 HTML 的标签中嵌入了一个大数组,就像这样(没什么奇怪的):
<script>
var largeArray = [/* lots of stuff in here */];
</script>
在此特定示例中,数组有 210,000 个元素。这远低于理论最大值 2 31 - 4 个数量级。这是有趣的部分:如果我将数组的 JS 源代码保存到一个文件中,那么该文件将大于 44 兆字节(准确地说是 46,573,399 字节)。
如果你想自己看看,你可以从 GitHub 下载。(那里的所有数据都是罐头的,其中有很多是重复的。在生产中不会出现这种情况。)
现在,我真的不关心提供那么多数据。我的服务器对其响应进行 gzip 压缩,因此通过网络获取数据确实不需要那么长时间。但是,页面一旦加载就会使浏览器崩溃,这是一种非常令人讨厌的趋势。我根本没有在 IE 中进行测试(这是一个内部工具)。我的主要目标是 Chrome 8 和 Firefox 3.6。
在 Firefox 中,我可以在控制台中看到一个相当有用的错误:
Error: script stack space quota is exhausted
在 Chrome 中,我只是得到了 sad-tab 页面:
切入正题,已经
- 这是真正为我们的现代,“高性能”的浏览器来处理太多的数据?
- 我能做些什么*来优雅地处理这么多数据?
顺便说一句,我能够让它在 Chrome 中时断时续地工作(阅读:不会使选项卡崩溃)。我真的认为至少 Chrome 是由更坚固的东西制成的,但显然我错了......
编辑 1
@Crayon:我不想证明为什么我想一次将这么多数据转储到浏览器中。简短版本:要么我解决这个(不可否认不是那么容易)问题,要么我必须解决一大堆其他问题。我现在选择更简单的方法。
@various:现在,我并不是特别在寻找实际减少数组中元素数量的方法。我知道我可以实现 Ajax 分页或 what-have-you,但这在其他方面给我带来了一系列问题。
@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 内存、超过半 TB 磁盘空间的计算机......我什至没有要求浏览器快速执行此操作 - 我只是在问让它工作!☹
编辑 2
任务完成!
在Juan和Guffa的现场建议下,我能够让它发挥作用!看起来问题只是在解析源代码,而不是在内存中实际使用它。
总结一下 Juan 回答的评论泥潭:我不得不将我的大阵列拆分为一系列较小的阵列,然后再拆分Array#concat()
它们,但这还不够。我还必须将它们放入单独的var
语句中。像这样:
var arr0 = [...];
var arr1 = [...];
var arr2 = [...];
/* ... */
var bigArray = arr0.concat(arr1, arr2, ...);
感谢所有为解决此问题做出贡献的人:谢谢。第一轮在我身上!
*除了显而易见的:向浏览器发送更少的数据