Optimisation des performances front-end et techniques_techniques javascript

Préface Pourquoi l'optimisation des performances est si importante pour les ingénieurs front-end

Il y a un dicton dans l'industrie dont je ne sais pas si vous en avez entendu parler : « La consommation de performances du code écrit par des personnes qui comprennent l'optimisation des performances et ont étudié le code source de jquery sera des centaines de fois différente de celles qui ne comprennent pas l'optimisation des performances. Même des milliers de fois ', le javascript actuel est un processus de transition d'ECMAscript3 vers ECMAscript5 et ECMAscript6. Les problèmes causés par des méthodes de codage inappropriées lorsque JavaScript n'est pas parfait ne peuvent être ignorés.

Optimisation des performances

Je vais maintenant partager avec vous certaines de mes idées sur l'optimisation des performances

1. Carte des sprites

La chose la plus fondamentale est de transformer l'image d'arrière-plan en une carte de sprite autant que possible pour réduire les demandes d'images, donc un autre instinct de base des ingénieurs web généralistes est la production de cartes de sprites.

Optimisation du sélecteur 2.css

En CSS, essayez d'utiliser autant que possible les sélecteurs descendants> et utilisez moins les sélecteurs descendants. Lorsque vous utilisez des sélecteurs descendants, le moteur de recherche recherchera tous les éléments descendants, , vous pouvez restreindre la portée de. la recherche, réduisant ainsi la consommation de performances du moteur de recherche.

3.js change le style et exploite directement le nom de la classe

Lorsque vous utilisez des styles d'éléments dans js, n'utilisez pas de style pour ajouter directement des styles. Généralement, les performances ne seront pas beaucoup affectées s'il y a peu d'attributs. la page sera redessinée et le redessin doit être pris en compte, lors de l'utilisation de styles, l'utilisation directe du nom de la classe ne provoquera qu'un seul redessin, tandis que l'ajout direct de styles avec style entraînera plusieurs redessins.

4.js exploite directement les nœuds dom

Lorsque vous utilisez un nœud, essayez d'ajouter le nœud après l'élément. Si vous l'insérez devant le nœud, les nœuds après le nœud inséré provoqueront une redistribution. Lors de l'insertion à l'arrière, il vous suffit de redistribuer l'inséré. nœud une fois.

Certaines personnes peuvent ne pas comprendre les concepts de redessin et de refusion

5. Sélecteur de correspondance régulière

Sélecteurs d'attributs en CSS3 et jQuery. Certains de ces sélecteurs utilisent une correspondance régulière. Bien sûr, si l'optimisation des performances n'est pas prise en compte, ces méthodes sont toujours plus faciles à utiliser. le sélecteur de correspondance régulier amènera le moteur de recherche à rechercher toutes les balises, ce qui affectera grandement les performances

Optimisation de l'acquisition d'éléments 6.js

Lors de l'obtention d'éléments dans js, vous utilisez normalement document.getElementsById Le moteur de recherche recherchera à partir du bas de l'arborescence Dom jusqu'à ce qu'il trouve le document dans la fenêtre, puis reviendra à la recherche, donc. Il est préférable de stocker le document.body lors de l'obtention de l'élément. Lors de sa nouvelle utilisation, retirez simplement cette variable et utilisez-la, 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 la récursion, un débordement de mémoire se produira, provoquant une baisse significative des performances lors de l'exécution de la récursion. Une fois l'opération terminée, la mémoire sera recyclée par le système, donc lors de l'exécution de la récursion, un objet doit être utilisé. pour enregistrer la valeur. Elle est détectée pendant le fonctionnement, si elle existe, elle sera renvoyée directement. Si elle n'existe pas, elle sera ajoutée.

8. Utiliser la requête GET pour Ajax

La requête POST est implémentée en envoyant d'abord l'en-tête de requête HTTP, puis en envoyant les données. GET n'a pas d'en-tête de requête, mais il convient de noter  : la limite de taille GET est d'environ 4K, tandis que POST n'a pas de limite.

9. Chargement paresseux des images

                                                                                                                                                                                              car le volume de la requête est trop important, car le chargement de l'image est trop important. Lorsque la page défile jusqu'à la position de l'image, l'image sera à nouveau chargée.

Maintenant, je recommande un plugin pour le chargement paresseux des images

jquery.lazyload.js

 a=a||b;

a && a.length&& a.length>=0

 if(document.all){
    document.onselectstart= function(){return false}; //for ie
  }else{
    document.onmousedown= function(){return false};
    document.onmouseup= function(){return true};
  }
  document.onselectstart = new Function('event.returnValue=false');

  obj=obj===undefined?Object:obj;