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 {
  // 不支持 - 執(zhí)行其他操作
  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,

erneut anzurufen, um eine weitere Verarbeitung zu planen. Lassen Sie uns ein einfaches Beispiel erstellen, das mehrere Aufgaben in der Reihenfolge ausführt. Aufgaben werden in einem Array als Funktionsreferenzen gespeichert:

// 要運(yùn)行的函數(shù)數(shù)組
var task = [
  background1,
  background2,
  background3
];

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 盡快運(yùn)行所有任務(wù)
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}

// requestIdleCallback 回調(diào)函數(shù)
function backgroundTask(deadline) {
  // 如果可能，運(yùn)行下一個(gè)任務(wù)
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }

  // 如果需要，安排進(jìn)一步的任務(wù)
  if (task.length > 0) {
    requestIdleCallback(backgroundTask);
  }
}

requestIdleCallback Aktionen, die in

nicht ausgeführt werden sollten?

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

durchgeführt wird). Sie sollten auch darauf achten, das Versprechen zu l?sen (oder abzulehnen), da der Rückruf unmittelbar nach Abschluss des Leerlauf -Rückrufs ausgeführt wird, auch wenn keine Zeit mehr mehr ist.

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.

Wie unterscheidet sich die API

Hintergrundaufgabe von setTimeout und setInterval?

Die Funktionen

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 {
  // 不支持 - 執(zhí)行其他操作
  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 });

Was nutzen die Zeitüberschreitungsoption in

requestIdleCallback?

Die Zeitüberschreitungsoption in

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:

// 要運(yùn)行的函數(shù)數(shù)組
var task = [
  background1,
  background2,
  background3
];

if ('requestIdleCallback' in window) {
  // requestIdleCallback 受支持
  requestIdleCallback(backgroundTask);
} else {
  // 不支持 - 盡快運(yùn)行所有任務(wù)
  while (task.length) {
    setTimeout(task.shift(), 1);
  }
}

// requestIdleCallback 回調(diào)函數(shù)
function backgroundTask(deadline) {
  // 如果可能，運(yùn)行下一個(gè)任務(wù)
  while (deadline.timeRemaining() > 0 && task.length > 0) {
    task.shift()();
  }

  // 如果需要，安排進(jìn)一步的任務(wù)
  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(() => {
  // 您的后臺(tái)任務(wù)在此處
});

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!