Maison >interface Web >js tutoriel >Comment traiter de grands volumes de données en javascript
Dans les articles précédents, nous avons exploré l'exécution de JavaScript et les restrictions du navigateur, ainsi que des moyens de résoudre les avertissements de «script non réactifs» à l'aide de pseudo-threads basés sur la minuterie. Aujourd'hui, nous chercherons des moyens de traiter de grandes quantités de données dans le navigateur. Il y a quelques années, les développeurs n'ont jamais envisagé d'alternatives au traitement complexe côté serveur. Ce concept a changé et de nombreuses applications Ajax envoient de grandes quantités de données entre le client et le serveur. De plus, le code peut mettre à jour le DOM, qui est un processus de navigateur particulièrement long. Cependant, essayer d'analyser ces informations à la fois peut rendre l'application qui ne répond pas et lancer un avertissement de script. Les minuteries JavaScript peuvent aider à prévenir les problèmes de verrouillage du navigateur en divisant un long processus d'analyse des données en blocs plus courts. Voici le début de notre fonction JavaScript:
function ProcessArray(data, handler, callback) {
ProcessArray () La fonction accepte trois paramètres:
Ensuite, nous définirons la variable de configuration:
var maxtime = 100; // 每块处理时间(毫秒) var delay = 20; // 处理块之间的延迟(毫秒) var queue = data.concat(); // 克隆原始数组
maxtime spécifie le nombre maximum de millisecondes autorisées par bloc de traitement. Le retard est le temps (en millisecondes) entre les blocs de traitement. Enfin, le clonage de file d'attente du tableau de données d'origine - non requis dans tous les cas, mais comme le tableau est passé par référence et que nous jetons chaque élément, c'est l'option la plus sûre. Nous pouvons maintenant commencer le traitement à l'aide de setTimeout:
setTimeout(function() { var endtime = +new Date() + maxtime; do { handler(queue.shift()); } while (queue.length > 0 && endtime > +new Date());
Tout d'abord, calculez la fin du temps - c'est une heure future qui doit être empêchée de traiter. faire… tandis que la boucle traite les éléments en file d'attente et se poursuit jusqu'à ce que chaque élément soit terminé ou atteint de fin. Remarque: pourquoi utiliser le fait… pendant? JavaScript prend en charge pendant que les boucles et font… pendant que les boucles. La différence est que le DO… tandis que la boucle garantit que les itérations sont effectuées au moins une fois. Si nous utilisons une boucle standard, le développeur peut définir une maximum faible ou négative, et le traitement du tableau ne commencera ni ne se terminera. Enfin, nous déterminons si davantage de projets doivent être traités et si nécessaire, appelez notre fonction de traitement après un bref délai:
if (queue.length > 0) { setTimeout(arguments.callee, delay); } else { if (callback) callback(); } }, delay); } // ProcessArray 函数结束
Une fois chaque projet traité, la fonction de rappel est exécutée. Nous pouvons utiliser de petits cas de test pour tester ProcessArray ():
// 处理单个数据项 function Process(dataitem) { console.log(dataitem); } // 处理完成 function Done() { console.log("Done"); } // 测试数据 var data = []; for (var i = 0; i < 1000; i++) { data.push(i); } ProcessArray(data, Process, Done);
Ce code s'exécutera dans chaque navigateur (y compris IE6). Il s'agit d'une solution viable de navigateur, mais HTML5 offre une meilleure solution! Dans mon prochain article, nous discuterons des travailleurs du Web…
En raison de la nature unique du JavaScript, il peut être difficile de gérer de grands ensembles de données en JavaScript. Cependant, vous pouvez suivre les meilleures pratiques. Envisagez d'abord d'utiliser des travailleurs Web. Ils vous permettent d'exécuter JavaScript dans un thread d'arrière-plan séparé, empêchant le traitement des données important de bloquer l'interface utilisateur. Deuxièmement, utilisez la technologie de traitement des données en streaming. La bibliothèque comme Oboe.js peut vous aider à traiter les données à son arrivée, réduisant ainsi l'utilisation de la mémoire. Enfin, envisagez d'utiliser une base de données. IndededDB est une API de bas niveau pour le stockage côté client de grandes quantités de données structurées, qui peuvent être utilisées pour effectuer des recherches de haute performance sur de grands ensembles de données.
Oui, JavaScript peut être utilisé dans la science des données. Bien qu'il n'ait traditionnellement rien à voir avec la science des données, la montée en puissance du JavaScript complet et le développement de bibliothèques et de cadres pour l'analyse et la visualisation des données en font une option viable. La bibliothèque comme Danfo.js fournit des outils de manipulation de données similaires à la bibliothèque Pandas de Python, et D3.js est un puissant outil de visualisation de données.
L'optimisation du JavaScript pour le traitement des données à grande échelle implique plusieurs stratégies. Tout d'abord, utilisez des structures de données efficaces. Les types de tableau et d'objets intégrés de JavaScript ne sont pas toujours les types les plus efficaces pour les grands ensembles de données. La bibliothèque comme Immutable.js fournit une alternative plus efficace. Deuxièmement, envisagez d'utiliser des tableaux typés pour gérer de grandes quantités de données binaires. Enfin, des techniques de programmation asynchrones sont utilisées pour empêcher le blocage du thread principal pendant le traitement des données.
JavaScript a certaines limites dans le traitement des données importantes. Sa nature unique peut entraîner des problèmes de performances lorsqu'ils traitent de grands ensembles de données. De plus, les types numériques de JavaScript ne conviennent pas aux calculs numériques précis, qui peuvent être un problème dans les applications de science des données. Enfin, JavaScript n'a pas quelques bibliothèques d'analyse de données avancées disponibles dans des langues telles que Python et R.
Les travailleurs Web vous permet d'exécuter du code JavaScript sur un thread séparé en arrière-plan. Ceci est particulièrement utile pour les tâches de traitement des données complexes qui bloquent autrement le thread principal et provoquent des problèmes de performances. Pour utiliser le web travailleur, vous créez un nouvel objet de travailleur et passez l'URL du script à exécuter dans le thread des travailleurs. Vous pouvez ensuite utiliser la méthode de postmessage et le gestionnaire d'événements OnMessage pour communiquer avec le fil du travailleur.
Le traitement des données en difficulté est une technique qui traite les données à son arrivée plutôt que d'attendre que l'ensemble des données soit disponible. Ceci est particulièrement utile pour les grands ensembles de données car il réduit l'utilisation de la mémoire et permet au traitement de commencer plus tôt. Dans JavaScript, vous pouvez utiliser des bibliothèques comme Oboe.js pour implémenter le traitement de données de streaming.
IndededDB est une API de bas niveau pour les clients afin de stocker de grandes quantités de données structurées. Il vous permet de stocker, de récupérer et de rechercher de grands ensembles de données dans le navigateur de votre utilisateur. Pour utiliser IndededDB, vous ouvrez d'abord une base de données, puis créez un magasin d'objets pour enregistrer vos données. Vous pouvez ensuite utiliser des transactions pour lire et écrire des données.
Les tableaux typés sont une caractéristique de JavaScript qui fournit un moyen de traiter les données binaires. Ils sont particulièrement utiles pour les grandes tâches de traitement des données, car ils vous permettent de traiter les données de manière plus économique. Pour utiliser le tableau typé, vous créez d'abord un ArrayBuffer pour enregistrer vos données, puis utilisez l'un des types de tableau tapés pour créer une vue pointant vers le tampon.
Il existe plusieurs bibliothèques disponibles pour la visualisation des données dans JavaScript. D3.js est l'une des bibliothèques les plus puissantes et les plus flexibles qui vous permet de créer une variété d'effets visuels. Chart.js est un autre choix populaire, qui fournit une API plus simple pour créer des types de graphiques communs. D'autres options incluent les HighCharts, Google Charts et Plotly.js.
La programmation asynchrone permet à JavaScript d'effectuer d'autres tâches en attendant que le traitement des données se termine. Ceci est particulièrement utile pour les grandes tâches de traitement des données car elle empêche le thread principal d'être bloqué, ce qui entraîne une expérience utilisateur plus fluide. JavaScript fournit plusieurs fonctionnalités pour la programmation asynchrone, y compris les rappels, la promesse et l'async / attendre.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!