So planen Sie Hintergrundaufgaben in JavaScript

Kernpunkte

• JavaScript ist eine blockierende Sprache, die jeweils nur eine Aufgabe ausführen kann, die dazu führen kann, dass langlebige Skripte den Browser nicht mehr reagieren. Es können jedoch weniger wichtige Hintergrundaufgaben ausgeführt werden, ohne die Benutzererfahrung direkt zu beeinflussen.
• requestIdleCallback ist eine API, die die Planung unnötiger Aufgaben ermöglicht, wenn der Browser im Leerlauf ist, ähnlich wie die Funktionalität von requestAnimationFrame. Es kann mit der Zeitüberschreitungsoption verwendet werden, um sicherzustellen, dass die Aufgaben innerhalb eines festgelegten Zeitbereichs ausgeführt werden, auch wenn der Browser nicht im Leerlauf ist.
• requestIdleCallback ist ein experimentelles Merkmal mit begrenzter Browserunterstützung und ist nicht für Aufgaben geeignet, die unvorhersehbare Zeit ausführen oder Versprechensaufgaben beheben. Für nicht unterstützte Browser oder Aufgaben, die einen direkten Zugriff auf die DOM erfordern, können Alternativen wie Webarbeiter oder setTimeout verwendet werden.

Wenn Sie alles andere in JavaScript vergessen, denken Sie immer daran: Es blockiert . Stellen Sie sich vor, ein magischer Verarbeitungsistent, der Ihren Browser funktioniert. Egal, ob es sich um HTML handelt, auf Menübefehle reagiert, auf dem Bildschirm zeichnet, Mausklicks bearbeitet oder JavaScript -Funktionen ausgeführt wird, all dies wird von einem einzigen Sprite behandelt. Wie die meisten von uns können Elfen nur eine Sache nach dem anderen tun. Wenn wir viele Aufgaben auf die Elfen werfen, werden sie einer großen Aufgabenliste hinzugefügt und in der Reihenfolge verarbeitet. Alles andere stoppt, wenn die Sprite auf ein Skript -Tag trifft oder eine JavaScript -Funktion ausführen muss. Der Code (falls erforderlich) wird heruntergeladen und unmittelbar vor weiteren Ereignissen oder Rendern ausgeführt. Dies ist notwendig, da Ihr Skript alles kann: mehr Code laden, jedes DOM -Element löschen, auf eine andere URL umleiten usw. Selbst bei zwei oder mehr Sprites müssen andere Sprites aufhören zu arbeiten, wenn der erste Sprite Ihren Code verarbeitet. Das blockiert. Aus diesem Grund veranlassen langlebige Skripte, dass der Browser nicht mehr reagiert. Normalerweise möchten Sie, dass JavaScript so schnell wie möglich ausgeführt wird, da der Code Widgets und Ereignishandler initialisiert. Es gibt jedoch einige weniger wichtige Backend -Aufgaben, die sich nicht direkt auf die Benutzererfahrung auswirken, wie z. B.

• Datenaufzeichnungsdaten
• Daten an soziale Netzwerke senden (oder 57 "Share" -Buttons)
• Inhalt
vorab
• Vorverarbeitung oder Vorrendern von HTML

Dies sind keine zeitkritischen Aufgaben, sondern um die Seite reaktionsschnell zu halten, sollten sie nicht ausgeführt werden, wenn der Benutzer mit dem Inhalt scrollt oder interagiert. Eine Option besteht darin, Webarbeiter zu verwenden, die Code gleichzeitig in einem separaten Thread ausführen können. Dies ist eine gute Wahl für das Vorabbau und die Verarbeitung, aber Sie ermöglichen keinen direkten Zugriff oder Aktualisierung des DOM. Sie können dies in Ihren eigenen Skripten vermeiden, können jedoch nicht garantieren, dass Drittanbieter wie Google Analytics sie niemals benötigen. Eine andere Möglichkeit ist setTimeout, zum Beispiel setTimeout(doSomething, 1);. Der Browser führt die Funktion doSomething() aus, nachdem andere sofort ausgeführte Aufgaben erledigt sind. Tatsächlich befindet es sich am unteren Rand der To-Do-Liste. Leider wird die Funktion unabhängig von den Verarbeitungsanforderungen bezeichnet.

requestIdleCallback

requestIdleCallback ist eine neue API, die nicht wesentliche Backend-Aufgaben in diesen Momenten der Atmung des Browsers planen soll. Es erinnert Sie an requestAnimationFrame, die eine Funktion zur Aktualisierung der Animation vor dem nächsten Repaint aufruft. Sie können mehr über requestAnimationFrame hier lesen: Einfache Animation mit RequestAnimationFrame

Wir können überprüfen, ob es so unterstützt requestIdleCallback:

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 执行其他操作
  setTimeout(backgroundTask1, 1);
  setTimeout(backgroundTask2, 1);
  setTimeout(backgroundTask3, 1);
}

Sie können auch Option Objektparameter mit Timeout (in Millisekunden) angeben, zum Beispiel:

requestIdleCallback(backgroundTask, { timeout: 3000 });

Dies stellt sicher, dass Ihre Funktion innerhalb der ersten drei Sekunden aufgerufen wird, unabhängig davon, ob der Browser im Leerlauf ist oder nicht. requestIdleCallback rufen Sie Ihre Funktion nur einmal auf und geben Sie ein Deadline -Objekt mit den folgenden Eigenschaften über:

• didTimeout - auf true
festgelegt, wenn der optionale Zeitüberschreitungsauslöser auf true
• gesetzt ist timeRemaining()
- Funktion, die die verbleibenden Millisekunden der ausführbaren Aufgabe zurückgibt

timeRemaining() requestIdleCallback Ihre Aufgabe wird nicht mehr als 50 Millisekunden der Laufzeit zugewiesen. Es stoppt keine Aufgaben, die diese Grenze überschreiten, aber es ist besser,

// 要运行的函数数组
var task = [
  background1,
  background2,
  background3
];

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 尽快运行所有任务
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}

// requestIdleCallback 回调函数
function backgroundTask(deadline) {
  // 如果可能，运行下一个任务
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }

  // 如果需要，安排进一步的任务
  if (task.length > 0) {
    requestIdleCallback(backgroundTask);
  }
}

requestIdleCallback Aktionen, die in

requestIdleCallback Wie Paul Lewis in seinem Blog -Beitrag zu diesem Thema betont, sollte die Arbeit, die Sie in requestAnimationFrame ausführen, in kleine Stücke unterteilt werden. Es funktioniert für nichts mit unvorhersehbarer Ausführungszeit (z. B. das Betrieb des DOM, was am besten mit dem Rückruf

requestIdleCallback Browserunterstützung

requestIdleCallback ist ein experimentelles Merkmal, und die Spezifikationen ändern sich noch. Seien Sie also nicht überrascht, wenn Sie auf API -Änderungen stoßen. Es wird in Chrome 47 unterstützt. Dies sollte bis Ende 2015 verfügbar sein. Opera sollte diese Funktion auch bald erhalten. Sowohl Microsoft als auch Mozilla erwägen, die API zu verwenden, und es klingt vielversprechend. Apple hat keine Neuigkeiten wie gewohnt. Wenn Sie es heute ausprobieren möchten, können Sie Chrome Canary am besten verwenden (eine aktualisierte Version von Chrome, die nicht so gut ist wie erstere, aber die neuesten coolen Funktionen hat). Paul Lewis (oben erwähnt) schafft einen einfachen requestIdleCallback Shim. Dies implementiert die Beschreibung der API, aber es handelt sich nicht um ein Polyfill, das das Browser -Leerlauf -Erkennungsverhalten simulieren kann. Es verwendet die Methode zur Verwendung von setTimeout wie das obige Beispiel, aber es ist eine gute Option, wenn Sie die API ohne Objekterkennung und Code -Gaber verwenden möchten. Obwohl es heute nur begrenzte Unterstützung gibt, kann requestIdleCallback ein interessantes Tool sein, mit dem Sie Ihre Webleistung maximieren können. Aber was denkst du? Ich würde gerne Ihre Gedanken im Kommentarbereich unten hören.

FAQ zur Planung von Backend -Aufgaben in JavaScript (FAQ)

Was ist die Hintergrundaufgabe -API in JavaScript?

Hintergrundaufgaben in JavaScript Die API ist ein leistungsstarkes Tool, mit dem Entwickler Aufgaben planen können, die im Hintergrund ausgeführt werden, auch wenn der Hauptfaden im Leerlauf ist. Diese API eignet sich besonders für Aufgaben, bei denen viele Berechnung oder Netzwerkanforderungen erforderlich sind, da diese Aufgaben ausgeführt werden können, ohne den Hauptfaden zu blockieren und möglicherweise zu einer schlechten Benutzererfahrung zu führen. Die Backend-Task-API ist Teil der größeren Web-API, die von modernen Browsern bereitgestellt wird und eine effizientere und leistungsorientiertere Möglichkeit bietet, Backend-Aufgaben zu erledigen als die herkömmlichen setTimeout oder setInterval Methoden.

Hintergrundaufgabe von setTimeout und setInterval?

setTimeout und setInterval sind traditionelle Methoden in JavaScript, mit denen Aufgaben nach einer bestimmten Verzögerung oder in regelmäßigen Abständen ausgeführt werden sollen. Diese Ansätze haben jedoch einige Einschränkungen, insbesondere in Bezug auf die Leistung. Sie laufen auf dem Hauptfaden, was bedeutet, dass sie andere Aufgaben blockieren und zu einer schlechten Benutzererfahrung führen können, wenn sie zu lange dauern. Auf der anderen Seite wird die API von Hintergrundaufgaben im Hintergrund ausgeführt, die vom Hauptfaden getrennt sind. Dies bedeutet, dass es intensivere Aufgaben erledigen kann, ohne die Leistung des Hauptfadens zu beeinflussen.

Kann ich die API der Hintergrundaufgabe in allen Browsern verwenden?

Die Backend -Task -API ist eine relativ neue Ergänzung der von modernen Browsern bereitgestellten Web -API, daher wird sie möglicherweise nicht in allen Browsern unterstützt. Wenn Sie planen, eine API in Ihrem Projekt zu verwenden, überprüfen Sie immer am besten die aktuelle Support -Ebene der API, die Sie verwenden möchten. Websites wie Can I verwenden ich die neuesten Informationen zu den Support -Ebenen verschiedener APIs in verschiedenen Browsern.

Wie verwendet ich die Hintergrund -Task -API, um Aufgaben zu planen, die im Hintergrund ausgeführt werden?

Um die API der Hintergrundaufgabe zu verwenden, um Aufgaben zu planen, können Sie die Methode requestIdleCallback verwenden. Diese Methode nimmt die Rückruffunktion als erster Parameter, der ausgeführt wird, wenn der Browser im Leerlauf ist. Hier ist ein grundlegendes Beispiel:

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 执行其他操作
  setTimeout(backgroundTask1, 1);
  setTimeout(backgroundTask2, 1);
  setTimeout(backgroundTask3, 1);
}

Wie storniere ich geplante Hintergrundaufgaben?

Wenn Sie Hintergrundaufgaben, die mit der Methode requestIdleCallback geplant sind, abbrechen müssen, können Sie die Methode cancelIdleCallback verwenden. Diese Methode nimmt die ID an, die von requestIdleCallback als Parameter zurückgegeben wird. Hier ist ein Beispiel:

requestIdleCallback(backgroundTask, { timeout: 3000 });

requestIdleCallback?

requestIdleCallback gibt die maximale Zeit (in Millisekunden) an. Der Browser sollte warten, bevor der Rückruf ausgeführt wird, auch wenn er nicht im Leerlauf ist. Dies ist nützlich, wenn Ihre Hintergrundaufgaben innerhalb eines bestimmten Zeitrahmens ausgeführt werden müssen.

Wie kann man mit Fehlern in Hintergrundaufgaben umgehen?

Umgangsfehler in Hintergrundaufgaben, die mit der API von Hintergrundaufgaben geplant sind, ähneln den Handhabungsfehlern in einem anderen JavaScript -Code. Sie können den Try/Catch -Block verwenden, um alle Fehler zu fangen, die während der Aufgabenausführung auftreten. Hier ist ein Beispiel:

// 要运行的函数数组
var task = [
  background1,
  background2,
  background3
];

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 尽快运行所有任务
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}

// requestIdleCallback 回调函数
function backgroundTask(deadline) {
  // 如果可能，运行下一个任务
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }

  // 如果需要，安排进一步的任务
  if (task.length > 0) {
    requestIdleCallback(backgroundTask);
  }
}

Kann ich die Hintergrundaufgabe -API in node.js verwenden?

Die Backend -Task -API ist Teil der Web -API, die von modernen Browsern bereitgestellt wird, sodass sie standardmäßig nicht in Node.js verfügbar ist. Es gibt jedoch andere Möglichkeiten, Hintergrundaufgaben in Node.js auszuführen, z.

Kann ich die Hintergrundaufgabe -API mit Versprechen oder asynchronisiert/warten?

Die API der Hintergrundaufgabe gibt kein Versprechen zurück, sodass sie nicht direkt mit Async/Auseait verwendet werden kann. Wenn Sie es jedoch in einem asynchronen Kontext verwenden müssen, können Sie die requestIdleCallback -Methode in ein Versprechen einwickeln. Hier ist ein Beispiel:

window.requestIdleCallback(() => {
  // 您的后台任务在此处
});

Was sind einige Anwendungsfälle der Backend -Task -API?

Hintergrundaufgaben API ist nützlich für jede Aufgabe, die viele Berechnungs- oder Netzwerkanforderungen erfordert, da diese Aufgaben ausgeführt werden können, ohne den Haupt -Thread zu blockieren. Einige Beispiele für Anwendungsfälle können abrufen und verarbeiten, die Daten aus der API ausführen, komplexe Berechnungen durchführen oder die Benutzeroberfläche basierend auf Benutzerinteraktionen aktualisieren.

Das obige ist der detaillierte Inhalt vonSo planen Sie Hintergrundaufgaben in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!