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

10.避免图片src属性为空

src 属性是空字符串的图片很常见，主要以两种形式出现：

var img = new Image();img.src = “”;

这两种形式都会引起相同的问题：浏览器会向服务器发送另一个请求。

技巧
1.排他思想

先排除当前所有的，再进行下一次操作；一般在进行动画、添加样式等时,在二次操作时先清楚前面的样式再从新添加新的样式，避免同时进行动画的冲突。

2.短路运算（||）

一般在一个值需要判断是否存在时，尽量不要使用if语句,可以使用短路运算符，可以省去代码占用的内存。比如：

a=a||b;

a存在则使用a，a不存在则使用b。

3.运算（&&）

可以运用在条件匹配时，以便条件的多余查询，比如判断一个对象是否为数组时，

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

4.伪数组以及数组

当需要封装一个非数组元素变为一个数组时，最简单的办法就是给其添加一个[],如果需要是一个伪数组时，可以给其设置一个length属性。

5.节流阀

一般运用在动画中，设定一个值，开始时设置为true，判断其值，在进入动画时给这个值赋值为false，在动画结束时使用回调函数再重新赋值为true。

6.解除文本的被动选中状态（纯干货）

当在点击一些按钮时，有时会出现文本被选中的情况，让客户看见就犹如bug一般，以下是解除这一状态的代码，粘贴即可。

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');

7.巧妙使用三元运算符

当需要判断一个值是否存在，也可以使用三元运算符使代码更加优化。比如

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

        补充：

        上述是自己在工作中，总结的前端优化以及一些技巧与大家分享，如果大家有什么好的优化以及技巧希望可以多多评论，个人认为技术是需要多沟通才可以更好的进步。

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn