Front-End-Leistungsoptimierung und Techniken_Javascript-Techniken

Vorwort Warum die Optimierung der Leistung für Front-End-Ingenieure so wichtig ist

In der Branche gibt es ein Sprichwort, von dem ich nicht weiß, ob Sie davon gehört haben: „Der Leistungsverbrauch von Code, der von Leuten geschrieben wurde, die sich mit Leistungsoptimierung auskennen und JQuery-Quellcode studiert haben, wird sich hunderte Male von denen unterscheiden.“ Wer versteht die Leistungsoptimierung nicht tausendmal? ‘, das aktuelle Javascript ist ein Übergangsprozess von ECMAscript3 zu ECMAscript5 und ECMAscript6. Die Probleme, die durch falsche Codierungsmethoden entstehen, wenn JavaScript nicht perfekt ist, können nicht ignoriert werden.

Leistungsoptimierung

Jetzt werde ich einige meiner Erkenntnisse zur Leistungsoptimierung mit Ihnen teilen

1. Sprite-Karte

Das Grundlegendste ist, das Hintergrundbild so weit wie möglich in eine Sprite-Map umzuwandeln , um Bildanforderungen zu reduzieren. Ein weiterer Grundinstinkt allgemeiner Webingenieure ist die Erstellung von Sprite-Karten.

2. CSS-Selektoroptimierung

Versuchen Sie, in CSS so viele Nachkommen-Selektoren wie möglich zu verwenden. Wenn Sie Nachkommen-Selektoren verwenden, durchsucht die Suchmaschine alle Nachkommen-Selektoren die Suche und reduziert so den Leistungsverbrauch der Suchmaschine.

3.js ändert den Stil und verwaltet direkt den Klassennamen

Verwenden Sie beim Betrieb von Elementstilen in js keinen großen Einfluss auf die Leistung, wenn ein Stil hinzugefügt wird. Die Seite wird neu gezeichnet, und beim Neuzeichnen muss darauf geachtet werden, dass bei der Bedienung von Stilen die direkte Bedienung des Klassennamens nur eine Neuzeichnung verursacht, während das direkte Hinzufügen von Stilen mit Stil zu mehreren Neuzeichnungen führt.

4.js betreibt direkt Dom-Knoten

Versuchen Sie beim Betreiben eines Knotens, den Knoten nach dem Element hinzuzufügen. Wenn Sie ihn vor dem Knoten einfügen, verursachen die Knoten nach dem eingefügten Knoten einen Reflow. Beim Einfügen nach hinten müssen Sie nur den eingefügten Knoten umfließen Knoten einmal.

Einige Leute verstehen möglicherweise die Konzepte des Neuzeichnens und Reflows nicht

5. Regulärer Matching-Selektor

Attributselektoren in CSS3 und jQuery. Versuchen Sie, sie nicht zu verwenden, wenn die Leistungsoptimierung nicht berücksichtigt wird. Der reguläre Matching-Selektor führt dazu, dass die Suchmaschine alle Tags durchsucht, was sich stark auf die Leistung auswirkt

6.js Elementerfassungsoptimierung

Wenn Sie Elemente in js abrufen, verwenden Sie normalerweise document.getElementsById. Die Suchmaschine sucht vom unteren Rand des Dom-Baums, bis sie das Dokument im Fenster findet, und kehrt dann zur Suche zurück Es ist am besten, document.body beim Abrufen des Elements zu speichern. Wenn Sie es erneut verwenden, nehmen Sie diese Variable einfach heraus und verwenden Sie sie, was die Leistung der Suchmaschine senken kann

7. Speicherüberlauf

Im Allgemeinen kommt es beim Ausführen einer Rekursion zu einem Speicherüberlauf, der zu einem erheblichen Leistungsabfall beim Ausführen der Rekursion führt. Nach Abschluss des Vorgangs wird der Speicher vom System recycelt, sodass beim Ausführen der Rekursion ein Objekt verwendet werden muss um den Wert während des Betriebs zu speichern, wird er direkt zurückgegeben. Wenn er nicht vorhanden ist, kann dies die große Leistung der Rekursion beheben.

8. GET-Anfrage für Ajax verwenden

Die POST-Anfrage wird implementiert, indem zuerst der HTTP-Anfrage-Header und dann die Daten gesendet werden. GET hat keinen Anfrage-Header, es sollte jedoch beachtet werden : Die GET-Größenbeschränkung beträgt etwa 4 KB, während es bei POST keine Beschränkung gibt.

9. Lazy Loading von Bildern

Da das Anforderungsvolumen zu groß ist, kann das Bild träge geladen werden.

Jetzt empfehle ich ein Plugin zum verzögerten Laden von Bildern

   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;

        补充：

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