javascript - What is the most efficient way of sending data for a very large playlist over http? -

I am currently working on developing a web-based music player. The issue that comes to me is pulling a list of all the songs from the database and sending it to the customer. Clients have the ability to create playlists dynamically, and therefore they should have access to the entire library list. This library can extend to 20,000 unique songs. I am creating data on the server-side using the DNS and this temporary plan:

  {id: "1", cover: "http://example.com/AlbumArt Jpg ", name:" track name ", time:" 3:15 ", album:" album name ", disc: (1, 2), year:" 1970 ", MP3:" http: // example .com / Mp3stream MP3 "}, {ID:" 2 ", ...}   
 What is the best way to send this information to a dynamic customer? Should I use JSON? Can JSON send this text file effectively with 20,000 entries? Is it possible to cache this playlist on the client, so there is not such a big request every time a user logs in, instead of changing the database?  
 Actually, do I need this time to be a trusted method of transmitting a text-based playlist that contains approximately 20,000 objects, each time its own properties (name, size, etc.). .), In a timely manor. Like when you log in like Google Music, you are presented with all the songs in your library. How are they sending these lists?  
 There is another issue that comes to mind, can the browser (primarily chrome) handle the number of data without sacrificing the applicability?  
 Thanks a lot for all your help!   
 
 
 Have you seen this?  
 I've been using this array system lately (for 35K objects) and it's fast (assuming you do not want them to render everything on the screen).  
 Actually the server creates a long string as  
 1 | 2 | $ 3 cat Dog Horses $ Red | Blue | Green  
 Take the response text that is sent as a string on the HTTP request and enter it  
  var arr = request.responseText.split ('$') Convert an array by using; Var Ieds = ARR [0] .split ('|'); Var Name = arr [1] .split ('|');   
 Obviously, you end up with arrays of stars, not objects, but arrays for many operations are fast I have $ and more. In this example, in the form of a delimiter, but for some use, I use a bit more ambiguous, my 35k object is handled in less than 0.5sec (iPad client).  
 You can save the wire in local storage, but you can see the limit of 5 MB or use shim like lawn chair. (NB also likes Spencer J. Answer, which can be easy to implement on your environment)  
 This method does not work easily for all JSON datatypes, they need to be quite flat is. I have also got to see these large orange behaviors well, even on smartphones, iPod touch etc. (see string.plit and array search for many tests around jsperf.com )