Préface pourquoi l'optimisation des performances est si importante pour les ingénieurs frontaux
Il y a un dicton dans l'industrie que je ne sais pas si vous avez entendu parler de «les personnes qui connaissent l'optimisation des performances et ont étudié le code source et le code de jQuery écrits sans optimisation des performances auront une différence dans la consommation de performances de centaines, voire des milliers de fois». Le JavaScript d'aujourd'hui est un processus de transition de Ecmascript3 à Ecmascript5 et EcMascript6. Lorsque JavaScript n'est pas bien écrit, la méthode de code n'est pas correctement écrite et les problèmes causés ne peuvent pas être ignorés.
Optimisation des performances
Ci-dessous, je partagerai certaines de mes idées sur l'optimisation des performances avec vous;
1. Image elfe
La chose la plus élémentaire est de transformer les images d'arrière-plan dans les elfes autant que possible pour réduire les demandes d'image, donc un autre instinct de base pour les ingénieurs du Web général est de faire des elfes.
2.CSS Optimisation du sélecteur
Dans CSS, essayez d'utiliser le sélecteur d'enfants>, utilisez moins de sélecteur descendant. Lorsque vous utilisez le sélecteur descendant, le moteur de recherche recherchera tous les éléments descendants. Si nous utilisons le sélecteur d'enfants, nous pouvons réduire la plage de recherche, réduisant ainsi la consommation de performances du moteur de recherche.
3.js Modifiez le style et utilisez directement le nom de la classe
Lorsque vous utilisez des styles d'élément JS, n'utilisez pas de style pour ajouter directement des styles. Généralement, il y aura moins d'attributs et aucune performance ne sera affectée. En fait, ce n'est pas le cas. Chaque fois qu'un style est ajouté, la page sera redessinée une fois. La repeinture est nécessaire pour prêter attention. Lorsque les styles de fonctionnement, manipulant directement le nom de classe, ne provoqueront pas de redessine une seule fois. L'ajout du style directement avec le style provoquera plusieurs redémarrages.
4.JS exploite directement les nœuds DOM
Lorsque vous utilisez des nœuds, essayez d'ajouter des nœuds derrière l'élément. S'il est inséré devant le nœud, tous les nœuds après le nœud inséré provoqueront une reflux. Lorsqu'il est inséré à l'arrière, seul le nœud inséré doit être reflux une fois.
Certaines personnes peuvent ne pas comprendre le concept de redessine et de reflux
5. sélecteur de match régulier
Dans CSS3 et JQuery, certains de ces sélecteurs sont appariés en utilisant des méthodes régulières et essayez de ne pas les utiliser. Bien sûr, si l'optimisation des performances n'est pas prise en compte, ces méthodes sont relativement faciles à utiliser. Les sélecteurs correspondants réguliers feront la recherche de moteurs de recherche pour toutes les balises, affectant considérablement les performances
6.js Obtenez l'optimisation des éléments
Lors de l'obtention d'éléments dans JS, il est normal d'utiliser Document.getElementsById. Le moteur de recherche recherchera en bas de l'arborescence DOM jusqu'à ce qu'il soit recherché un document dans la fenêtre, puis recherchera à nouveau. Par conséquent, il est préférable de stocker Document.body lors de l'obtention d'éléments. Lorsque vous les utilisez à nouveau, supprimez simplement cette variable à utiliser, ce qui peut économiser les performances du moteur de recherche
7. débordement de mémoire
Généralement, lors de l'exécution de manière récursive, le débordement de la mémoire se produira, entraînant une baisse significative des performances lors de l'exécution récursive. Après l'exécution, la mémoire sera recyclée par le système. Par conséquent, lors de l'exécution récursive, vous devez enregistrer la valeur avec un objet, détecter chaque fois l'opération récursive, le renvoyer directement et l'ajouter s'il n'existe pas. Cela peut résoudre les grandes performances de récursive.
8. Utilisez des demandes de GET pour Ajax
La demande de poste est réalisée en envoyant d'abord les en-têtes de demande HTTP, puis en envoyant des données. GET n'a pas d'en-tête de demande, mais il convient de noter que la limite de taille Get est d'environ 4k, tandis que le poste n'a pas de limite.
9. Retarder le chargement des images
Lorsque la page initie une demande, le nombre de demandes est trop grand, donc l'image peut être paresseuse à charger. Lorsque la page défile vers l'emplacement de l'image, l'image sera chargée.
Voici un plug-in pour le chargement paresseux des images
jQuery.lazyload.js
10. Évitez l'attribut d'image SRC vide
Les images avec des attributs SRC qui sont des chaînes vides sont courantes, apparaissant principalement sous deux formes:
<img src = "">
var img = new image (); img.src = "";
Les deux formulaires causent le même problème: le navigateur envoie une autre demande au serveur.
Compétence
1. Pensée exclusive
Excluez d'abord tous les actuels, puis effectuez l'opération suivante; Généralement, lors de la réalisation d'animations, de l'ajout de styles, etc., clarifiez d'abord les styles précédents pendant l'opération secondaire, puis ajoutez de nouveaux styles pour éviter les conflits dans les animations en même temps.
2. Fonctionnement de court-circuit (||)
Généralement, lorsqu'une valeur doit être jugée si elle existe, essayez de ne pas utiliser les instructions. Vous pouvez utiliser des opérateurs de court-circuit pour enregistrer la mémoire occupée par le code. Par exemple:
a = a || b;
Si A existe, utilisez A; Si A n'existe pas, utilisez b.
3. Opération (&&)
Il peut être utilisé lorsque les conditions correspondent, afin de faire une requête inutile des conditions, par exemple lors de la détermination si un objet est un tableau,
a && a.length && a.length> = 0
4. pseudo-array et tableau
Lorsque vous devez encapsuler un élément sans réseau et le transformer en tableau, le moyen le plus simple est d'y ajouter un []. S'il doit être un pseudo-array, vous pouvez y définir un attribut de longueur.
5. Valve d'accélérateur
Généralement utilisé dans l'animation, définir une valeur, le définir sur true au début, déterminer sa valeur, attribuer cette valeur à false lors de la saisie de l'animation et utiliser la fonction de rappel pour la réaffecter à True à la fin de l'animation.
6. Déverrouiller le statut de sélection passif du texte (produits secs purs)
Lorsque vous cliquez sur certains boutons, le texte est parfois sélectionné, ce qui fait que le client le voient comme un bogue. Ce qui suit est le code pour supprimer cet état et simplement le coller.
if (document.all) {document.onselectStart = function () {return false}; // pour ie} else {document.onmousedown = function () {return false}; document.onMouseUp = function () {return true}; } document.onselectStart = new function ('event.returnvalue = false');7. Utilisez intelligemment l'opérateur ternaire
Lorsqu'il est nécessaire de déterminer s'il existe une valeur, vous pouvez également utiliser l'opérateur ternaire pour rendre le code plus optimisé. Par exemple
obj = obj === Undefined? Object: obj;
Remplir:
Ce qui précède est l'optimisation frontale et quelques conseils que j'ai résumés au travail. Si vous avez de bonnes optimisations et techniques, j'espère que vous pourrez commenter davantage. Je pense personnellement que la technologie nécessite plus de communication pour faire de meilleurs progrès.