2

我目前正在开发一个基于网络的音乐播放器。我遇到的问题是从数据库中提取所有歌曲的列表并将其发送给客户端。客户端具有动态创建播放列表的能力，因此他们必须有权访问整个库的列表。这个库可以包含超过 20,000 首独特的歌曲。我正在使用 django 和这个暂定方案在服务器端准备数据：

{
  id: "1",
  cover: "http://example.com/AlbumArt.jpg",
  name: "Track Name",
  time: "3:15",
  album: "Album Name",
  disc: (1, 2),
  year: "1969",
  mp3: "http://example.com/Mp3Stream.mp3"
},

{
  id: "2",
  ...
}

动态将此信息发送给客户的最佳方法是什么？我应该使用 JSON 吗？JSON 能否有效地发送这个包含 20,000 个条目的文本文件？是否可以在客户端缓存这个播放列表，这样这个巨大的请求就不必在每次用户登录时都发生，而只是在数据库发生变化时发生？

基本上，我现在需要的是一种可靠的方法来及时传输由大约 20,000 个对象组成的基于文本的播放列表，每个对象都有自己的属性（名称、大小等）。有点像谷歌音乐。登录后，您会看到库中的所有歌曲。他们如何发送此列表？

另一个想到的小问题是，浏览器（主要是 Chrome）能否在不牺牲可用性的情况下处理这么多数据？

非常感谢您的帮助！

4

4 回答 4

2

我刚刚查看了 Google Play 的网络流量，他们将通过 JSON 传输初始库屏幕（大约 50 首曲目），以及最少的元数据（名称、曲目 ID 和专辑封面 ID）。当您加载主库页面时，它会向一个非常基本的 HTML 页面发出请求，该页面似乎插入了来自内联 JS 对象Gist Sample的项目。文件总大小约为 6MB，但已缓存，无需传输任何内容。

我建议做一个分页的 JSON 请求来拉取数据，并使用 ETags 和缓存来确保它不会被重新传输，除非它绝对需要。而不是?page=5&count=1000, try的正常分页?from=1&to=1000，因此删除 995 将从?from=1&to=1000缓存中清除，但不会?from=1001&to=2000（而?page=2&count=1000会）。

Google Play 音乐似乎没有使用本地存储、IndexedDB 或 Web SQL，而是从缓存文件中加载所有内容并将其解析为 JS 对象。

于 2013-06-22T05:03:20.477 回答
1

你看过这个http://code.flickr.net/2009/03/18/building-fast-client-side-searches/吗？

我自己最近一直在使用这个阵列系统（用于 35K 对象），而且速度很快（假设您不想将它们全部呈现在屏幕上）。

基本上，服务器在表单中构建一个长字符串

1|2|3$cat|dog|horse$red|blue|green

它作为单个字符串发送到 http 请求。获取 responseText 字段并将其转换为数组使用

Var arr = request.responseText.split('$');
Var ids = arr[0].split('|');
Var names = arr[1].split('|');

显然，你最终得到的是字符串数组，而不是对象，但数组对于许多操作来说很快。我用过 $ 和 | 作为本示例中的分隔符，但对于实时使用，我使用了一些更晦涩的东西。我的 35k 对象在不到 0.5 秒（iPad 客户端）内完成处理。

您可以将字符串保存到本地存储，但要注意 5Mb 的限制，或者使用诸如草坪椅之类的垫片。（nb 我也喜欢 SpenserJ 的答案，根据您的环境，这可能更容易实现）

此方法不适用于所有 JSON 数据类型，它们需要非常平坦。我还发现这些大数组在性能方面表现良好，即使在智能手机、ipod touch 等上也是如此（有关 string.split 和数组搜索的几个测试，请参见 jsperf.com）

于 2013-06-22T12:59:34.497 回答
0

您可以实现一个类似文件的对象，该对象包装 json 文件并吐出适当的块。

例如，您知道您的 json 文件是一个音乐对象数组，您可以创建一个生成器来包装 json 文件并返回数组的块。

您必须进行一些字符串内容解析才能正确分块 json 文件。

我不知道是什么生成了您的 json 内容。如果可能的话，我会考虑生成一些可管理的文件，而不是一个大文件。

于 2013-06-22T04:53:05.577 回答
0

我将测试在单个请求中发送完整 JSON 的性能。最慢的部分可能是呈现 UI 而不是 JSON 请求的响应时间。我建议将 JSON 存储在页面上的 JavaScript 对象中，并且仅根据需要基于滚动动态呈现 UI。JavaScript 对象可以作为客户端滚动的数据源。如果 JSON 太大，您可能需要考虑服务器支持的滚动。

该解决方案也将与浏览器无关（HTML < 5）

于 2013-06-22T04:53:19.863 回答