Question

我目前正致力于开发基于网络的音乐播放器。我遇到的问题是从数据库中提取所有歌曲的列表并将其发送到客户端。客户端能够动态创建播放列表，因此他们必须能够访问整个库的列表。该库可以播放超过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）可以处理这么多数据而不会牺牲可用性吗？

非常感谢你的帮助！

Answer 1

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

我建议做一个分页JSON请求来下拉数据，并使用ETag和缓存来确保它不会被重传，除非它绝对需要。而不是?page=5&count=1000的正常分页，请尝试?from=1&to=1000，以便删除995将从缓存中清除?from=1&to=1000，而不是?from=1001&to=2000（而?page=2&count=1000将{{1}} ）。

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

Answer 2

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

我最近一直在使用这个阵列系统（对于35K对象）而且它很快（假设你不想在屏幕上全部渲染它们）。

服务器基本上以

的形式构建一个长字符串

1 | 2 | 3 $猫|狗|马红$ |蓝|绿

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

将其转换为数组

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

显然，你最终会得到字符串数组，而不是对象，但是对于许多操作来说，数组都很快。我用过$和作为这个例子中的分隔符，但对于实际使用，我使用的东西更加模糊。我的35k对象在不到0.5秒的时间内完成处理（iPad客户端）。

您可以将字符串保存到localstorage，但要注意5Mb限制，或使用垫板等垫片。（我也喜欢SpenserJ的答案，根据你的环境可能更容易实现）

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

Answer 3

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

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

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

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

Answer 4

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

此解决方案也将与浏览器无关（HTML＆lt; 5）

通过http为非常大的播放列表发送数据的最有效方法是什么？

4 个答案: