Je crois que tout le monde sait que JavaScript est un langage de développement complet, et JS peut être vu sur le navigateur, le téléphone mobile et le côté serveur. Cet article partagera les meilleures pratiques JavaScript efficaces pour améliorer votre compréhension des principes JS et de mise en œuvre sous-jacents.
Stockage de données
Il y a un problème classique dans la discipline informatique qui réalise des performances de lecture et d'écriture optimales en modifiant l'emplacement du stockage de données. En JavaScript, l'emplacement du stockage de données peut avoir un impact significatif sur les performances du code. Si vous pouvez créer des objets avec {}, n'utilisez pas un nouvel objet. Si vous pouvez créer des tableaux avec [], n'utilisez pas un nouveau tableau. La vitesse d'accès des littéraux en JS est supérieure à celle des objets. Plus la variable est profonde dans la chaîne de portée, plus la pratique requise pour l'accès est longue. Pour de telles variables, les variables locales peuvent être enregistrées via le cache, réduisant le nombre d'accès aux chaînes de portée, il n'y a pas beaucoup de différence entre la notation ponctuelle (objet.name) et l'opérateur (objet [nom]). Seul Safari aura une différence, et les points sont toujours plus rapides
faire du vélo
Il y a plusieurs boucles communes dans JS:
pour (var i = 0; i <10; i ++) {// faire quelque chose} pour (var prop dans l'objet) {// pour l'objet Loop} [1,2] .ForEach (fonction (valeur, index, array) {// boucle basée sur la fonction})Inutile de douter, la première méthode est native, avec la consommation de performances la plus faible et la vitesse la plus rapide. La deuxième méthode pour In-in génère plus de frais généraux (variables locales) chaque itération, et sa vitesse n'est que 1/7 du premier type. La troisième méthode fournit évidemment une méthode de boucle plus pratique, mais sa vitesse n'est que 1/8 de la boucle ordinaire. Par conséquent, vous pouvez choisir la méthode de boucle appropriée en fonction de la situation de votre projet.
Délégation d'événements
Imaginez simplement ajouter un événement à chacun une balise sur la page. Ajouterons-nous un onclick à chaque balise? Cette situation peut affecter les performances lorsqu'il y a un grand nombre d'éléments dans la page qui doivent être liés au même traitement d'événements. Chaque événement contraignant augmente le fardeau sur la page ou pendant la course. Pour une riche application frontale, trop de liaisons occuperont trop de mémoire sur une page avec des interactions lourdes. 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: capture la couche par calque, atteindre la cible, bulle vers le haut par couche. Puisqu'il existe un mécanisme de bulles pour les événements, nous pouvons gérer les événements à partir 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 cible = e.target || e.srcelement; // Si ce n'est pas la balise A, je sortirai si (Target.Nodenmae! === 'A') {return} // Imprimez l'adresse de liaison d'une console.log (Target.href)}Repeindre et réorganiser
Après que le navigateur télécharge HTML, CSS et JS, deux arbres seront générés: l'arbre Dom et l'arbre de rendu. Lorsque les propriétés géométriques de Dom changent, telles que la largeur et la hauteur de Dom, ou la couleur, la position, 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é redessine et réarrangement.
bodystyle = document.body.style; bodystyle.color = rouge; bodystyle.height = 1000px; Bodystyke.width = 100%;
En modifiant les trois propriétés dans la méthode ci-dessus, le navigateur se reconstituera trois fois. Dans certains cas, la réduction de cette réarrangement peut améliorer les performances de rendu du navigateur. La méthode recommandée est la suivante: une seule opération est effectuée et trois étapes sont terminées:
bodystyle = document.body.style; Bodystyle.csstext 'Couleur: rouge; hauteur: 1000px; largeur: 100%';
Chargement JavaScript
IE8, Firefox3.5 et Chrome2 permettent tous le téléchargement requis des fichiers JavaScript. Ainsi, <Script> ne bloquera pas d'autres téléchargements de balises. Malheureusement, le processus de téléchargement JS bloquera toujours le téléchargement d'autres ressources, tels que des images. Bien que les derniers navigateurs améliorent les performances en permettant des téléchargements parallèles, le blocage des scripts est toujours un problème. Par conséquent, il est recommandé de placer toutes les balises <cript> au bas des balises <corps
Déploiement de fichiers JS haute performance
Étant donné que vous savez déjà que plusieurs balises <cript> affecteront la vitesse de rendu de page, il n'est pas difficile de comprendre que "la réduction du HTTP requise pour le rendu de la page" est une règle classique pour l'accélération du site Web. Par conséquent, la fusion de tous les fichiers JS dans l'environnement produit réduira le nombre de demandes, accélérant ainsi le rendu de la page. En plus de fusionner les fichiers JS, nous pouvons également compresser les fichiers JS. La compression fait référence à la suppression des pièces d'un fichier qui ne sont pas liées à l'exécution. Le contenu dépouillé comprend des personnages d'espace et des commentaires. Le processus de modification peut généralement réduire de moitié la taille du fichier. Il existe également des outils de compression qui réduisent la durée des variables locales, telles que:
var myname = "foo" + "bar"; // Après compression, il devient var a = "foobar";
Fichiers de cache JS
La mise en cache des composants HTTP peut considérablement améliorer l'expérience utilisateur des visites de retour sur site Web. Le serveur Web utilise "l'expiration de l'en-tête de réponse HTTP" pour indiquer au client combien de temps une ressource doit être mise en cache. Bien sûr, Cache a également ses propres défauts: lorsque l'application est mise à niveau, vous devez vous assurer que l'utilisateur télécharge le dernier contenu statique. Ce problème peut être résolu en modifiant le nom de fichier de la ressource statique. Vous pouvez voir la référence du navigateur JSApplication-20151123201212.js dans l'environnement du produit. Il s'agit d'enregistrer le nouveau fichier JS dans un horodatage, résolvant ainsi le problème du cache qui n'est pas mis à jour.
Résumer
Bien sûr, JS efficace ne concerne pas seulement ces choses qui peuvent être améliorées. Si certaines pertes de performances peuvent être réduites, nous pouvons utiliser JavaScript pour se développer plus efficacement.