Question

我一直致力于单页应用程序，它包含了unicode.org的unihan.txt数据的一部分。它显示了所有中国激进分子（简化和繁体），点击它们显示所有具有这种激进的汉字，取决于它们的笔画数。也可以进行反向查找，如果输入中文字符，它将显示字根数和笔画数。

我开始工作的方式是在数据库中导入unihan数据，并使用脚本将一些数据转换为两个javascript文件：

data_codep.js（cp [codepoint] = [radical，strokes];）

var cp = new Array();

cp[13312]=[10,4];
cp[13313]=[10,5];
cp[13314]=[10,5];
cp[13315]=[20,2];
cp[13316]=[20,2];
cp[13317]=[40,1];
cp[13318]=[40,5];
cp[13319]=[50,2];
cp[13320]=[50,2];
cp[13321]=[50,2];
cp[13322]=[50,3];
cp[13323]=[50,3];
cp[13324]=[50,4];
cp[13325]=[50,4];
cp[13326]=[50,4];
cp[13327]=[50,4];
cp[13328]=[50,5];
[...]
(75622 lines, 1.55Mb)

data_radical_stroke.js（呃[激进] [笔画] = [codepoint，...];）

var uh = new Array();  
uh[10]=new Array();
uh[10][0]=[19968];
uh[10][1]=[19969,19970,19971,19972,19973,19974,131072,131073,131074];
uh[10][2]=[19975,19976,19977,19978,19979,19980,20112,21316,131075,131076,131077,131078,173824,173825,177984];
uh[10][3]=[19981,19982,19983,19984,19985,19986,19987,19991,63847,131079,131080,131081,131082,131083,131084,173826];
uh[10][4]=[13312,19988,19989,19990,19992,19993,19994,19995,19996,19997,131085,131086,131087,131088,131089,131090,131091,131092,131093,131094,131095];
uh[10][5]=[13313,13314,19998,19999,20000,20001,20002,131096,131097,131098,131100,131102,131103,131104,177985];
uh[10][6]=[20003,20004,20005,20029,131105,131106,131107,131108,131110,131111,131112,131114,131115,177986,194560];
uh[10][7]=[20006,20007,64112,131116,131117,131118,131120,131121,131122,131123,131124,173827];
uh[10][8]=[131125,131126,131128,131130,131131,173828];
uh[10][9]=[131133,131134,131135,131136,133410,173829];
uh[10][10]=[131137,131138,131139,131140,131141,173830];
uh[10][11]=[131142,131143,131144,131146,131147];
uh[10][12]=[131148,131149];
uh[10][13]=[131150,131151,131152,131153,131154,177987];
uh[10][14]=[131155,131156];
uh[10][15]=[131157,131159,131160,131161,131162,131163,131165,150735,173831];
uh[10][16]=[131158];
uh[10][17]=[131167];
uh[10][19]=[131168];

uh[20]=new Array();
uh[20][0]=[20008];
uh[20][1]=[20009,131169,131170];
[...]
(4676 lines, 564 kB)

我只是想知道这是否有效，并且它可以在我的普通台式电脑上使用Chrome和IE等浏览器。 data_codep.js在appr中加载1.15秒和appr中的data_radical_stroke.js 375毫秒。页面在appr中加载并执行。 1.85秒这让我感到很惊讶。即使提供数据也几乎是即时的。

但是，可能并不奇怪，它在iPad1上撞毁了Safari。

现在我知道从浏览器中提问可能有点太多了。在需要时从服务器获取数据显然是一种更有效的机制。（特别是像后端这样的Node.js）我仍然很好奇这是否可以以更好，更有效的方式实现。

我考虑过加载一个字符串并用正则表达式将其剪切掉然后将每个数据块推送到一个数组中，但是如果有这么多数据，这会花费很长时间吗？我认为将它转换为json文件然后解析它也是如此。

如何以更小的占地面积完成这项工作？

（注意：当传统形状为0时，基数为0;如果形状为简化则为1）

Answer 1

在将数据加载到SPA中时，我使用the best practice recommended by the Backbone documentation并在加载时将数据引导到页面中，而不是发生大型网络调用，如果以后需要数据，这将会变慢。您也可以考虑将数据缓存到本地存储机制中（如果它不经常更改），这是可行的，因为这两个文件的大小总体上非常小。

在我看来，将数据提供给SPA中您需要做的就是这样的事情：

<script>var characterData = JSON.parse(<?php json_encode($data); ?>);</script>

在尽可能多地将数据加载到页面中时，保持HTTP请求的预先最小化。 JSON.parse是一种原生方法（我想回到IE8）和it's pretty fast。当然，我建议您根据自己的数据负载进行基准测试。

如何在javascript数组中为SPA存储大量静态数据？

1 个答案: