Zusammenfassung der JavaScript-Wissenspunkte: So verbessern Sie die Leistung_Javascript-Fähigkeiten

Die Leistungsprobleme von JavaScript sind nicht zu unterschätzen, weshalb wir Entwickler beim Schreiben von JavaScript-Programmen mehr auf einige Details achten müssen. In diesem Artikel werden die Wissenspunkte der JavaScript-Leistungsoptimierung ausführlich vorgestellt, was auf jeden Fall nützliche Informationen ist.

Lassen Sie mich zunächst die grundlegende Syntax von Javascript konsolidieren:

Grundlegende Syntax von Javascript

Verwenden Sie das Schlüsselwort var, um Variablen zu definieren

Syntax: var Variablenname=Variablenwert

Bezeichner: ①, bestehend aus Buchstaben, Zahlen und Unterstrichen. Es darf kein Schlüsselwort sein.

Datentyp:

Numerischer Typ: Zahl

String: string

Boolescher Typ: boolean

Spezielle Datentypen: undefiniert leer undefiniert nicht zugewiesen

Nullwert: null

Referenztyp-Objektfunktion

Erkennen Sie den Datentyp des Parameters: typeof() gibt die Zeichenfolge zurück, die dem Datentyp entspricht

Verwendung von zwei Gleichheitszeichen == und drei Gleichheitszeichen ===

==: Vergleichswerte sind unabhängig vom Datentyp gleich

===: Der kongruente Vergleich bezieht sich sowohl auf numerische Werte als auch auf Datentypen

Boolesche Umgebung: Wird automatisch in einen booleschen Wert konvertiert, wenn if

auftritt

Boolesche Umgebung in der Zeichenfolge string: leer ist falsch, nicht leer ist wahr

Boolesche Umgebung in numerischen Zahlen: 0 ist falsch, ungleich 0 ist wahr

Die Beziehung zwischen Zahl und Zeichenfolge

① Führen Sie bei der Begegnung einen Spleißvorgang durch

② Wenn Operationen ausgeführt werden müssen, muss die Zeichenfolge in einen numerischen Wert umgewandelt werden

Konvertierungsmethode 1, Zeichenfolge*1 in numerischen Typ

Konvertierungsmethode 2: Zahl (Zeichenfolge) in numerischen Typ konvertieren

1: Ladeort der JS-Dateien

In HTML-Dateien können 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags zum 93f0f5c25f18dab9d176bd4f6de5d30e-Bereich hinzugefügt werden. Aufgrund des Single-Threaded-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 ein hochwertiges Benutzererlebnis zu bieten. Dann müssen wir das langweilige Warten der Benutzer beseitigen. Um dieses Problem zu lösen, habe ich mir zwei Lösungen ausgedacht:

1. Wenn für die js-Datei keine besonderen Anforderungen gelten, die darauf hinweisen, dass sie vor dem Rendern der Seite geladen und kompiliert werden muss, wählen Sie, die js-Datei vor dem 36cc49f0c466276486e50c850b7e4956 zu platzieren Der auf der Seite angezeigte Inhalt befindet sich weiterhin im 93f0f5c25f18dab9d176bd4f6de5d30e-Bereich (niemand möchte eine Seite mit einem unordentlichen Layout sehen). 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, dann fügen Sie eine kleine Ladeanimation auf die erste js oder Seite ein, die etwas Interessantes oder Niedliches sein kann. 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.

2: js-Dateien zusammenführen

In vielen Teamentwicklungen platzieren wir möglicherweise Codeblöcke mit unterschiedlichen Funktionen in verschiedenen js-Dateien, sodass es für alle bequemer ist, während des Entwicklungsprozesses beim Schreiben von Code zusammenzuarbeiten. Schließlich müssen wir nur den entsprechenden Ordner finden oder Datei. Es wird nicht nach einer Methode in einer langen Datei gesucht. Dies wird tatsächlich die Effizienz der Teamentwicklung verbessern und es neuen Leuten erleichtern, nach dem Beitritt sekundäre Entwicklungs- und Wartungsarbeiten durchzuführen. Wie wäre es also, dieses Problem in die Seitenleistung einzubeziehen? Dies ist genau das Problem, das im Buch beschrieben wird: 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 bietet große Vorteile, jede Datei während des Entwicklungsprozesses zu unterscheiden, sodass das Problem der Zusammenführung meiner Meinung nach nach Abschluss der Entwicklung behoben wird Ist jedem bekannt, oder? Es gibt mittlerweile so viele Front-End-Tools, also verwenden Sie einfach die Komprimierung, die Sie gewohnt sind~

Ich möchte hier kurz erwähnen, dass Sie beim Laden von Dateien auch die Attribute „defer“ und „async“ verwenden können. In modernen Browsern unterstützen die meisten von ihnen bereits das Attribut „defer“. Ich weiß noch nicht, ob es konkrete 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.

Dritten: Schnellerer Datenzugriff

Für den Browser ist es umso langsamer, ihn zu lesen und zu schreiben, je tiefer die Position eines Bezeichners liegt (dasselbe gilt für die Prototypenkette). Das sollte nicht schwer zu verstehen sein: Je weiter das Lebensmittelgeschäft von Ihrem Zuhause entfernt ist, desto länger brauchen Sie, um Sojasauce zuzubereiten ... Freches Kind, wenn Sie so lange brauchen, um Sojasauce und Gemüse zuzubereiten 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
};
}; 

Viertens: Optimierung von DOM-Operationen

Wie wir alle wissen, verbrauchen DOM-Operationen weitaus mehr Leistung als die Ausführung von JavaScript. Obwohl wir nicht umhin können, auf DOM zu arbeiten, können wir versuchen, den Leistungsverbrauch dieser Operation so weit wie möglich zu reduzieren.

Lassen Sie uns dies anhand des Codes erklären:

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

Schreiben Sie die obige Methode neu:

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

5: Reduzieren Sie das Neuzeichnen und Neuanordnen von Dom

Änderungen am Elementlayout, hinzugefügte Inhalte, Löschungen oder Änderungen der Browserfenstergröße führen zu einem Umfließen, während Änderungen an der Schrift- oder Hintergrundfarbe zu einer Neuzeichnung führen.
Für Vorgänge, die dem folgenden Code ähneln, wird gesagt, dass die meisten modernen Browser optimiert wurden (optimiert in eine Neuanordnungsversion):

//修改前
var el = document.getElementById("div");
el.style.borderLeft = "1px"; //1次重排版
el.style.borderRight = "2px"; //又1次重排版
el.style.padding = "5px"; //还有1次重排版
//修改后
var el = document.getElementById("div");
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 nach zwei Neuanordnungen angezeigt (vorübergehende Anzeige: keine)

2.document.createDocumentFragment() erstellt die Dokumentfragmentverarbeitung, hängt nach dem Vorgang an die Seite an und ordnet sie einmal neu an

3.var newDOM = oldDOM.cloneNode(true) erstellt eine Kopie von Dom. Nach dem Ändern der Kopie überschreibt oldDOM.parentNode.replaceChild(newDOM,oldDOM) das ursprüngliche DOM und ordnet es zweimal neu an

5: Schleifenoptimierung

Dies sollte eine Schreibmethode sein, die viele Leute kennen. Sie können sie einfach durchgehen (sie wird später noch in Form von Codekommentaren erklärt)~

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

6: Richtige Verwendung von Binärdateien

Beispiel: Bei Modulo 2 ist das niedrigste Bit gerader Zahlen 0, das niedrigste Bit ungerader Zahlen ist 0, das Ergebnis der bitweisen UND-Verknüpfung mit 1 ist 0, das niedrigste Bit ungerader Zahlen ist 1, das Ergebnis der 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, denke ich, dass dies mein Streben nach Codequalität ist. Und vielleicht hat es keinen großen Einfluss auf die Leistung, wenn man ein oder zwei Punkte nicht beachtet, aber nach der Optimierung von mehreren Punkten aus werden die möglichen Ergebnisse einen qualitativen Sprung darstellen~