Résumé des points de connaissances JavaScript : comment améliorer les compétences performance_javascript

Les problèmes de performances de JavaScript ne peuvent pas être sous-estimés, ce qui oblige les développeurs à prêter plus d'attention à certains détails lors de l'écriture de programmes JavaScript. Cet article présente de manière très détaillée les points de connaissance de l'optimisation des performances de JavaScript, ce qui est certainement une information utile.

Permettez-moi d'abord de consolider la syntaxe de base du javascript :

Syntaxe de base du javascript

Utilisez le mot-clé var pour définir des variables

Syntaxe : var nom de la variable = valeur de la variable

identifiant : ①, composé de lettres, de chiffres et de traits de soulignement. Il ne peut pas commencer par un chiffre. Il ne peut pas s'agir d'un mot-clé. Il est strictement sensible à la casse.

Type de données :

Type numérique : numéro

Chaîne : chaîne

Type booléen : booléen

Types de données spéciaux : non défini vide non défini non attribué

Valeur nulle : null

Fonction objet de type référence

Détecter le type de données du paramètre : typeof() renvoie la chaîne correspondant au type de données

Utilisation de deux signes égaux == et de trois signes égaux ===

== : Les valeurs de comparaison sont égales quel que soit le type de données

=== : La comparaison congruente est liée à la fois aux valeurs numériques et aux types de données

Environnement booléen : convertit automatiquement en valeur booléenne lors de la rencontre avec if

Environnement booléen dans string string : vide est faux, non vide est vrai

Environnement booléen en nombre numérique : 0 est faux, non-0 est vrai

La relation entre le nombre et la chaîne

① En cas de rencontre, effectuez une opération d'épissage

.

② Lorsque des opérations doivent être effectuées, la chaîne doit être convertie en valeur numérique

.

Méthode de conversion 1, chaîne*1 en type numérique

Méthode de conversion 2 : convertir un nombre (chaîne) en type numérique

1 : Emplacement de chargement des fichiers js

Dans les fichiers HTML, les balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a peuvent être ajoutées à la zone 93f0f5c25f18dab9d176bd4f6de5d30e Compte tenu de la raison pour laquelle l'exécution de JavaScript et le rendu de l'interface utilisateur sont basés sur un seul thread, si le fichier js est chargé, il bloquera le processus d'analyse ultérieur de la page. La page attendra que le fichier js soit complètement chargé et exécuté avant de continuer à s'exécuter. l'opération. Alors le problème survient, la page peut être vierge ou bloquée. En tant que développeur front-end, il est important non seulement de comprendre les exigences, mais également de fournir une expérience utilisateur de haute qualité. Ensuite, nous devons éliminer l'attente ennuyeuse des utilisateurs. Pour résoudre ce problème, voici deux solutions auxquelles j'ai pensé :

1. Si le fichier js n'a pas d'exigences particulières indiquant qu'il doit être chargé et compilé avant le rendu de la page, choisissez de placer le fichier js avant la balise 36cc49f0c466276486e50c850b7e4956 contenu présenté sur la page). Le fichier CSS est toujours placé dans la zone 93f0f5c25f18dab9d176bd4f6de5d30e (personne ne veut voir une page avec une mise en page désordonnée). Cela permettra aux utilisateurs de voir une page de mise en page au lieu d'une page vierge. Ensuite, certaines personnes feront remarquer : Les données doivent être chargées via des requêtes js. Que dois-je faire ? Le chargement des données peut être trié. Les interfaces qui sont nécessaires de toute urgence peuvent être exécutées en premier. Celles qui ne sont pas vraiment nécessaires peuvent être différées et une simple animation ou invite de chargement peut être créée en même temps.

2. Si ces fichiers js précisent qu'ils doivent être exécutés en premier pour mieux afficher le contenu de la page, alors mettez une petite animation de chargement sur le premier js ou la première page, qui peut être quelque chose d'intéressant ou de mignon. Cela peut également mieux éviter l'ennui d'attendre les utilisateurs. Peut-être qu'ils seront plus intéressés par l'animation de chargement, ce qui peut améliorer l'expérience utilisateur du projet.

Recommandation finale : placez la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a autant que possible devant la balise 36cc49f0c466276486e50c850b7e4956 pour améliorer l'expérience utilisateur.

2 : Fusion de fichiers js

Dans de nombreux développements en équipe, nous pouvons placer des blocs de code avec différentes fonctions dans différents fichiers js, afin qu'il soit plus pratique pour tout le monde de collaborer à l'écriture de code pendant le processus de développement. Après tout, il nous suffit de trouver le dossier correspondant. ou un fichier. Ne recherche pas de méthode dans un fichier long. Cela améliorera en effet l'efficacité du développement de l'équipe et permettra aux nouvelles personnes d'effectuer plus facilement le développement secondaire et la maintenance après leur arrivée. Alors que diriez-vous d’intégrer ce problème dans les performances des pages ? C'est exactement le problème exposé dans le livre : chaque requête HTTP entraîne une surcharge de performances supplémentaire, donc le téléchargement d'un seul fichier de 100 Ko sera plus rapide que le téléchargement de quatre fichiers de 25 Ko.

Le téléchargement d'un fichier de 100 Ko est plus rapide que le téléchargement de quatre fichiers de 25 Ko, et il y a de grands avantages à distinguer chaque fichier pendant le processus de développement, donc la question de la fusion sera traitée une fois le développement terminé. familier à tout le monde, n'est-ce pas ? Il existe tellement d'outils frontaux maintenant, alors utilisez simplement la compression à laquelle vous êtes habitué ~

Je voudrais mentionner brièvement ici que vous pouvez également utiliser les attributs defer et async lors du chargement de fichiers pour un chargement différé et un chargement asynchrone. Dans les navigateurs modernes, la plupart d'entre eux prennent déjà en charge l'attribut defer. Je n'ai pas l'habitude de l'utiliser. pour l’instant, je ne sais pas s’il y aura des problèmes spécifiques. Les amis intéressés peuvent rechercher eux-mêmes ce point de connaissance sur Google, et je le mentionnerai brièvement ici.

La plupart des frameworks actuels prennent également en charge le chargement différé et le chargement à la demande.

Trois : un accès plus rapide aux données

Pour le navigateur, plus la localisation d'un identifiant est profonde, plus sa lecture et son écriture seront lentes (il en est de même pour la chaîne de prototypes). Cela ne devrait pas être difficile à comprendre. Une analogie simple est la suivante : plus l'épicerie est loin de chez vous, plus il vous faut du temps pour faire de la sauce soja... Vilain, si vous mettez autant de temps à faire de la sauce soja, les légumes sera brûlé -.-~

Si nous devons utiliser une valeur de variable plusieurs fois dans la fonction actuelle, nous pouvons d'abord utiliser une variable locale pour la stocker. Le cas est le suivant :

//修改前
function showLi(){
var i = 0;
for(;i<document.getElementsByTagName("li").length;i++){ //一次访问document
console.log(i,document.getElementsByTagName("li")[i]); //三次访问document
};
};
//修改后
function showLi(){
var li_s = document.getElementsByTagName("li"); //一次访问document
var i = 0;
for(;i<li_s.length;i++){
console.log(i,li_s[i]); //三次访问局部变量li_s
};
}; 

Quatre : Optimisation des opérations DOM

Comme nous le savons tous, les opérations DOM consomment beaucoup plus de performances que l'exécution de JavaScript. Bien que nous ne puissions pas éviter d'opérer sur DOM, nous pouvons essayer de réduire autant que possible la consommation de performances de cette opération.

Expliquons cela à travers le code :

function innerLi_s(){
var i = 0;
for(;i<20;i++){
document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值
};
}; 

Réécrivez la méthode ci-dessus :

function innerLi_s(){
var content ="";
var i = 0;
for(;i<20;i++){
content += "A"; //这里只对js的变量循环了20次
};
document.getElementById("Num").innerHTML += content; //这里值进行了一次DOM操作，又分2次DOM访问：一次读取innerHTML的值，一次写入值
}; 

5 : Réduire le redessin et le réarrangement de Dom

Les modifications dans la disposition des éléments, les ajouts, les suppressions de contenu ou les modifications de la taille de la fenêtre du navigateur entraîneront une redistribution, tandis que les modifications de la couleur de la police ou de la couleur d'arrière-plan entraîneront un redessin.
Pour des opérations similaires au code suivant, on dit que la plupart des navigateurs modernes ont été optimisés (optimisés en 1 version de réarrangement) :

//修改前
var el = document.getElementById("div");
el.style.borderLeft = "1px"; //1次重排版
el.style.borderRight = "2px"; //又1次重排版
el.style.padding = "5px"; //还有1次重排版
//修改后
var el = document.getElementById("div");
el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版 

Pour plusieurs opérations, les trois méthodes suivantes peuvent également réduire le nombre de refusions et de redessins :

1.Dom est d'abord masqué, puis affiché après opération 2 réarrangements (affichage temporaire : aucun)

2.document.createDocumentFragment() crée un traitement de fragment de document, l'ajoute à la page après l'opération et le réorganise une fois

3.var newDOM = oldDOM.cloneNode(true) crée une copie de Dom Après avoir modifié la copie, oldDOM.parentNode.replaceChild(newDOM,oldDOM) écrase le DOM d'origine et le réorganise 2 fois

5 : Optimisation de la boucle

Cela devrait être une méthode d'écriture que beaucoup de gens connaissent. Vous pouvez simplement la parcourir (elle sera encore expliquée sous forme de commentaires de code plus tard)~

//修改前
var i = 0;
for(;i<arr.lengthli++){ //每次循环都需要获取数组arr的length
console.log(arr[i]);
}
//修改后
var i = 0;
var len = arr.length; //获取一次数组arr的length 
for(;i<len;i++){
console.log(arr[i]);
}
//or
var i = arr.length;;
for(;i;i--){
console.log(arr[i]);
}

6 : Bon usage du binaire

Par exemple : en prenant modulo 2, le bit le plus bas des nombres pairs est 0, le bit le plus bas des nombres impairs est 0, le résultat de l'opération ET au niveau du bit avec 1 est 0, le bit le plus bas du nombre impair est 1, le résultat de l'opération ET au niveau du bit avec 1 est 1.

Le code est le suivant :

.odd{color:red}
.even{color:yellow} 
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul> 
var i = 0;
var lis = document.getElementsByTagName("li");
var len = lis.length;
for(;i<len;i++){
if(i&1){
lis[i].className = "even";
} else{
lis[i].className = "odd";
}
}; 

Bien que les navigateurs modernes aient fait du bon travail, je pense que c'est ma quête de la qualité du code. Et peut-être que ne pas prêter attention à un ou deux points n'aura pas beaucoup d'impact sur les performances, mais après avoir optimisé à partir de plusieurs points, les résultats possibles seront un saut qualitatif~