Detaillierte Erläuterung mehrerer Wissenspunkte zur Verbesserung der JavaScript-Leistung

Detaillierte Zusammenfassung mehrerer Wissenspunkte zur Verbesserung der JavaScript-Leistung:

Ich habe einige Zeit damit verbracht, den größten Teil des Buches „High Performance JavaScript“ zu lesen Vor einiger Zeit habe ich Bücher gelesen und dann angefangen, an Projekten zu arbeiten. Ich bin froh, dass die arbeitsreichste Woche vorbei ist. Aus Zeitmangel habe ich diesen Monat nicht viele Studiennotizen geschrieben. Nach der anstrengendsten Woche habe ich die letzten zwei Tage damit verbracht, die Mitternachtslektüre zu verbrennen ... Ich habe dieses Buch schließlich zugedeckt, als ich noch am Leben war. .

Nachdem Sie mit dem Lesen fertig sind, müssen Sie etwas lernen. Lassen Sie mich zunächst über meine Ansichten zu diesem Buch sprechen. Insgesamt ist der Inhalt gut, aber er fühlt sich etwas alt an (als Front-End-Neuling kann es sein, dass mein eigenes Niveau begrenzt ist und ich die wahre Bedeutung nicht verstehe). . Während ich dieses Buch las, habe ich auch viel Code zum Testen geschrieben und die Ausführung der in diesem Buch empfohlenen Schreibmethode und der ursprünglichen populären Schreibmethode überwacht, um die möglichen Probleme zu verstehen tatsächlich gemessen. Wenn Sie es selbst dann nicht sehen können, wenn Sie einen Haltepunkt setzen und die Ausführung verfolgen, können Sie nichts dagegen tun. Was die Wissenspunkte im Buch betrifft, hier ist nur eine kurze Zusammenfassung einiger der Wissenspunkte, die ich persönlich empfehle. Natürlich ~ kritisieren Sie nicht, wenn es Ihnen nicht gefällt.

Für den Ladeort von js-Dateien

In HTML-Dateien kann das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag zum 93f0f5c25f18dab9d176bd4f6de5d30e-Tag hinzugefügt werden ;Körper> ; regional. Aufgrund des Single-Thread-Grunds für die JavaScript-Ausführung und das UI-Rendering wird beim Laden der JS-Datei der nachfolgende Parsing-Prozess der Seite blockiert. Die Seite wartet, bis die JS-Datei vollständig geladen und ausgeführt ist, bevor sie weiter ausgeführt wird die Operation. Dann tritt das Problem auf, die Seite ist möglicherweise leer oder hängt fest. Als Frontend-Entwickler ist es wichtig, nicht nur die Anforderungen zu realisieren, sondern auch eine hochwertige Benutzererfahrung zu haben. Dann müssen wir das langweilige Warten der Benutzer beseitigen. Hier sind zwei Lösungen, die ich mir überlegt habe:

1. Wenn die js-Datei keine besonderen Anforderungen stellt, es muss auf der Seite gerendert werden, dann wählen Sie, die js-Datei vor dem 36cc49f0c466276486e50c850b7e4956-Tag zu platzieren (d. h. hinter dem auf allen Seiten präsentierten Inhalt). CSS-Datei im 93f0f5c25f18dab9d176bd4f6de5d30e-Bereich (niemand möchte sie sehen) Eine Seite mit einem überfüllten Layout. Dadurch können Benutzer eine Layoutseite anstelle einer leeren Seite sehen. Dann werden einige Leute darauf hinweisen: Die Daten müssen über js-Anfragen geladen werden. Das Laden von Daten, die dringend benötigt werden, kann zuerst ausgeführt werden, und gleichzeitig kann eine einfache Ladeanimation oder -aufforderung erstellt werden.

2. Wenn diese js-Dateien angeben, dass sie zuerst ausgeführt werden müssen, um den Seiteninhalt besser anzuzeigen, können Sie eine kleine Ladeanimation auf die erste js oder Seite setzen einige interessante oder niedliche animierte Szenen. Dies kann auch die Langeweile des Wartens auf Benutzer besser vermeiden. Möglicherweise sind sie mehr an der Ladeanimation interessiert, was die Benutzererfahrung des Projekts verbessern kann.

Abschließende Empfehlung: Platzieren Sie das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag so weit wie möglich vor dem 36cc49f0c466276486e50c850b7e4956-Tag, um die Benutzererfahrung zu verbessern.

Zum Zusammenführen von JS-Dateien

In vielen Teamentwicklungen platzieren wir möglicherweise Codeblöcke mit unterschiedlichen Funktionen in verschiedenen JS-Dateien, um die Zusammenarbeit aller beim Schreiben von Code während des Entwicklungsprozesses zu erleichtern Dies ist praktischer, da Sie nur den entsprechenden Ordner oder die entsprechende Datei suchen müssen, anstatt eine Methode in einer langen Datei zu finden. Dies wird tatsächlich die Effizienz der Teamentwicklung verbessern und es neuen Leuten erleichtern, sekundäre Entwicklung und Wartung durchzuführen. Wie wäre es also, dieses Problem in die Seitenleistung einzubeziehen? Das ist genau das Problem, wie es im Buch heißt: Jede HTTP-Anfrage bringt zusätzlichen Leistungsaufwand mit sich, sodass das Herunterladen einer einzelnen 100-KB-Datei schneller ist als das Herunterladen von vier 25-KB-Dateien.

Das Herunterladen einer 100-KB-Datei ist schneller als das Herunterladen von vier 25-KB-Dateien, und es ist von großem Vorteil, jede Datei während des Entwicklungsprozesses zu unterscheiden, sodass ich glaube, dass dieser Vorgang jedem bekannt sein wird Es gibt mittlerweile so viele Front-End-Tools, dass Sie einfach die Komprimierung verwenden können, die Sie gewohnt sind~

Hier ist eine kurze Erwähnung: Sie können beim Laden von Dateien auch die Attribute „defer“ und „async“ für verzögertes Laden und asynchrones Laden verwenden , die meisten von ihnen unterstützen das Defer-Attribut noch nicht und ich weiß nicht, ob es irgendwelche spezifischen Probleme geben wird. Interessierte Freunde können diesen Wissenspunkt selbst googeln, ich werde ihn hier kurz erwähnen.

Die meisten heutigen Frameworks unterstützen auch Lazy Loading und On-Demand-Loading.

Schnellerer Datenzugriff

Für den Browser gilt: Je tiefer ein Bezeichner liegt, desto langsamer ist das Lesen und Schreiben (für diesen Punkt gilt dies auch für die Prototypenkette). Das sollte nicht schwer zu verstehen sein: Je weiter der Lebensmittelladen von Ihrem Zuhause entfernt ist, desto länger brauchen Sie, um Sojasauce zuzubereiten ... Du ungezogener Junge, wenn du so lange brauchst, um Sojasauce zuzubereiten Gemüse wird verbrannt -.-~

Wenn wir einen Variablenwert innerhalb der aktuellen Funktion mehrmals verwenden müssen, können wir ihn zuerst mit einer lokalen Variablen speichern. Der Fall ist wie folgt:

  //修改前
  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
      };
  };

Optimierung von DOM-Operationen

Wie wir alle wissen, verbrauchen DOM-Operationen weitaus mehr Leistung als die JavaScript-Ausführung. Obwohl wir den Betrieb von DOM nicht vermeiden können, können wir versuchen, den Leistungsverbrauch dieser Operation zu reduzieren .

Lassen Sie uns dieses Problem durch Code erklären:

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

Eine Neufassung der oben genannten Methode:

  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的值，一次写入值
  };

Reduzieren Sie das Neuzeichnen und Neufließen von Dom

Änderungen im Elementlayout, Hinzufügungen, Löschungen und Änderungen am Inhalt oder Änderungen der Browserfenstergröße führen zu Neufließen und dem Schriftart Änderungen an der Farbe oder Hintergrundfarbe führen zu einem Neuzeichnen.
Für Vorgänge, die dem folgenden Code ähneln, heißt es, dass die meisten modernen Browser optimiert wurden (optimiert in eine neu angeordnete Version):

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

Bei mehreren Vorgängen können die folgenden drei Methoden auch die Anzahl der Reflows und Neuzeichnungen reduzieren:

1. Dom wird zuerst ausgeblendet und dann 2 Reflows nach dem Vorgang angezeigt (vorübergehende Anzeige: keine)

2.document.createDocumentFragment() Dokumentfragmentverarbeitung erstellen, an die Seite anhängen und einmal neu anordnen

3.var newDOM = oldDOM.cloneNode(true) Eine Dom-Kopie erstellen, die Kopie ändern oldDOM.parentNode . replaceChild(newDOM,oldDOM) überschreibt das ursprüngliche DOM und ordnet es zweimal neu an

Optimierung der Schleife

Dies sollte eine Schreibmethode sein, die viele Leute kennen, und Sie können sie einfach durchgehen (das wird sie). später noch verwendet werden) Code + Beschreibung des Kommentarformulars)~

  //修改前
  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]);
  }

Vernünftige Verwendung von Binärdateien

Zum Beispiel: Modulo 2, das Das niedrigste Bit einer geraden Zahl ist 0, das niedrigste Bit einer ungeraden Zahl ist 0 und das Ergebnis einer bitweisen UND-Verknüpfung mit 1 ist 0. Das niedrigste Bit einer ungeraden Zahl ist 1 und das Ergebnis einer bitweisen UND-Verknüpfung mit 1 ist 1.

Der Code lautet wie folgt:

  .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";
      }
  };

Obwohl moderne Browser gute Arbeit geleistet haben, habe ich das Gefühl, dass dies mein Streben nach Codequalität ist. Und vielleicht hat die Nichtbeachtung eines oder zweier Punkte keinen großen Einfluss auf die Leistung, aber nach der Optimierung von mehreren Punkten aus kann es zu einem qualitativen Sprung kommen~

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung mehrerer Wissenspunkte zur Verbesserung der JavaScript-Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!