通過http發送超大型播放列表數據的最有效方式是什麼？

我目前正在開發基於網絡的音樂播放器。我遇到的問題是從數據庫中提取所有歌曲的列表並將其發送給客戶端。客戶端能夠動態創建播放列表，因此他們必須有權訪問整個庫的列表。這個庫可以播放20,000首獨特的歌曲。通過http發送超大型播放列表數據的最有效方式是什麼？

{ 
    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", 
    ... 
}

什麼是動態將該信息發送給客戶最好的方法：我使用Django和這個初步計劃準備在服務器端的數據？我應該使用jSON嗎？ jSON能否有效地發送這個由20,000個條目組成的文本文件？是否有可能將此播放列表緩存在客戶端，因此，每次用戶登錄時都不會發生這麼大的請求，而只有在數據庫發生變化時纔會發生這種巨大的請求。

基本上，我現在需要的是一種可靠的方法，用於傳輸基於文本的播放列表，該播放列表由大約20000個對象組成，每個對象都有自己的屬性（名稱，大小等等），並以及時的方式。有點像谷歌音樂。當你登錄時，你會看到你的歌曲庫中的所有歌曲。他們如何發送這個列表？

想到的另一個小問題是，瀏覽器（主要是Chrome）是否可以處理這些數據量而不犧牲可用性？

非常感謝您的幫助！

來源

2013-06-22 DonJuma

爲什麼不使用某種無限滾動還是分頁？用戶是否絕對需要一次查看所有20,000個？ – Blender

我建議使用本地存儲。你可以谷歌有關html5本地存儲並使用它。 – sandeep

這是我被告知的。我要做的設計與Itunes/MusicBee/FooBar類似，您可以在其中查看您的庫列表。我想到無限滾動的問題是，當用戶正在尋找從庫中添加新歌曲到用戶創建的播放列表時，用戶會想到特定的歌曲，並且將不得不求助於多個滾動 - >等待新的數據 - >滾動更多 - >等待新數據...如果他們有一個完整的清單，我認爲它會更友好。 @Blender – DonJuma

你見過這個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('|');

顯然，CONVER到一個數組，你最終在結束的字符串數組，而不是對象，但數組是快了許多操作。我用$和|作爲這個例子中的分隔符，但爲了實際使用，我使用了一些比較模糊的東西。我的35k對象在不到0.5秒內完成處理（iPad客戶端）。

您可以將字符串保存到localstorage，但要注意5Mb的限制，或者使用諸如lawnchair之類的墊片。（NB我也喜歡SpenserJ的答案，這可能會更容易實現，這取決於您的環境）

此方法不容易適用於所有JSON數據類型，它們需要非常平坦。我還發現這些大陣列表現出色，甚至在智能手機，ipod touch等上也是如此（請參閱jsperf.com進行關於string.split和數組搜索的幾個測試）

來源

2013-06-22 12:59:34 rlb

你可以實現一個類似文件的對象，它封裝了json文件並吐出適當的塊。

例如，你知道你的json文件是一個音樂對象的單個數組，你可以創建一個生成器來包裝json文件並返回數組的塊。

你將不得不做一些字符串內容解析來獲得json文件的權利。

我不知道什麼會生成你的json內容。如果可能的話，我會考慮生成一些管理文件，而不是一個巨大的文件。

來源

2013-06-22 04:53:05 Noqomo

我會測試在單個請求中發送完整JSON的性能。有可能是最慢的部分將呈現UI而不是JSON請求的響應時間。我建議將JSON存儲在頁面上的JavaScript對象中，並且只根據滾動根據需要動態呈現UI。 JavaScript對象可以作爲客戶端滾動的數據源。如果JSON太大，您可能需要考慮服務器支持的滾動。

該解決方案也將成爲瀏覽器無關（HTML < 5）

來源

2013-06-22 04:53:19 TGH

我只是看了看對谷歌玩網絡流量，並且他們將發送初始庫屏幕（約50個軌）通過JSON，與元數據的最低限度（名稱，曲目ID和專輯封面ID）。當你加載主庫頁面時，它向一個非常基本的HTML頁面發出請求，該頁面似乎插入來自內聯JS對象Gist Sample的項目。總文件大約是6MB，但它被緩存了，沒有什麼需要轉移。

我會建議做一個分頁JSON請求拉下數據，並使用ETags和緩存，以確保它不會重新傳輸，除非它絕對需要。而不是?page=5&count=1000的正常分頁，請嘗試?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-22 05:03:20 SpenserJ

通過http發送超大型播放列表數據的最有效方式是什麼？

回答

相關問題