我<script>
在HTML的标签中嵌入了一个大型数组,就像这样(不足为奇):
<script>
var largeArray = [/* lots of stuff in here */];
</script>
在此特定示例中,数组具有210,000个元素。这远远低于2的理论最大值31 -由4个数量级。这是有趣的部分:如果我将数组的JS源代码保存到文件中,则该文件> 44兆字节(准确地说是46573399字节)。
如果您想亲自看看,可以从GitHub下载。(其中的所有数据都是固定的,因此会重复很多。在生产环境中不会如此。)
现在,我真的不担心要提供那么多数据。我的服务器通过gzip压缩其响应,因此实际上并不需要花很长时间就能通过网络获取数据。但是,页面一旦加载,就会导致浏览器崩溃。我根本没有在IE中测试(这是一个内部工具)。我的主要目标是Chrome 8和Firefox 3.6。
在Firefox中,我可以在控制台中看到一个相当有用的错误:
Error: script stack space quota is exhausted
在Chrome中,我只是获得了悲伤标签页:
切入正题
- 对于我们现代的“高性能”浏览器来说,这真的是太多数据了吗?
- 我可以做些什么来优雅地处理大量数据?
顺便说一句,我能够在Chrome中断断续续地使用它(阅读:不会使选项卡崩溃)。我真的以为Chrome至少是由更坚固的材料制成的,但显然我错了……
编辑1
@Crayon:我并不想证明为什么我想一次将大量数据转储到浏览器中。简短的版本:要么我解决了这个(绝对不那么容易)的问题,要么我不得不解决一系列其他问题。我现在选择较简单的方法。
@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磁盘空间的计算机...我什至不要求浏览器快速执行此操作-我只是在问为它工作!☹
编辑2
任务完成!
有了Juan和Guffa的即时建议,我得以使它起作用!看来问题出在解析源代码,而不是在内存中实际使用它。
概括一下对Juan的回答的评论泥潭:我不得不将我的大型阵列分解为一系列较小的阵列,然后将Array#concat()
它们分成几个阵列,但这还不够。我还必须将它们放在单独的var
语句中。像这样:
var arr0 = [...];
var arr1 = [...];
var arr2 = [...];
/* ... */
var bigArray = arr0.concat(arr1, arr2, ...);
对于为解决这个问题做出贡献的每个人:谢谢。第一轮就在我身上!
*除了显而易见的以外:向浏览器发送更少的数据