第 16 题：（开放题）2万小球问题：在浏览器端，用js存储2万个小球的信息，包含小球的大小，位置，颜色等，如何做到对这2万条小球信息进行最优检索和存储

[airuikun]

能否进大厂，就看你对开放题能答有多深和多广。

这题目考察你如何在浏览器端中进行大数据的存储优化和检索优化。

如果你仅仅只是答用数组对象存储了2万个小球信息，然后用for循环去遍历进行索引，那是远远不够的。

这题要往深一点走，用特殊的数据结构和算法进行存储和索引。

然后进行存储和速度的一个权衡和对比，最终给出你认为的最优解。

我提供几个思路：

• 用ArrayBuffer实现极致存储
• 哈夫曼编码 + 字典查询树实现更优索引
• 用bit-map实现大数据筛查
• 用hash索引实现简单快捷的检索
• 用IndexedDB实现动态存储扩充浏览器端虚拟容量
• 用iframe的漏洞实现浏览器端localStorage无限存储，实现2千万小球信息存储

最近找到几个思路

• 用webassembly去加速计算
• 用service worker进行多进程非阻塞计算
• 最近还看了一篇文章 用skia 2d渲染引擎 去加速2w小球canvas渲染

这种开放题答案不唯一，也不会要你现场手敲代码去实现，但是思路一定要行得通，并且是能打动面试官的思路

[zhaoqize]

这个提要点赞

[wwb568109135]

用iframe的漏洞实现浏览器端localStorage无限存储，实现2千万小球信息存储

厉害 厉害

[zhangyongjian986]

用ArrayBuffer实现极致存储：一般小球信息这个是一个对象，请问这个应该怎么存进arrayBuffer里面

[angleneo]

最近也碰到了这种需求，10w个circle在svg中，circle间还有path连接，点击每个circle要求显示对应的text，circle的半径和text的大小成正比例，但是浏览器到1w个节点左右就开始卡顿了。。。

[jin5354]

最近也碰到了这种需求，10w个circle在svg中，circle间还有path连接，点击每个circle要求显示对应的text，circle的半径和text的大小成正比例，但是浏览器到1w个节点左右就开始卡顿了。。。

关于大数据渲染的解决方案，不妨看看我之前的总结，和你的场景很像。 https://www.404forest.com/2018/10/12/massive-data-visualization-full-rendering-optimization/

[Knove]

我觉得IndexDB是最靠谱的，可以实现 小球的大小，位置，颜色等维度的检索

[eightHundreds]

先不论存储的数据结构,数据本身并不大吧

坐标用两个number,颜色和尺寸各一个number. 共 4个number, 每个number 8比特

20000*4*8/1024/1024 = 0.6 mb

当然实际存储不可能简单地用4个number, 但最终的数据量也不至于要当心容量问题吧

[liangguangming]

用ArrayBuffer实现极致存储：一般小球信息这个是一个对象，请问这个应该怎么存进arrayBuffer里面

就是把这些小球的信息（大小、位置、颜色）变成二进制存储，不再通过对象存储，这样减少内存的损耗

[zhangyongjian986]

您的邮件已收到，我将尽快回复，谢谢！

[jkai1217]

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。