为了优化性能，我应该将网络数据存储为 CSV 还是 JSON？

Question

我正在处理一个对于网络用户来说相对较大的数据集，尤其是智能手机用户。我担心性能。哪个对用户来说是一个更大的问题？

强制客户端的浏览器获取/请求大数据文件 ( JSON)。

强制客户端的浏览器将较小的文件 ( CSV)重新格式化为较大的文件 ( JSON) 以便可以使用。

当我将数据编译为 时JSON，它大约为570KB——远大于我通常使用的。而且这已经被剥离了（例如，我已经将每个键减少到一个字符）。

当我将数据编译为 时CSV，它大约为220KB。但是，JSON无论如何，我都需要浏览器将其重新格式化为格式。

这是一个小例子。一个CSV文件：

"year","birth","101","102","103","104","105"

1981,"Australia",5972,1099,573,747,667

1981,"China",141,4,3,2,2

1981,"India",139,5,4,6,2

1981,"Indonesia",371,9,14,5,6

1981,"Malaysia",838,72,42,11,14 

...与相同的数据相比JSON：

[{"year":1981,"birth":"Australia","101":5972,"102":1099,"103":573,"104":747,"105":667},

{year":1981,"birth":"China","101":141,"102":4,"103":3,"104":2,"105":2},

{year":1981,"birth":"India","101":139,"102":5,"103":4,"104":6,"105":2},

{year":1981,"birth":"Indonesia","101":371,"102":9,"103":14,"104":5,"105":6},

{year":1981,"birth":"Malaysia","101":838,"102":72,"103":42,"104":11,"105":14}]

TLDR：对于性能而言，什么更重要：(1) 最小化数据文件的大小，或 (2) 最小化浏览器必须处理的数据量？

Answer 1

前言：我认为你想要做的是一种过早的微优化（https://en.wikipedia.org/wiki/Program_optimization），这是因为大多数网络服务器无论如何都会 GZip HTTP 响应，就实际而言传输的数据担心 CSV 和扩展的 JSON 表示将具有大致相同的 GZip 大小，因为它们具有相同的信息熵。另外，我推荐阅读谷歌的这篇文章（2019 年 6 月）：https : //v8.dev/blog/cost-of-javascript-2019 - 简而言之：JavaScript 很便宜，你只需要担心移动设备上的优化，不是台式机/笔记本电脑。反正：除了 CSV 和 JSON 对象之外，还有其他一些替代方案。JSON 数组：一种可能是两全其美的选择是使用 JSON 数组，如下所示：[&nbsp;[ "year","birth","101","102","103","104","105" ],&nbsp;[ 1981,"Australia",5972,1099,573,747,667 ],&nbsp;[ 1981,"China",141,4,3,2,2 ],&nbsp;[ 1981,"India",139,5,4,6,2 ],&nbsp;[ 1981,"Indonesia",371,9,14,5,6 ],&nbsp;[ 1981,"Malaysia",838,72,42,11,14 ]]您可以使用命名const数组索引来访问每个数据成员：const Idx = {&nbsp; &nbsp; YEAR: 0,&nbsp; &nbsp; BIRTH: 1,&nbsp; &nbsp; _101: 2,&nbsp; &nbsp; _102: 3,&nbsp; &nbsp; _104: 4,&nbsp; &nbsp; // etc};var data = JSON.parse( text ); // the array from abovefor( var i = 1; i < data.length; i++ ) {&nbsp; &nbsp; var row = data[i];&nbsp; &nbsp; console.log( "Year: %d, Birth: %s", row[Idx.YEAR], row[Idx.BIRTH] );}您还可以使用自己的物化函数将每一行转换为强类型对象：function Item( row ) {&nbsp; &nbsp; this.year = row[Idx.YEAR];&nbsp; &nbsp; this.birth = row[Idx.BIRTH];}var data = JSON.parse( text ); // the array from abovevar items = data.map( row => new Item( row ) );构造函数调用数组将每条记录表示为父数组中的数组的另一种替代方法是将每条记录表示为构造函数调用 - 但这不起作用JSON.parse- 您必须使用eval()（不推荐）直接在服务器内的网页中呈现数据-side 生成脚本，或者让客户端将其加载到<script>元素中（这是 JSONP 的工作方式，但很危险）。在将数据渲染到网页以供第三方数据可视化组件（如 D3 或各种其他图表库）使用时，我自己使用这种方法：function Item( year, birth, _101, _102, _103, _104, _105 ) {&nbsp; &nbsp; this.year = year;&nbsp; &nbsp; this.birth = birth;&nbsp; &nbsp; this._101 = _101;&nbsp; &nbsp; this._102 = etc...}data = [&nbsp; &nbsp; new Item( 1981,"Australia",5972,1099,573,747,667 ),&nbsp; &nbsp; new Item( 1981,"China",141,4,3,2,2 ),&nbsp; &nbsp; new Item( 1981,"India",139,5,4,6,2 ),&nbsp; &nbsp; new Item( 1981,"Malaysia",838,72,42,11,14 ),&nbsp; &nbsp; // etc];renderChart( data );例如，当我需要执行数据的客户端转换并且我不想将不同格式的数据的两个副本呈现给响应时，我会使用这种方法。但正如我所说，这种技术不起作用，JSON.parse因为 json 必须只是静态数据而不是构造函数调用。