首頁猿問為了優(yōu)化性能，我應(yīng)該將網(wǎng)絡(luò)數(shù)據(jù)存儲(chǔ)...

為了優(yōu)化性能，我應(yīng)該將網(wǎng)絡(luò)數(shù)據(jù)存儲(chǔ)為 CSV 還是 JSON？

JavaScript

www說 2021-11-12 16:24:05

我正在處理一個(gè)對(duì)于網(wǎng)絡(luò)用戶來說相對(duì)較大的數(shù)據(jù)集，尤其是智能手機(jī)用戶。我擔(dān)心性能。哪個(gè)對(duì)用戶來說是一個(gè)更大的問題？強(qiáng)制客戶端的瀏覽器獲取/請(qǐng)求大數(shù)據(jù)文件 ( JSON)。強(qiáng)制客戶端的瀏覽器將較小的文件 ( CSV)重新格式化為較大的文件 ( JSON) 以便可以使用。當(dāng)我將數(shù)據(jù)編譯為時(shí)JSON，它大約為570KB——遠(yuǎn)大于我通常使用的。而且這已經(jīng)被剝離了（例如，我已經(jīng)將每個(gè)鍵減少到一個(gè)字符）。當(dāng)我將數(shù)據(jù)編譯為時(shí)CSV，它大約為220KB。但是，JSON無論如何，我都需要瀏覽器將其重新格式化為格式。這是一個(gè)小例子。一個(gè)CSV文件："year","birth","101","102","103","104","105"1981,"Australia",5972,1099,573,747,6671981,"China",141,4,3,2,21981,"India",139,5,4,6,21981,"Indonesia",371,9,14,5,61981,"Malaysia",838,72,42,11,14 ...與相同的數(shù)據(jù)相比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：對(duì)于性能而言，什么更重要：(1) 最小化數(shù)據(jù)文件的大小，或 (2) 最小化瀏覽器必須處理的數(shù)據(jù)量？

查看完整描述

1 回答

子衿沉夜

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊

前言：

我認(rèn)為你想要做的是一種過早的微優(yōu)化（https://en.wikipedia.org/wiki/Program_optimization），這是因?yàn)榇蠖鄶?shù)網(wǎng)絡(luò)服務(wù)器無論如何都會(huì) GZip HTTP 響應(yīng)，就實(shí)際而言傳輸?shù)臄?shù)據(jù)擔(dān)心 CSV 和擴(kuò)展的 JSON 表示將具有大致相同的 GZip 大小，因?yàn)樗鼈兙哂邢嗤男畔㈧亍?/p>

另外，我推薦閱讀谷歌的這篇文章（2019 年 6 月）：https : //v8.dev/blog/cost-of-javascript-2019 - 簡(jiǎn)而言之：JavaScript 很便宜，你只需要擔(dān)心移動(dòng)設(shè)備上的優(yōu)化，不是臺(tái)式機(jī)/筆記本電腦。

反正：

除了 CSV 和 JSON 對(duì)象之外，還有其他一些替代方案。

JSON 數(shù)組：

一種可能是兩全其美的選擇是使用 JSON 數(shù)組，如下所示：

[

[ "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 ]

]

您可以使用命名const數(shù)組索引來訪問每個(gè)數(shù)據(jù)成員：

const Idx = {

YEAR: 0,

BIRTH: 1,

_101: 2,

_102: 3,

_104: 4,

// etc

};

var data = JSON.parse( text ); // the array from above

for( var i = 1; i < data.length; i++ ) {

var row = data[i];

console.log( "Year: %d, Birth: %s", row[Idx.YEAR], row[Idx.BIRTH] );

}

您還可以使用自己的物化函數(shù)將每一行轉(zhuǎn)換為強(qiáng)類型對(duì)象：

function Item( row ) {

this.year = row[Idx.YEAR];

this.birth = row[Idx.BIRTH];

}

var data = JSON.parse( text ); // the array from above

var items = data.map( row => new Item( row ) );

構(gòu)造函數(shù)調(diào)用數(shù)組

將每條記錄表示為父數(shù)組中的數(shù)組的另一種替代方法是將每條記錄表示為構(gòu)造函數(shù)調(diào)用 - 但這不起作用JSON.parse- 您必須使用eval()（不推薦）直接在服務(wù)器內(nèi)的網(wǎng)頁中呈現(xiàn)數(shù)據(jù)-side 生成腳本，或者讓客戶端將其加載到<script>元素中（這是 JSONP 的工作方式，但很危險(xiǎn)）。

在將數(shù)據(jù)渲染到網(wǎng)頁以供第三方數(shù)據(jù)可視化組件（如 D3 或各種其他圖表庫）使用時(shí)，我自己使用這種方法：

function Item( year, birth, _101, _102, _103, _104, _105 ) {

this.year = year;

this.birth = birth;

this._101 = _101;

this._102 = etc...

}

data = [

new Item( 1981,"Australia",5972,1099,573,747,667 ),

new Item( 1981,"China",141,4,3,2,2 ),

new Item( 1981,"India",139,5,4,6,2 ),

new Item( 1981,"Malaysia",838,72,42,11,14 ),

// etc

];

renderChart( data );

例如，當(dāng)我需要執(zhí)行數(shù)據(jù)的客戶端轉(zhuǎn)換并且我不想將不同格式的數(shù)據(jù)的兩個(gè)副本呈現(xiàn)給響應(yīng)時(shí)，我會(huì)使用這種方法。但正如我所說，這種技術(shù)不起作用，JSON.parse因?yàn)?json 必須只是靜態(tài)數(shù)據(jù)而不是構(gòu)造函數(shù)調(diào)用。

反對(duì) 回復(fù) 2021-11-12