Comment stocker une énorme quantité de données statiques pour un SPA dans un tableau javascript?

Question

J'ai travaillé sur une application de page unique qui incorpore une partie des données unihan.txt d'unicode.org. Il montre tous les radicaux chinois (à la fois simplifiés et traditionnels) et en cliquant sur eux montre tous les caractères chinois avec ce radical dans les groupes en fonction de leur compte d'AVC. Il est également possible de faire une recherche inversée, si vous tapez un caractère chinois, il montrera le nombre de radicaux et le nombre de traits.

La façon dont je l'ai eue au travail était d'importer les données dans une base de données Unihan et avec un script de convertir certaines des données en deux fichiers javascript:

data_codep.js (cp [codepoint] = [radical, accidents vasculaires cérébraux];)

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 (euh [radicaux] [coups] = [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) 

Je voulais juste voir si cela fonctionne, et fonctionne avec des navigateurs comme Chrome et IE sur mon ordinateur de bureau moyen. data_codep.js charge dans env. 1,15 sec. et data_radical_stroke.js dans env. 375 msec. Et la page est chargée et exécutée dans env. 1,85 sec. Cela m'a surpris un peu. Même la présentation des données est presque immédiate. Mais, sans surprise, Safari s'est écrasé sur un iPad1.

Maintenant, je sais que cela peut être un peu trop demander à un navigateur. Récupérer les données du serveur quand c'est nécessaire est évidemment un mécanisme plus efficace. (Surtout avec un back-end comme, par exemple, Node.js) Pourtant, je suis curieux de savoir si cela peut être réalisé d'une manière meilleure et plus efficace. J'ai pensé à charger dans une chaîne et à la découper avec une expression régulière, puis .poussez chaque élément de données dans un tableau, mais avec cette quantité de données, cela ne prendrait-il pas beaucoup de temps? Je pense que la même chose serait vraie pour la convertir en un fichier JSON, puis l'analyser.

Comment cela peut-il être fait avec un encombrement réduit?

(note: les radicaux ont un 0 en annexe quand ils ont une forme traditionnelle et 1 quand ils ont une forme simplifiée)

Answer 1

Lors du chargement des données dans un SPA, j'utilise the best practice recommended by the Backbone documentation et Bootstrap les données dans la page lorsque il charge, plutôt que d'effectuer un appel réseau important, qui sera plus lent lorsque vous voulez les données plus tard. Vous pouvez également envisager de mettre en cache les données dans le mécanisme de stockage local (si elles ne changent pas souvent), ce qui est faisable car la taille des deux fichiers est globalement assez petite.

À mon avis, obtenir les données au point où tous vos avez à faire est quelque chose comme ceci dans votre SPA:

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

Gardez les requêtes HTTP réduites au minimum à l'avance lors du chargement autant de données que vous pouvez dans la page. JSON.parse est une méthode native (retour à IE8, je pense), et it's pretty fast. Bien sûr, je recommande de l'évaluer pour votre propre charge de données.