JavaScript beherrscht seit mehr als zwei Jahrzehnten die Tech-Arena und hilft Entwicklern, komplexe Aufgaben zu vereinfachen. Entwickler können damit komplexe Aufgabenwebseiten auf einfachste Weise implementieren. Für die meisten Entwickler ist eine minimierte JavaScript-Datei das häufigste Phänomen, während nur sehr wenige Entwickler den optimierten JavaScript-Code kennen. Während eines Treffens mit vielen Javascript-Entwicklern habe ich festgestellt, dass optimierter JavaScript-Code Entwickler verwirrt. Einige von ihnen tun dies möglicherweise, aber sie sind sich dessen nicht bewusst.
Was ist ein optimierter JavaScript-Code?
Wenn Kombinationen aus einzigartig programmierten Logiken zusammen mit kleinen Hacks zur Verbesserung von Leistung und Geschwindigkeit als optimierter JavaScript-Code bezeichnet werden. Die Optimierung optimiert nicht nur Leistung und Geschwindigkeit, sondern spart auch maximale Entwicklungszeit. Wenn Sie Zeit sparen, sparen Sie auch etwas Geld.
Daher bin ich hier mit einigen nützlichen und fruchtbaren Hacks, die Entwicklern helfen, die Leistung zu optimieren, die Geschwindigkeit zu verbessern und Zeit zu sparen. Ich hoffe, Ihnen gefällt der Artikel, und nachdem Sie ihn durchgearbeitet haben, können Sie den besten optimierten JavaScript-Code verwenden.
1. Machen Sie JS-Code schlanker, indem Sie Javascript-Module kombinieren und JS-Dateien minimieren
Schlankerer Code sorgt für ein standardisiertes Codeformat, das sowohl Entwicklern als auch Anwendungen hilft, indem es mehr Lesbarkeit bietet. Dies ist möglich, wenn Sie die JavaScript-Module kombinieren und die JS-Dateien minimieren. Obwohl eine verkleinerte Version des Codes manchmal schwer zu lesen und zu verstehen ist, wird die Codierung schlanker und mit Sicherheit optimiert. Wenn Sie eine minimierte Quelle haben, hilft dies Ihnen in vielerlei Hinsicht. Beispielsweise kann die Ladezeit der Seite verkürzt, Zeilenumbrüche, zusätzliche Leerzeichen, Kommentare und vieles mehr entfernt werden. Diese Vorteile sind möglich, da die minimierte Quelle die Dateigröße verringert.
Optimierung ist auch eine Art JavaScript-Minimierung, die nicht nur beim Entfernen und Löschen unnötiger Elemente wie Leerzeichen, Kommas usw. eine sehr wichtige Rolle spielt. hilft aber auch Entwicklern, unnötige Codeblöcke zu beseitigen. Im Folgenden finden Sie einige wichtige Tools und Bibliotheken, mit denen Sie den Code minimieren können.
- Google Closure Compiler
- UglifyJS
- Microsoft AJAX Minifier
Wenn Sie über eine größere JavaScript-Datei verfügen, wirkt sich dies auf die Seitenleistung aus. Wenn Sie sich beispielsweise Zeit zum Laden der Seite nehmen und die Geschwindigkeit beim Komprimieren oder Minimieren von Code beeinflussen, wird das Problem auf intelligente Weise behoben.
2. Die Verwendung von Scope in JavaScript ist ein guter Schritt nach vorne
Das Reduzieren der Abhängigkeit von globalen Variablen und Abschlüssen ist eine weitere Möglichkeit, die Leistung und Geschwindigkeit der Anwendungen zu verbessern. Dies ist mithilfe eines JavaScript-Bereichs mit dem Namen "this" möglich. Ja, 'this' hilft Entwicklern, asynchronen Code mit Rückrufen zu schreiben. Ein anderer Bereich wie "mit" sollte jedoch vermieden werden, da er die Leistung der Anwendung durch Ändern der Bereichskette beeinträchtigt.
init: function(name) { this.name = name; }, do: function(callback) { callback.apply(this); } }); var bob = new Car('Aventador'); bob.do(function() { alert(this.name); // 'Aventador' is alerted because 'this' was rewired });
3. Array-Filter verwenden
Mithilfe des Array-Filters können Entwickler alle Elemente aus dem Array-Pool herausfiltern. Es ist eine Methode, die die Elemente entfernt, die getestet werden. Kurz gesagt, die Methode erstellt ein Array, das eine Rückruffunktion für nicht erforderliche Elemente erstellt.
Lassen Sie uns anhand dieses Beispiels verstehen, wie es funktioniert.
schema = schema.filter(function(n) { return n }); Output: ["hi","ilove javascript", "goodbye"]
4. Ersetzen Sie die Funktionszeichenfolge, um die Werte zu ersetzen
Es gibt eine Funktion 'String.replace (), mit der Entwickler Zeichenfolgen mithilfe der Funktionen ersetzen können. Zum Beispiel;
- Verwenden Sie 'String' und 'Regex', um den String zu ersetzen.
- Verwenden Sie die Funktion 'replaceAll ()', um alle Zeichenfolgen zu ersetzen
- Verwenden Sie am Ende / g, wenn Sie 'Regex' verwenden.
Lassen Sie uns dies anhand des folgenden Beispiels verstehen.
var string = "login login"; console.log(string.replace("in", "out")); // "logout login" console.log(string.replace(/in/g, "out")); //"logout logout"
5. Debuggen mit Haltepunkten und Konsole
Mithilfe von Haltepunkten und Debugging-Punkten können Sie Fehler auslagern, indem Sie mehrere Barrieren festlegen. Hier erfahren Sie, wie Sie dies tun können.
Sie können die nächste Funktion mit F11 aufrufen und die Skriptausführung mit F8 fortsetzen .
Mithilfe der Konsole können Entwickler auf einfache Weise die von der Funktion erstellten dynamischen Werte und die Ausgabe überprüfen.
6. Verwenden Sie nicht verwendete Komponenten aus der JavaScript-Bibliothek
Im Verlauf der Entwicklung benötigen Sie möglicherweise Bibliotheken wie jQuery UI oder jQuery Mobile, die eine Vielzahl von Komponenten enthalten. Sie müssen also entscheiden, welche Komponenten geladen werden sollen. Sie können dies tun, während Sie die Bibliotheken herunterladen.
7. Die Verwendung von HTTP / 2 kann einen Unterschied machen
Die Verwendung der neuesten Version des HTTP-Protokolls kann einen großen Unterschied machen und zur Verbesserung der JavaScript-Leistung beitragen. Derzeit verwendet das HTTP-Protokoll HTTP / 2 als neueste Version und verwendet Multiplexing, das mehrere Anforderungen und Antworten ermöglicht, die gleichzeitig funktionieren können. HTTPS verfügt über alle Funktionen von HTTP / 2 und kann daher auch eine hervorragende Option für den Umzug sein.
8. Löschen / Leeren in einem Array mit 'Länge'
Mit 'Länge' können Sie die Größe der Datei ändern, indem Sie Elemente im Array löschen und leeren. Sie müssen das folgende Schlüsselwort 'array.length' verwenden.
Schauen wir uns das Beispiel hier an.
array.length = n
Wie zum Beispiel;
var array = [1, 2, 3, 4, 5, 6]; console.log(array.length); // 6 array.length = 3;</strong> console.log(array.length); // 3 console.log(array); // [1,2,3]
Wenn Sie das Array leeren möchten, müssen Sie es ebenfalls verwenden.
Array.length = 0;.
Schauen Sie sich das Beispiel hier an.
var array = [1, 2, 3, 4, 5, 6]; array.length = 0; console.log(array.length); // 0 console.log(array); // []
Diese Technik ist sehr nützlich, um die Größe der Datei zu ändern und die JavaScript-Leistung zu verbessern.
9. Wenden Sie Switch Case auf If / Else an
Wenn Sie den Fall "Switch over" verwenden, können Entwickler die Ausführungszeit verkürzen. Wenn Sie if / else verwenden, wird das Testen länger. Daher müssen Sie es bewerten.
10. DOM-Objekt zwischenspeichern
Die wiederholte Verwendung von Skripten greift auf bestimmte DOM-Objekte zu. Beispielsweise wird das Objekt "document.images" für jede Schleife zweimal nachgeschlagen. Wenn Sie 10 solcher Bilder haben, werden 20 Aufrufe ausgeführt. Schauen wir uns das Beispiel hier an.
<script type”text/javascript”> for (var i = 0; i <document.images.length; i++) { document.images[i].src=”image.gif”; } <script>
Sie können jedoch nach einer Alternative suchen, die die Anwendungsleistung verbessert, indem Sie die Ladezeit des Browsers verkürzen. Hier ist, wie es passiert;
<script type=”text/javascript”> Var domImages = document.images; For (var i=0; i<domImages.length' i++) domImages[i].src = “image.gif”; <script>
Fazit
Dies sind die 10 wichtigsten JavaScript-Hacks, mit denen Sie die Anwendungsleistung verbessern können. Wenn Sie jedoch der Meinung sind, dass die Anzahl der hier erläuterten Tipps die Liste vervollständigt, irren Sie sich. Es gibt viele ähnliche Hacks, die Sie anwenden, um maximale Vorteile in Bezug auf Leistung, Geschwindigkeit und Zeit zu erzielen. Außerdem hängt es von den von Ihnen verwendeten Frameworks ab. Hier ist eine Liste der Top-Javascript-Frameworks , die als moderne Front-End-Entwicklung verwendet werden sollen
Außerdem würde ich gerne von Ihnen lernen. Wenn Sie auf solche Hacks stoßen, zögern Sie nicht, uns eine E-Mail zu senden. Sie können dies tun, indem Sie Ihre Nachricht und Ihr Wissen über verschiedene Kommunikationskanäle senden, z. B. über Skype, WhatsApp oder Kontakt.