Wie optimiert man die Leistung in Vue.js? 9 Tipps zum Teilen

Wie optimiert man die Leistung in Vue.js? Der folgende Artikel wird Ihnen neun Tipps zur Leistungsoptimierung von Vue.js geben. Ich hoffe, er wird für alle hilfreich sein!

(Lernvideofreigabe: VueJS Tutorial)

01 Funktionskomponenten

** Prinzip: **** Funktionale Komponenten hat keinen Zustand (keine reaktiven Daten) und keine Instanz (keinen diesen Kontext). Wir können uns eine funktionale Komponente als eine Funktion in der Komponente vorstellen. Der Eingabeparameter ist der Renderkontext und der Rückgabewert ist der gerenderte HTML-Code. Gerade weil funktionale Komponenten viele Verarbeitungsschritte wie Reaktionsfähigkeit und Hook-Funktionen vereinfachen, wird die Rendering-Leistung bis zu einem gewissen Grad verbessert.

Anwendbare Szenarien:

1. Reine Anzeigekomponenten, die keine reaktionsfähigen Daten und Verarbeitungslogik erfordern

2. Hochwertige Komponenten, die zum Markieren oder Bereitstellen grundlegender Funktionen verwendet werden

3. in einer Schleife (v-for) Element

02 Untergeordnete Komponentenaufteilung

**Prinzip: **Im Code wird vor der Optimierung jedes Mal, wenn sich die von Requisiten übergebene Zahl ändert, diese neu gerendert Rendering-Prozess Die schwere Funktion wird erneut aufgerufen, um leistungsintensive Vorgänge auszuführen. Die optimierte Codelogik besteht darin, komplexe Vorgänge in Unterkomponenten zu kapseln. Da Vue-Updates auf Komponentengranularität erfolgen, wird die übergeordnete Komponente neu gerendert, wenn sich die eingehende Nummer ändert, und die Unterkomponente ist nicht von der Anzahl abhängig Hängt nicht von der Anzahl ab. Wird nicht erneut gerendert. Die Anzahl der durchgeführten Berechnungen wird reduziert und die Leistung wird natürlich verbessert.

**Anderes:** Tatsächlich können hier auch berechnete Eigenschaften zur Optimierung verwendet werden (externe Abhängigkeiten werden nicht neu berechnet, wenn keine Änderungen vorgenommen werden, und die Kosten für zusätzliche Rendering-Unterkomponenten werden gespart)

03 Lokale Variablen

**Prinzip: **Wenn Sie den Vorher- und Nachher-Code vergleichen, können Sie feststellen, dass der Unterschied darin besteht: Der Code vor der Optimierung verweist bei jeder Berechnung direkt auf this.base, während der Code nach der Optimierung verwendet wird Lokale Variablenbasis zur Berechnung von this.base Nach dem Zwischenspeichern werden lokale Variablen zur Berechnung in nachfolgenden Berechnungen aufgerufen. Warum gibt es einen so offensichtlichen Leistungsunterschied? Der Grund dafür ist, dass bei jedem Zugriff auf this.base ein Teil des Logikcodes ausgeführt wird, um festzustellen, ob sich die vorhandenen Abhängigkeiten geändert haben. Andernfalls werden sie neu berechnet , wird der zuletzt berechnete Wert zurückgegeben. Der Leistungsverbrauch dieser Art von Berechnungslogik ist möglicherweise nicht offensichtlich, wenn sie nur wenige Male aufgerufen wird, aber wenn sie zu oft ausgeführt wird (ähnlich dem Beispiel, in dem 300 Komponenten pro Frame aktualisiert werden und jede Komponente this.base mehrfach aufruft). Mal innerhalb eines Updates), dann wird es einen relativ großen Leistungsunterschied geben. 04 DOM mit V-Show wiederverwenden durch Festlegen des Anzeigestilattributs des DOM-Elements.

Kompilierungsprozess: v-if-Switching hat einen teilweisen Kompilierungs- und Entladeprozess. Während des Switching-Prozesses werden interne Ereignis-Listener und Unterkomponenten ordnungsgemäß zerstört und v-show ist nur ein einfacher Switching-Prozess.

Kompilierungsbedingungen: v-if ist faul, wenn die Anfangsbedingung falsch ist, tun Sie nichts, starten Sie die teilweise Kompilierung nur, wenn die Bedingung zum ersten Mal wahr wird, v-show wird unter allen Bedingungen kompiliert und dann zwischengespeichert. und die DOM-Elemente bleiben erhalten.

Leistungsverbrauch: v-if hat höhere Wechselkosten, v-show hat höhere anfängliche Renderingkosten.

Verwendungsszenarien: v-if eignet sich für Situationen, in denen sich die Bedingungen wahrscheinlich nicht ändern, v-show eignet sich für Situationen, in denen sich die Bedingungen häufig ändern.

05 Keep-alive

**Prinzip: **In nicht optimierten Szenarien wird die Komponente jedes Mal neu erstellt, wenn wir auf die Schaltfläche zum Wechseln der Routing-Ansicht klicken -gerendert, und die Rendering-Komponente durchläuft die Komponenteninitialisierung, das Rendern, das Patchen und andere Prozesse. Wenn die Komponente komplex oder tief verschachtelt ist, dauert das gesamte Rendering lange. Nach der Verwendung von KeepAlive werden der Vnode und das DOM der von KeepAlive verpackten Komponente nach dem ersten Rendern zwischengespeichert. Beim nächsten Rendern der Komponente werden der entsprechende Vnode und das DOM dann direkt aus dem Cache abgerufen. Es ist nicht erforderlich, eine Reihe von Prozessen wie Komponenteninitialisierung, Rendern und Patchen usw. durchzuführen, was die Ausführungszeit des Skripts verkürzt und eine bessere Leistung bietet.

Aber die Verwendung der KeepAlive-Komponente ist nicht kostenlos, da sie mehr Speicher für das Caching beansprucht. Dies ist eine typische Anwendung von Ideen zur Raum-Zeit-Optimierung. 06 Deferred-Funktionen in mehrere Male Die displayPriority-Variable wird intern verwaltet und während jedes Rendering-Frames durch requestAnimationFrame bis zur Anzahl erhöht. Dann können Sie innerhalb der Komponente, die das Defer-Mixin verwendet, v-if="defer(xxx)" verwenden, um das Rendering bestimmter Blöcke zu steuern, wenn die displayPriority auf xxx erhöht wird.

Wenn Sie Komponenten haben, deren Rendern einige Zeit in Anspruch nimmt, ist es eine gute Idee, Deferred für das progressive Rendering zu verwenden. Dadurch kann vermieden werden, dass das Rendern aufgrund einer zu langen JS-Ausführung hängen bleibt. 07 Time Slicing Dadurch bleibt die Seite hängen. **Anderes:** Bei der Ausführung zeitaufwändiger Aufgabenverarbeitung fügen wir normalerweise einen Ladeeffekt hinzu, aber durch den Vergleich vor und nach der Optimierung können wir feststellen, dass JS vor der Optimierung schon lange ausgeführt wird und die Benutzeroberfläche blockiert Daher wird die Ladeanimation nach der Optimierung nicht angezeigt, da die zeitaufwändige Aufgabe zur Übermittlung in mehrere Zeitabschnitte unterteilt wird, die einzelne JS-Laufzeit verkürzt wird und die Ladeanimation auch gerendert werden kann.

08 Nicht reaktive Daten

**Prinzip: **Bei der internen Übermittlung von Daten werden die neu übermittelten Daten standardmäßig als reaktiv definiert, wenn die Untereigenschaft des Objekt ist ein Objekt. Es wird auch Untereigenschaften rekursiv reagieren lassen. Wenn daher zu viele Daten übermittelt werden, ist der gesamte Prozess sehr zeitaufwändig. Nach der Optimierung wird das in den Daten konfigurierbare Attributflag manuell in „false“ geändert, sodass das intern über Object.keys (obj) erhaltene Objektattributarray Daten ignoriert und das Datenattribut nicht definiert wirdReaktiv, da Daten auf ein Objekt verweisen. Dadurch wird auch die rekursive Antwortlogik reduziert, was einer Verringerung des Leistungsverlusts dieses Teils entspricht. Je größer die Datenmenge, desto deutlicher wird der Effekt dieser Optimierung sein.

Der Unterschied zwischen der Einstellung konfigurierbar und der direkten Verwendung von Object.freeze besteht darin:

wird verwendet, um die Änderung und Löschung von Attributflags zu verhindern, ermöglicht jedoch die Änderung des Werts des Objekts

**Object.freeze(obj)**禁止添加/删除/更改属性。为所有现有的属性设置 configurable: false, writable: false.

// configurable: false

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  configurable: false
});

user.name = "Pete"; // 正常工作
delete user.name; // Error

// Object.freeze(obj)

let user = {
  name: "John"
};

Object.freeze(user);

user.name = "Pete";
console.log(user.name); // "John"复制代码

09 Virtuelles Scrollen

**Prinzip: **Virtuelles Scrollen wird implementiert, indem nur das DOM innerhalb des Ansichtsbereichs gerendert wird. Die Leistung ist natürlich viel besser, wenn weniger Inhalte gerendert werden. Die virtuelle Scroll-Komponente wurde ebenfalls von Guillaume Chau geschrieben. Interessierte Schüler können ihre Quellcode-Implementierung studieren. Das Grundprinzip besteht darin, Scroll-Ereignisse zu überwachen, die anzuzeigenden DOM-Elemente dynamisch zu aktualisieren und deren Verschiebung zu berechnen Sicht. Die virtuelle Bildlaufkomponente ist nicht kostenlos, da sie während des Bildlaufvorgangs in Echtzeit berechnet werden muss, sodass bestimmte Kosten für die Skriptausführung anfallen. Wenn die Datenmenge in der Liste daher nicht sehr groß ist, reicht es für uns aus, normales Scrollen zu verwenden

Dieser Artikel wurde reproduziert von: https://juejin.cn/post/7084809333740929061

(Lernvideo Teilen: Web-Frontend-Entwicklung )

Das obige ist der detaillierte Inhalt vonWie optimiert man die Leistung in Vue.js? 9 Tipps zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!