Ce que vous devez savoir sur le Javascript hautes performances

Tout le monde doit savoir que JavaScript est un langage de développement full-stack et que JS peut être vu dans les navigateurs, les téléphones mobiles et les serveurs. Cet article partagera quelques bonnes pratiques pour un JavaScript efficace afin d'améliorer la compréhension par chacun des principes sous-jacents et de mise en œuvre de JS.

Stockage des données

Un problème classique en informatique est d'obtenir les meilleures performances de lecture et d'écriture en changeant l'emplacement de stockage des données. En JavaScript, l'emplacement de stockage des données aura un impact sur. performances du code. – Si vous pouvez utiliser {} pour créer un objet, n'utilisez pas new Object. Si vous pouvez utiliser [] pour créer un tableau, n'utilisez pas new Array. La vitesse d'accès des littéraux dans JS est supérieure à celle des objets. – Plus une variable est profonde dans la chaîne de portée, plus il faut de temps pour y accéder. Pour ce type de variable, vous pouvez l'enregistrer en utilisant des variables locales via la mise en cache pour réduire le nombre d'accès à la chaîne de portée - il n'y a pas beaucoup de différence entre l'utilisation de la notation par points (object.name) et de l'opérateur (object[name]), uniquement Safari va Il y a une différence, c'est toujours plus rapide

Boucle

Les boucles courantes en JS sont les suivantes :

for(var i = 0; i < 10; i++) { // do something}  
for(var prop in object) { // for loop object}    
[1,2].forEach(function(value, index, array) { // 基于函数的循环})

Il ne fait aucun doute que la première méthode est native et a de meilleures performances. Celui avec la consommation la plus faible est également le plus rapide. La deuxième méthode de for-in générera plus de surcharge (variables locales) pour chaque itération, et sa vitesse n'est que de 1/7 de celle de la première méthode. La troisième méthode fournit évidemment une méthode de boucle plus pratique, mais sa vitesse n'est que de 1/8. du cycle normal. Par conséquent, vous pouvez choisir la méthode de recyclage appropriée en fonction de la situation de votre projet.

Délégation d'événements

Imaginez ajouter un événement à chaque balise A de la page. Allons-nous ajouter un onClick à chaque balise ? Lorsqu'un grand nombre d'éléments dans la page doivent être liés au même gestionnaire d'événements, cette situation peut affecter les performances. Chaque liaison d'un événement augmente la charge sur la page ou pendant l'exécution. Pour une application frontale riche, trop de liaisons occuperont trop de mémoire sur les pages avec de fortes interactions. Une manière simple et élégante est la délégation d’événements. Il s'agit d'un flux de travail basé sur des événements : capturer couche par couche, atteindre la cible et bouillonner couche par couche. Puisqu'il existe un mécanisme de propagation pour les événements, nous pouvons gérer les événements de tous les éléments enfants en liant les événements à la couche externe.

document.getElementById('content').onclick = function(e) { 
    e = e || window.event;    
    var target = e.target || e.srcElement;    //如果不是 A标签，我就退出   
    if(target.nodeNmae !=== 'A') { return }   //打印A的链接地址    
    console.log(target.href) }

Redessiner et réorganiser

Une fois que le navigateur a téléchargé HTMl, CSS et JS, il générera deux arbres : un arbre DOM et un arbre de rendu. Lorsque les propriétés géométriques du Dom changent, telles que la largeur, la hauteur, la couleur et la position du Dom, le navigateur doit recalculer les propriétés géométriques de l'élément et reconstruire l'arbre de rendu. Ce processus est appelé redessin et réarrangement.

bodystyle = document.body.style; 
bodystyle.color = red; 
bodystyle.height = 1000px; 
bodystyke.width = 100%;

La modification des trois attributs dans la méthode ci-dessus entraînera une redistribution et un redessinage du navigateur trois fois. Dans certains cas, réduire cette redistribution peut améliorer les performances de rendu du navigateur. La méthode recommandée est la suivante, n'effectuez qu'une seule opération et effectuez trois étapes :

bodystyle = document.body.style; 
bodystyle.cssText 'color:red;height:1000px;width:100%';

Chargement JavaScript

IE8, Firefox3.5 et Chrome2 autorisent tous le téléchargement obligatoire de fichiers JavaScript. Ainsi, 3f1c4e4b6b16bbbd69b2ee476dc4f83a ne bloquera pas le téléchargement des autres balises. Malheureusement, le processus de téléchargement JS bloquera toujours le téléchargement d'autres ressources, telles que les images. Bien que les derniers navigateurs aient amélioré les performances en permettant les téléchargements parallèles, le blocage des scripts reste un problème. Par conséquent, il est recommandé de placer toutes les balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a en bas de la balise 6c04bd5ca3fcae76e30b72ad730ca86d pour minimiser l'impact sur le rendu de la page entière et éviter que les utilisateurs ne voient un

Déploiement haute performance de Fichiers JS

Maintenant que tout le monde sait que plusieurs balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a affecteront la vitesse de rendu des pages, il n'est pas difficile de comprendre que « réduire le HTTP requis pour le rendu des pages » est une règle classique pour améliorer la vitesse d'un site Web. Par conséquent, la fusion de tous les fichiers JS dans un environnement de production réduira le nombre de requêtes et accélérera ainsi le rendu des pages. En plus de fusionner des fichiers JS, nous pouvons également compresser des fichiers JS. La compression fait référence à la suppression des parties d'un fichier qui ne sont pas pertinentes pour l'exécution du fichier. Le contenu supprimé inclut des caractères d'espacement et des commentaires. Le processus de modification peut généralement réduire la taille du fichier de moitié. Il existe également des outils de compression qui réduiront la longueur des variables locales, tels que :

var myName = "foo" + "bar";  
//压缩后变成  
var a = "foobar";

Mise en cache des fichiers JS

La mise en cache des composants HTTP peut grandement améliorer l'expérience utilisateur lors des visites répétées sur le site Web. Le serveur Web utilise l'en-tête de réponse HTTP "Expire" pour indiquer au client la durée pendant laquelle une ressource doit être mise en cache. Bien entendu, la mise en cache présente ses propres inconvénients : lorsque votre application est mise à niveau, vous devez vous assurer que les utilisateurs téléchargent le dernier contenu statique. Ce problème peut être résolu en modifiant le nom de fichier des ressources statiques. Vous pouvez voir des navigateurs référencer jsapplication-20151123201212.js dans l'environnement de production. Cela enregistre les nouveaux fichiers JS sous forme d'horodatages pour résoudre le problème de la non-mise à jour du cache.

Résumé

Bien sûr, il y a plus que ces domaines d'amélioration dans un JS efficace. Si nous pouvons réduire certaines pertes de performances, nous pouvons utiliser JavaScript pour développer plus efficacement.

Tutoriel recommandé : "Tutoriel sur les bases de JavaScript"

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!