Javascript Frontend Optimierungscode

Optimierung der if-Beurteilung

JavaScript-Bedingungsanweisungen sind in unserer täglichen Entwicklung unvermeidlich, aber oft ist unser Code nicht gut geschrieben. Eine Reihe von if-else-Anweisungen oder mehrere verschachtelte Urteile machen den Code zu aufgebläht. Das folgende Beispiel dient zur Optimierung.

Nachfrage: Es gibt jetzt 4 Produkte, nämlich Mobiltelefone, Computer, Fernseher und Spielekonsolen. Natürlich sind die für jedes Produkt angezeigten Preise unterschiedlich.

1. Die einfachste Methode: Wenn das Urteil

lass Ware = {
  Telefon: 'Mobiltelefon',
  computer: 'Computer',
  Fernsehen: 'Fernsehen',
  gameBoy: 'Spielkonsole',
}

Funktion Preis(Name) {
  wenn (Name === Ware.Telefon) {
    konsole.log(1999)
  } sonst wenn (Name === Ware.Computer) {
    konsole.log(9999)
  } sonst wenn (Name === Ware.Fernsehen) {
    konsole.log(2999)
  } sonst wenn (Name === Ware.gameBoy) {
    konsole.log(3999)
  }
}
Preis('Mobiltelefon') // 9999

Nachteile: Der Code ist zu lang und nicht benutzerfreundlich zu verwalten und zu lesen.

2. Eine bessere Methode: Switch

lass Ware = {
  Telefon: 'Mobiltelefon',
  computer: 'Computer',
  Fernsehen: 'Fernsehen',
  gameBoy: 'Spielkonsole',
}
const Preis = (Name) => {
  Schalter (Name) {
    Fall Ware.Telefon:
      konsole.log(1999)
      brechen
    Fall Ware.Computer:
      konsole.log(9999)
      brechen
    Fall Ware.Fernsehen:
      konsole.log(2999)
      brechen
    Gehäuse Ware.GameBoy:
      konsole.log(3999)
      brechen
  }
}
Preis('Mobiltelefon') // 9999

3. Ein besserer Ansatz: Strategiemuster

Das Strategiemuster verwendet Techniken und Ideen wie Kombination, Delegation und Polymorphismus, um mehrere bedingte Auswahlanweisungen effektiv zu vermeiden. Es bietet perfekte Unterstützung für das Open-Closed-Prinzip, indem es Algorithmen in unabhängige Strategien kapselt, sodass sie leicht umschaltbar, leicht verständlich und leicht erweiterbar sind.

const Ware = neue Karte ([
  ['Telefon', 1999],
  ['Computer', 9999],
  ['Fernsehen', 2999],
  ['gameBoy', 3999],
])

const Preis = (Name) => {
  Ware zurückgeben.get(Name)
}
Preis('Telefon') // 1999

Zur Optimierung gehören

Includes ist eine neue API, die in ES7 hinzugefügt wurde. Im Gegensatz zu indexOf gibt include direkt einen Booleschen Wert zurück, während indexOf den Indexwert zurückgibt. Sowohl Arrays als auch Strings haben Includes-Methoden.

Anforderung: Implementieren wir eine Methode zur Identitätsauthentifizierung und geben das entsprechende Überprüfungsergebnis zurück, indem wir die Identitäts-ID übergeben

Traditionelle Methoden

Funktion „VerifyIdentity“ (Identitäts-ID) {
  wenn (identityId == 1 || identityId == 2 || identityId == 3 || identityId == 4) {
    return 'Ihre Identität ist legal, bitte weitergeben! '
  } anders {
    return "Ihre Identität ist illegal"
  }
}

Inklusive Optimierung

Funktion „VerifyIdentity“ (Identitäts-ID) {
  wenn ([1, 2, 3, 4].includes(identityId)) {
    return 'Ihre Identität ist legal, bitte weitergeben! '
  } anders {
    return "Ihre Identität ist illegal"
  }
}

for-Schleife

In JavaScript können wir for()-, while()-, for(in)- und for(in)-Schleifen verwenden. Tatsächlich hat for(in) von diesen drei Schleifen die schlechteste Effizienz, da es den Hash-Schlüssel abfragen muss. Daher sollte es so wenig wie möglich verwendet werden.

Die For-Schleife ist die traditionellste Anweisung. Sie verwendet die Variable i als Index, um den Speicherort des Zugriffs zu verfolgen, und operiert mit einem Array.

var arr = ['a', 'b', 'c']
für (var i = 0; i < arr.length; i++) {
  console.log(arr[i]) //Die Ergebnisse sind a, b, c in der Reihenfolge
}

Bei der obigen Methode gibt es ein Problem: Wenn die Länge des Arrays eine Million erreicht, muss arr.length eine Million Mal berechnet werden, was ziemlich leistungsintensiv ist. Daher können die folgenden Methoden zur Verbesserung verwendet werden.

var arr = ['a', 'b', 'c']
für (var i = 0, Länge = arr.Länge; i < Länge; i++) {
  console.log(arr[i]) //Die Ergebnisse sind a, b, c in der Reihenfolge
}

In diesem Fall muss arr.length nur einmal berechnet werden, was die Leistung optimiert.

„for-in“ wird im Allgemeinen zum Durchlaufen der Eigenschaften eines Objekts verwendet, die Eigenschaften müssen jedoch aufzählbar sein, um gelesen werden zu können. Gleichzeitig kann for-in auch das Array durchlaufen und beim Durchlaufen des Arrays den Indexwert des Arrays durchlaufen.

var obj = { 0: 'a', 1: 'b', 2: 'c' }
für (var Schlüssel in Objekt) {
  console.log(key) //Die Ergebnisse sind 0, 1, 2 in der Reihenfolge
}

var arr = ['a', 'b', 'c']
für (var Schlüssel in a) {
  console.log(key) //Die Ergebnisse sind 0, 1, 2 in der Reihenfolge
}

Die for-of-Anweisung ähnelt ein wenig der for-in-Anweisung, kann im Unterschied zur for-of-Anweisung jedoch keine Schleife über Objekte ausführen, sondern nur über Arrays.

var arr = ['a', 'b', 'c']
für (var Wert von arr) {
  console.log(Wert) // Die Ergebnisse sind a, b, c in der Reihenfolge
}

for-of ist eine bessere Möglichkeit, über ein Array zu schleifen als for-in. for-of kann zum Iterieren von Mitgliedern jeder Datenstruktur verwendet werden, die über eine Iterator-Schnittstelle verfügt. Es liest den Schlüsselwert direkt. for-in muss alle Eigenschaften des Objekts vollständig aufzählen, einschließlich der benutzerdefinierten hinzugefügten Eigenschaften. Darüber hinaus ist der Schlüssel von for-in vom Typ String, was einen Konvertierungsprozess erfordert und ziemlich kostspielig ist.

Vermeiden Sie daher im Entwicklungsprozess möglichst die Verwendung von „for-in“ beim Durchlaufen von Arrays.

Array-Deduplizierung

Array-Deduplizierung kommt in der tatsächlichen Entwicklung und Datenverarbeitung häufig vor. Es gibt viele Methoden, die hier nicht einzeln aufgeführt sind.

1. Die traditionellste Methode: Verwenden Sie zur Abfrage die IndexOf-Indexeigenschaft des Arrays.

Funktion unique4(arr) {
  var neuesArr = []
  für (var i = 0; i < arr.length; i++) {
    wenn (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  returniere newArr
}
Konsole.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]

2. Optimierung: Verwenden Sie die Set-Methode von ES6.

Set selbst ist ein Konstruktor, der zum Generieren einer Set-Datenstruktur verwendet wird. Die Set-Funktion kann zur Initialisierung ein Array (oder eine andere Datenstruktur mit iterierbarer Schnittstelle) als Parameter akzeptieren. Mit dem Set-Objekt können Sie jeden beliebigen Werttyp speichern, unabhängig davon, ob es sich um einen primitiven Wert oder einen Objektverweis handelt. Es ähnelt einem Array, aber die Mitgliedswerte sind eindeutig und es gibt keine doppelten Werte.

Funktion unique4(arr) {
  return Array.from(new Set(arr)) // Verwenden Sie Array.from, um die Set-Struktur in ein Array umzuwandeln}
Konsole.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]

Pfeilfunktionen

Pfeilfunktionsausdrücke haben eine prägnantere Syntax als Funktionsausdrücke. Daher wird empfohlen, bei der Entwicklung Pfeilfunktionen zu verwenden. Insbesondere in Vue-Projekten ist bei der Verwendung von Pfeilfunktionen nach der Änderung dieser Variablen keine Neuzuweisung einer Variablen erforderlich.

// Funktionen verwenden
var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map(Funktion (x) {
  Rückgabewert x * x
})
console.log(arrFunktion)

// Verwenden von Pfeilfunktionen var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map((x) => x * x)

Es ist wichtig zu beachten, dass Pfeilfunktionen keine Argumente binden, sondern stattdessen Restparameter verwenden ...

// Argumente können nicht verwendet werden
lass fun1 = (b) => {
  console.log(Argumente)
}
fun1(2, 92, 32, 32) // Nicht abgefangener Referenzfehler: Argumente sind nicht definiert

// Restparameter verwenden let fun2 = (...c) => {
  console.log(c)
}
fun2(3, 82, 32, 11323) // [3, 82, 32, 11323]

Erschaffung von Dom

Wenn Sie mehrere DOM-Elemente erstellen, hängen Sie die Elemente zuerst an DocumentFragment an und fügen Sie DocumentFragment schließlich einheitlich zur Seite hinzu.

Konventionelle Methoden;

für (var i = 0; i < 1000; i++) {
  var el = document.createElement('p')
  el.innerhtml = i
  Dokument.Body.AnhängenKind(el)
}

Verwenden von DocumentFragment zum Optimieren mehrerer Anhänge

var frag = document.createDocumentFragment()
für (var i = 0; i < 1000; i++) {
  var el = document.createElement('p')
  el.innerhtml = i
  frag.appendChild(el)
}
Dokument.Body.AnhängenKind(frag)

Ein besserer Ansatz: Verwenden Sie eine innerHTML-Zuweisung, anstatt ein DOM-Element zu erstellen

var html = []
für (var i = 0; i < 1000; i++) {
  html.push('<p>' + i + '</p>')
}
Dokument.body.innerHTML = html.join('')

Speicherlecks

Von Systemprozessen nicht mehr genutzter Speicher wird nicht rechtzeitig freigegeben, man spricht dann von einem Speicherleck. Wenn die Speichernutzung zunimmt, kann dies im besten Fall die Systemleistung beeinträchtigen oder sogar zum Absturz des Prozesses führen.

Ursachen für Speicherlecks

Globale Variablen

1. Nicht deklarierte Variablen oder Variablen, die mit diesem erstellt wurden (dies zeigt auf Fenster), verursachen Speicherlecks

Funktion fn() {
  a = "Eigentlich bin ich eine globale Variable"
}
fn()

Funktion fn() {
  this.a = "Eigentlich bin ich eine globale Variable"
}
fn()

Lösung:

• Vermeiden Sie die Erstellung globaler Variablen
• Um den strikten Modus zu verwenden, fügen Sie „use strict“ oben in den Dateikopf oder die Funktion Ihres JavaScripts ein.

2. In der Vue-Einzelseitenanwendung werden die deklarierten globalen Variablen beim Seitenwechsel nicht gelöscht

<Vorlage>
  <div id="Startseite">
    Dies ist die Homepage</div>
</Vorlage>

<Skript>
  Standard exportieren {
    montiert() {
      Fenster.Test = {
        // Hier wird der DOM-Objektname dieser Seite im globalen Fensterobjekt referenziert: 'home',
        Knoten: document.getElementById('home')
      }
    }
  }
</Skript>

Lösung: Entfernen Sie den Verweis, wenn die Seite entladen wird.

zerstört () {
  window.test = null // Dereferenzierung, wenn die Seite entladen wird}

Verschlüsse

Ursache für durch Schließung verursachten Speicherverlust: Durch Schließung können lokale Variablen innerhalb der Funktion beibehalten und ihre Freigabe verhindert werden.

Funktion fn() {
  var a = "Ich bin ein"
  Rückgabefunktion () {
    konsole.log(a)
  }
}

Lösung: Definieren Sie die Ereignisbehandlungsfunktion extern und geben Sie den Abschluss frei, oder löschen Sie den Verweis auf DOM in der externen Funktion, die die Ereignisbehandlungsfunktion definiert.

Timer- oder Ereignisüberwachung

Weil einige Seiten im Projekt zwangsläufig Timer oder eine Ereignisüberwachung benötigen. Wenn der Timer jedoch beim Verlassen der aktuellen Seite nicht rechtzeitig und angemessen gelöscht wird, führt dies zu Verwirrung in der Geschäftslogik oder sogar zum Einfrieren der Anwendung. Zu diesem Zeitpunkt muss der Timer-Ereignislistener gelöscht werden, d. h. der Timer muss in der Lebenszyklusfunktion des Seitenentladens (Schließens) gelöscht werden.

Methoden:{
  resizeFun () {
    this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128
  },
  setzeTimer() {
    dieser.timer = setzeInterval(() => { })
  },
  clearTimer() {//Timer löschen clearInterval(this.timer)
    this.timer = null
	}
},
montiert() {
  dies.setTimer()
  window.addEventListener('Größe ändern', this.resizeFun)
},
vorZerstören() {
  window.removeEventListener('Größe ändern', this.resizeFun)
  dies.clearTimer()
}

Stabilisierung und Drosselung

Im Prozess der Front-End-Entwicklung müssen wir häufig einige kontinuierlich ausgelöste Ereignisse binden, wie etwa Größenänderung, Scrollen, Mausbewegung usw., aber manchmal möchten wir während der kontinuierlichen Auslösung von Ereignissen nicht so häufig Funktionen ausführen. Hier kommen Anti-Shake und Drosselung ins Spiel.

Fall 1: Bei der Remote-Suche müssen Daten dynamisch über die Schnittstelle abgerufen werden. Wenn die Schnittstelle jedes Mal angefordert wird, wenn der Benutzer Daten eingibt, wird Bandbreite und Leistung verschwendet.

<Auswählen :remote-method="remoteMethod">
    <Option v-for="Artikel in TemoteList" :value="Artikel.Wert" :key="Artikel.ID">{{Artikel.Label}}</Option>
</Auswählen>

<Skript>
Funktion Entprellung(fn, warten) {
  let timeout = null
  Rückgabefunktion () {
    wenn (Zeitüberschreitung !== null) Zeitüberschreitung löschen(Zeitüberschreitung)
    Timeout = setzeTimeout(fn, warte)
  }
}

Standard exportieren {
  Methoden: {
    remoteMethod:debounce(Funktion (Abfrage) {
        // zu tun ...
    }, 200),
  }
}
<Skript>

Fall 2: Wenn das Scroll-Ereignis kontinuierlich ausgelöst wird, wird die Handle-Funktion nicht sofort ausgeführt. Wenn das Scroll-Ereignis nicht innerhalb von 1000 Millisekunden ausgelöst wird, wird die Handle-Funktion einmal mit Verzögerung ausgelöst.

Funktion Entprellung(fn, warten) {
  let timeout = null
  Rückgabefunktion () {
    wenn (Zeitüberschreitung !== null) Zeitüberschreitung löschen(Zeitüberschreitung)
    Timeout = setzeTimeout(fn, warte)
  }
}
Funktion handle() {
  Konsole.log(Math.random())
}
window.addEventListener('scrollen', Entprellung(Handle, 1000))

JS asynchron laden

Standardmäßig lädt der Browser JS-Skripte synchron. Beim Parsen von HTML wird er angehalten, wenn er auf ein <script>-Tag stößt. Das Parsen und Rendern wird fortgesetzt, nachdem das Skript heruntergeladen, geparst und ausgeführt wurde.

Wenn die JS-Datei groß ist, dauert das Herunterladen sehr lange, was leicht dazu führen kann, dass der Browser blockiert wird. Auf der Browserseite wird ein „weißer Bildschirm“-Effekt angezeigt und der Benutzer hat das Gefühl, dass der Browser „festhängt“ und nicht mehr reagiert. An diesem Punkt können wir das JS-Skript asynchron laden und ausführen lassen.

<script src="Pfad/zu/Homepage.js" verschieben></script>
<script src="Pfad/zu/Home.js" async></script>

Im obigen Code hat das <script>-Tag jeweils die Attribute defer und async. Wenn der Browser diese beiden Attribute erkennt, wird js asynchron geladen. Mit anderen Worten wartet der Browser nicht, bis das Skript heruntergeladen und ausgeführt wurde, bevor er die weitere Ausführung vornimmt, sondern führt die weitere Ausführung aus.

Der Unterschied zwischen „defer“ und „async“:

• defer: Die DOM-Struktur ist vollständig generiert und andere Skripte werden ausgeführt, bevor sie ausgeführt wird (das Rendering ist abgeschlossen). Wenn mehrere Defer-Skripte vorhanden sind, werden sie in der Reihenfolge geladen und ausgeführt, in der sie auf der Seite erscheinen.
• async: Sobald der Download abgeschlossen ist, unterbricht die Rendering-Engine das Rendering, führt dieses Skript aus und setzt dann das Rendering fort (wird nach dem Download ausgeführt). Bei mehreren asynchronen Skripten besteht keine Garantie, dass sie in der Reihenfolge geladen und ausgeführt werden, in der sie auf der Seite erscheinen.

Oben sind die Details des Javascript-Frontend-Optimierungscodes aufgeführt. Weitere Informationen zur Javascript-Optimierung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!