在网站上显示大量数据的最有效方法是什么？

Question

我有一个优化问题。 让我们说我正在制作一个网站，它有一个5,000对（约582 kb）的JSON文件，通过3个滑块和一些选择标签的组合，可以显示每个值。因此，每对之间出现的时间以微秒为单位。

我的问题是：如果网站也可以在移动浏览器上运行，那么在JSON文件或数据库中拥有5000对数据的效率更高？为什么？

Answer 1

我正在建立一个具有类似要求的照片网站，经过数月的调查和实验，我可以说这个问题没有简单的答案。但我会尝试给你一些提示：

1. 尝试以块的形式划分数据，例如 - 如果滑块选择的值介于1到100之间，而不是准确地提供客户选择的值，可能会向上舍入一些+ -10或更多，您可以在没有服务器往返的情况下继续在客户端进行过滤。在查询之前将所有数据保存在客户端内存中。

2. 不要渲染超过屏幕上显示的内容，JSON存储和过滤速度快但DOM非常慢，最小化可见元素。

3. 使用304缓存 - 意思是 - 每当客户端请求两次相同的数据时;通过etag发送适当的304响应。例如 - 这里一个好的经验法则是使用你很容易知道的东西，比如数据库中的最大ID，或者看看自上次调用以来是否有任何新数据被更新。如果没有，只需发送304，客户端将使用他最后一次使用的任何内容。

4. 使用绝对定位。甚至不尝试使用CSS浮动或类似的东西，它将无法正常工作。只需计算每个元素的每个位置。这也将帮助您实现提示nr 2（通过过滤掉可见屏幕之外的所有元素）。你仍然可以使用CSS过渡，当它们改变滑块时可以提供漂亮的动画。

5. 您可以尝试使用IndexedDB来帮助进行客户端查询，但不幸的是，不同浏览器中的支持仍然不够好，而且您可以在存储上占据优势，更好地使用普通缓存并使用正确的标题。< / p>

祝你好运！

Answer 2

像MongoDB这样的数据库对此有好处。它仍然使用JSON语法进行存储，因此您可以使用JSON文件中的值。查询速度非常快，您无需解析JSON文件并在使用之前将其存储在对象中。

Answer 3

鉴于数据的大小（仅为582Kb），我将选择Json文件。

缺点是启动应用程序并将数据加载到内存中会受到惩罚，但是所有查询都会在内存中运行得非常快，这是一个很好的优势。

你需要考虑你的应用程序对数据库做了多少次接受（多少次查询）反对加载文件一次。如果您的主要目标是移动浏览器或个人电脑，请考虑一下。

对于这个数据量，我不会尝试数据库（另一个进程消耗资源），只需要尝试加载JSON文件需要多少资源（时间，内存）。

如果数据会增长...那么你需要重新考虑这个，或者按照一些标准分割你的json文件。