将数据加载到静态网站中的 JavaScript 以供立即使用的最快方法是什么?

What's the fastest way to load data into JavaScript in a static website for immediate use?

本文关键字：是什么方法加载数据静态网站 JavaScript 更新时间：2023-09-26

我有一个网站需要加载大量数据（即 CSV 中的 ~5 或 10 Mb）。

这是一个静态网站（仅限HTML和JS，没有数据库），我从一开始就需要所有数据，因为我使用dc中的数据.js和数据表。

现在，我已经将数据存储在CSV文件中，并使用d3.js的d3.csv函数加载它。
但是在我最快的连接上有 20k 条记录，加载文件需要 5 秒。

为了给出更好的主意，这是我的CSV的单个记录（其中有10k到50k）：

Title,Year,Rating,NumVotes,imdbID,Type,poster_path,release_date,Released,Runtime,Genres,Directors,Actors,Plot,Country,Metascore,imdbRating,imdbVotes,tomatoMeter,tomatoReviews,tomatoUserMeter,tomatoUserReviews,DVD
"Grease Live!","2016","7.7","3978","tt4366830","TV Movie","/6g1E0Ptg27NLCoK7rhJxuQxZCdg.jpg","2016-01-31","31 Jan 2016","180","Musical","Thomas Kail, Alex Rudzinski","Aaron Tveit, Julianne Hough, Elle McLemore, Vanessa Hudgens","After enjoying a summer romance, high school students Danny and Sandy are unexpectedly reunited when she transfers to Rydell High. There Sandy must contend with cynical Rizzo and the Pink Ladies in attempt to win Danny's heart again.","USA","N/A","7.8","3,710","N/A","N/A","N/A","12","N/A"

我想知道加载数据的最快方法是什么（压缩、拆分和异步加载、Firebase ......

目前我所知道的是JSON比CSV更糟糕，因为它占用更多空间。

1. 分解数据

也许您可以将数据分解为几千行的块，以便在传递给数据表之前重建客户端？

这样，您就可以利用并行下载。

2. 利用客户端缓存

如果您知道数据更改的频率，或者可以接受某些更改间隔，则可以使用 HTTP Expires 标头来防止文件被不必要地下载？

只是在黑暗中拍摄

也许看看这个 http://papaparse.com

有一个在线演示，您可以将数据粘贴到其中，看看需要多长时间。下载脚本并试用，并将其与您正在使用的脚本进行比较。