So vermeiden Sie DOM -Blockieren durch LocalStorage und andere Schuldige

Schlüsselpunkte

• Synchronisieren von JavaScript-Vorgängen wie Computer-, DOM-Updates, Speichern und Abrufen von Daten mithilfe von LocalStorage- oder IndexedDB-Blocks DOM-Updates und beeinflussen die Leistung der Front-End-Leistung.
• Webarbeiter können verwendet werden, um langlebige Prozesse zu bewältigen. Sie ermöglichen es der Haupt -Browser -Anwendung, Hintergrundskripte zu starten und mithilfe von Nachrichtenereignissen zu kommunizieren, haben jedoch keinen direkten Zugriff auf DOM oder LocalStorage.
• hardwarebeschleunigte CSS-Animationen werden in ihren eigenen Ebenen ausgeführt, was die Glätte der Animation verbessert und von den meisten modernen Browsern nicht blockiert wird.
• Speicherspeicher bietet schnellere Datenaktualisierungen als Speicherspeichermechanismen. Es wird empfohlen, Speicherobjekte zu verwenden, um die Leistung zu verbessern und Daten dauerhaft zu speichern, wenn sie bequem sind.

JavaScript -Programme in laufenden Umgebungen wie Browsern und Node.js werden auf einem einzelnen Thread ausgeführt. Wenn der Code auf der Registerkarte Browser ausgeführt wird, stoppen alle anderen Operationen: Menübefehle, Downloads, Renderings, DOM -Updates und sogar GIF -Animationen.

Benutzer bemerken dies selten, da die Verarbeitung in kleinen Blöcken schnell verläuft. Beispiel: Klicken Sie auf eine Schaltfläche, werfen Sie ein Ereignis, führen Sie eine Funktion aus, führen Sie Berechnungen aus und aktualisieren Sie das DOM. Nach Abschluss kann der Browser das nächste Element in der Warteschlange frei verarbeiten.

JavaScript -Code kann es kaum erwarten, dass etwas passiert, wenn die Bewerbung jedes Mal einfriert, wenn sie eine AJAX -Anfrage stellt. Daher verwendet JavaScript Code Ereignisse und Rückrufe zum Betrieb: Weisen Sie einen Browser- oder Betriebssystemebeneprozess an, eine bestimmte Funktion nach Abschluss des Vorgangs aufzurufen und das Ergebnis bereit ist.

Im folgenden Beispiel wird bei einem Schaltflächenklickereignis eine Handler -Funktion ausgeführt, die die CSS -Klasse animiert. Wenn die Animation abgeschlossen ist, löscht der anonyme Rückruf die Klasse:

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

ES2015 bietet vielversprechend, ES2017 führt Async/Assait ein, um die Codierung zu vereinfachen, verwendet jedoch noch Callbacks unter der Oberfläche. Weitere Informationen finden Sie unter "Prozesskontrolle in modernen JS".

verhindern Faktor

Leider werden einige JavaScript -Operationen immer synchronisiert, einschließlich:

• Führen Sie die Berechnung
aus
• DOM
aktualisieren
• Speicher und abrufen Daten mithilfe von LocalStorage oder IndexedDB ab.

Das folgende Beispiel zeigt einen Eindringling, der CSS -Animation für Bewegung und JavaScript verwendet, um das Glied zu winken. Das Bild auf der rechten Seite ist das grundlegende animierte GIF. Klicken

[CodePen Sample Link - CodePen -Einbettungscode sollte hier eingefügt werden]

Während dieses Vorgangs werden DOM -Updates blockiert. In den meisten Browsern stoppen die Eindringlinge oder bleiben stecken. Bestimmte Animationen animierter GIFs werden angehalten. Langsamere Geräte können eine Warnung "Skript nicht reagieren" anzeigen.

Dies ist ein komplexes Beispiel, zeigt jedoch, wie sich grundlegende Vorgänge auf die Front-End-Leistung auswirken.

Webarbeiter

Eine Lösung für langjährige Prozesse sind Webarbeiter. Dadurch können die Hauptbrowser -Anwendung Hintergrundskripte starten und mithilfe von Nachrichtenereignissen kommunizieren. Zum Beispiel:

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

Web Worker Skript:

// main.js
// 是否支持 Web Workers？
if (!window.Worker) return;

// 启动 Web Worker 脚本
let myWorker = new Worker('myworker.js');

// 从 myWorker 接收消息
myWorker.onmessage = e => {
  console.log('myworker sent:', e.data);
}

// 向 myWorker 发送消息
myWorker.postMessage('hello');

Ein Arbeiter kann sogar andere Arbeiter generieren, um komplexe Thread -Operationen zu simulieren. Die Funktionalität des Arbeiters ist jedoch absichtlich begrenzt, und der Arbeiter kann nicht direkt auf das DOM- oder LocalStorage zugreifen (dies wird tatsächlich Multi-Thread-JavaScript und die Stabilität des Browsers stören). Daher werden alle Nachrichten als Zeichenfolgen gesendet, die das Übergeben von JSON-kodierten Objekten ermöglichen, aber nicht zulassen, dass Dom-Knoten übergeben werden können.

Mitarbeiter können auf bestimmte Fenstereigenschaften, Websockets und IndexDB zugreifen, verbessern jedoch nicht die oben gezeigten Beispiele. In den meisten Fällen werden Arbeiter für langlebige Berechnungen verwendet-z. B. Ray-Tracing, Bildverarbeitung, Bitcoin-Bergbau und mehr.

(node.js bietet untergeordnete Prozesse, die den Webarbeitern ähnlich sind, aber die Möglichkeit haben, ausführbare Ausführungen in anderen Sprachen auszuführen.)

Hardware -Beschleunigungsanimation

Die meisten modernen Browser blockieren keine CSS-Animationen mit Hardwarebeschleunigungen, die in ihren eigenen Ebenen ausgeführt werden.

standardmäßig bewegt das obige Beispiel den Eindringling durch Ändern des linken Randes. Diese Eigenschaft und ähnliche Eigenschaften wie links und Breite veranlassen den Browser, das gesamte Dokument in jedem Animationsschritt neu zu stream und neu zu zeichnen.

Tiereffizienz ist effizienter, wenn es um Transformations- und/oder Opazitätseigenschaften verfügt. Diese setzen Elemente tatsächlich in separate Kompositionsschichten ein, damit die GPU sie einzeln animieren kann.

Klicken Sie auf das Kontrollkästchen "Hardware Beschleunigung" und die Animation wird sofort reibungsloser. Versuchen Sie nun einen SessionStorage -Schreiben. Beachten Sie, dass die Bewegungen von Gliedmaßen noch immer angehalten werden, da dies von JavaScript gesteuert wird.

Speicherspeicher

Die Aktualisierung von Objekten im Speicher ist viel schneller als der Speichermechanismus, der auf die Festplatte geschrieben wurde. Wählen Sie im obigen Beispiel den Objektspeichertyp aus und klicken Sie auf Schreiben. Das Ergebnis wird unterschiedlich sein, sollte jedoch etwa 10 -mal schneller sein als der äquivalente SessionStorage -Betrieb.

Speicher ist volatil: Schließen der Registerkarte oder Verlassen der Navigation führt dazu, dass alle Daten verloren gehen. Ein guter Kompromiss besteht darin, Speicherobjekte zu verwenden, um die Leistung zu verbessern und dann Daten dauerhaft zu speichern, wenn sie bequem sind - beispielsweise wenn die Seite deinstallation:

// myworker.js
// 接收消息时启动
onmessage = e => {
  console.log('myworker received:', e.data);
  // ...长时间运行的进程...
  // 发送回消息
  postMessage('result');
};

Spiel oder einseitige Anwendung erfordern möglicherweise komplexere Optionen. Zum Beispiel der Zeitpunkt, an dem Daten gespeichert sind:

Keine Benutzeraktivität (Maus-, Touch- oder Tastaturereignis) für einen bestimmten Zeitraum
Spielpause oder Anwendungs ​​-Tag im Hintergrund (siehe Sichtbarkeits -API)
Es gibt natürliche Pausen - z.

Webleistung

Webleistung ist ein heißes Thema. Entwickler sind durch Browserbeschränkungen weniger restriktiv, und Benutzer erwarten eine schnelle, operatives systemähnliche Anwendungsleistung.

Machen Sie so wenig Verarbeitung wie möglich. Der DOM wird niemals merklich blockiert. Glücklicherweise gibt es einige Optionen, wenn langjährige Aufgaben nicht vermieden werden können.

Benutzer und Kunden werden Ihre Geschwindigkeitsoptimierung möglicherweise nie bemerken, beschweren sich jedoch immer, wenn die Anwendung langsamer wird!

FAQs über Dom Blocking (FAQ)

Was blockiert DOM und warum ist es ein Problem?

DOM Blocking bedeutet, dass der Browser die Webseite nicht rendern kann, da er darauf wartet, dass das Skript das Laden abschließt. Dies verringert die Ladegeschwindigkeit der Webseite erheblich, was zu einer schlechten Benutzererfahrung führt. Der Browser muss den DOM -Baum bauen, indem er das HTML -Tag analysiert. Während dieses Vorgangs muss es gestoppt und ausgeführt werden, um fortzufahren, wenn ein Skript angetroffen wird. Dies liegt daran, dass das Skript die DOM -Baumstruktur ändern kann und der Browser sicherstellen muss, dass es die neueste Ansicht hat.

Wie kann ich DOM -Blockierung vermeiden?

Es gibt verschiedene Möglichkeiten, DOM -Blockierungen zu vermeiden. Eine der effektivsten Möglichkeiten ist die Verwendung von asynchronen Ladeskripten. Dies bedeutet, dass das Skript im Hintergrund geladen wird, während der Rest der Seite weiter geladen wird. Ein weiterer Ansatz besteht darin, Skripte zu verschieben, was bedeutet, dass sie erst nach dem vollständigen Analyse des HTML -Dokuments ausgeführt werden. Schließlich können Sie die Skripte auch auf den Boden des HTML -Dokuments verschieben, damit sie der letzte geladene Inhalt sind.

Was ist der Unterschied zwischen synchronen Skripten und asynchronen Skripten?

synchrone Skripte blockieren DOM -Konstrukte, bis sie vollständig geladen und ausgeführt werden. Dies bedeutet, dass, wenn das Skript für lange Zeit lädt, die gesamte Webseite verzögert. Andererseits blockieren asynchrone Skripte die DOM -Konstruktion nicht. Sie laden im Hintergrund und können ausgeführt werden, sobald sie bereit sind, auch wenn das DOM nicht vollständig gebaut ist.

Was ist das "Defer" -attribut im Skript -Tag?

Die Eigenschaft "Verschiebung" im Skript -Tag wird verwendet, um anzuzeigen, dass das Skript ausgeführt werden sollte, nachdem das HTML -Dokument vollständig analysiert wurde. Dies bedeutet, dass das Skript das DOM -Konstrukt nicht blockiert und somit die Ladezeit des Webseiten beschleunigt. Dies bedeutet jedoch auch, dass das Skript möglicherweise nicht bereit ist, wenn das DOM konstruiert wird, sodass es nur mit Skripten verwendet werden kann, die die DOM -Struktur nicht ändern.

Wie ist es hilfreich, das Skript nach unten im HTML -Dokument zu verschieben?

Verschieben von Skripten am Ende des HTML -Dokuments stellt sicher, dass sie der letzte geladene Inhalt sind. Dies bedeutet, dass der Rest der Webseite gerendert werden kann, ohne darauf zu warten, dass das Skript das Laden abschließt. Diese Methode kann jedoch nur mit Skripten verwendet werden, die die DOM -Struktur nicht ändern, da sie möglicherweise nicht bereit sind, wenn das DOM konstruiert ist.

Was ist das Attribut "Async" im Skript -Tag?

Das Attribut "Async" im Skript -Tag wird verwendet, um anzuzeigen, dass das Skript asynchron geladen werden sollte. Dies bedeutet, dass das Skript im Hintergrund geladen wird, während der Rest der Webseite weiter geladen wird. Das Skript kann sofort ausgeführt werden, wenn das DOM nicht vollständig erstellt ist. Dies kann die Ladezeit des Webseiten erheblich verbessern, kann jedoch nur für Skripte verwendet werden, die die DOM -Struktur nicht ändern.

Wie wirkt sich die DOM -Blockierung auf die SEO aus?

DOM -Blockierung kann die Ladegeschwindigkeit der Webseite erheblich verringern, was sich negativ auf das SEO -Ranking auswirkt. Suchmaschinen wie die Google -Webseite laden die Geschwindigkeit als einer der Ranglistenfaktoren. Das Vermeiden von DOM -Blockieren ist daher sehr wichtig, um sicherzustellen, dass Ihre Seite in Suchmaschinenergebnissen hoch ist.

Was ist ein virtueller Dom und wie hilft es?

Virtual Dom ist ein Konzept, das in modernen JavaScript -Frameworks wie React verwendet wird. Es handelt sich um eine Kopie des tatsächlichen DOM, und die Änderungen werden zuerst im virtuellen DOM vorgenommen, nicht im tatsächlichen DOM. Sobald alle Änderungen abgeschlossen sind, wird das virtuelle DOM durch einen Prozess, der als Koordination bezeichnet wird, mit dem tatsächlichen DOM synchronisiert. Dies reduziert die Anzahl der direkten Vorgänge auf dem tatsächlichen DOM und beschleunigt die Webseite die Ladezeit.

Wie kann ich überprüfen, ob meine Webseite DOM -Blockierungsprobleme hat?

Sie können Tools wie die PageSpeed ​​-Erkenntnisse von Google verwenden, um zu überprüfen, ob Ihre Webseiten DOM -Blockierungsprobleme haben. Dieses Tool analysiert Ihre Webseiten und enthält detaillierte Berichte über ihre Leistung, einschließlich potenzieller Probleme wie DOM -Blockierung.

verursacht CSS auch DOM -Blockierung?

Ja, CSS kann auch das DOM -Blockieren verursachen. Wenn der Browser auf eine CSS -Datei trifft, muss er anhalten und laden, um die Webseite weiter zu rendern. Dies liegt daran, dass die CSS -Datei möglicherweise Stile enthalten kann, die das Erscheinungsbild der Webseite ändern. Um dies zu vermeiden, können Sie Methoden wie Inline Critical CSS und das nicht kritische CSS verschieben.

Das obige ist der detaillierte Inhalt vonSo vermeiden Sie DOM -Blockieren durch LocalStorage und andere Schuldige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!