Heim Web-Frontend js-Tutorial Wie Sie geplante JavaScript-Aufgaben ausführen, erfahren Sie in den Tipps zu „background_javascript'.

Wie Sie geplante JavaScript-Aufgaben ausführen, erfahren Sie in den Tipps zu „background_javascript'.

May 16, 2016 pm 03:24 PM

Selbst wenn Sie alles vergessen, was Sie über JavaScript wissen, werden Sie nie vergessen: Es blockiert.

Stellen Sie sich vor, dass in Ihrem Browser ein magischer Elf lebt, der für den normalen Betrieb des Browsers verantwortlich ist. Ob es darum geht, HTML zu rendern, auf Menübefehle zu reagieren, den Bildschirm zu rendern, Mausklicks zu verarbeiten oder JavaScript-Funktionen auszuführen, alles wird von einem einzigen Elf erledigt. Es ist so beschäftigt, dass es jeweils nur eine Sache bewältigen kann. Wenn Sie ihm eine Reihe von Aufgaben gleichzeitig geben, erstellt er eine lange To-Do-Liste und erledigt diese der Reihe nach.

Menschen möchten oft, dass das JavaScript, das Komponenten und Event-Handler initialisiert, so schnell wie möglich ausgeführt wird. Einige weniger wichtige Hintergrundaufgaben wirken sich jedoch nicht direkt auf die Benutzererfahrung aus, wie zum Beispiel:

Statistiken aufzeichnen

Senden Sie Daten an ein soziales Netzwerk (oder fügen Sie die Schaltfläche „Teilen“ hinzu)

Vorinstallierte Inhalte

HTML vorverarbeiten oder vorrendern

Sie sind zeitlich nicht streng, aber damit die Seite reaktionsfähig bleibt, werden sie erst ausgeführt, wenn der Benutzer auf der Seite scrollt oder mit dem Inhalt interagiert.

Eine Option sind Web Worker, die Code gleichzeitig in unabhängigen Threads ausführen können. Ideal zum Vorladen und Vorverarbeiten, aber Sie haben keinen direkten Zugriff auf das DOM oder können es nicht aktualisieren. Sie können dies in Ihrem eigenen Code umgehen, es gibt jedoch keine Garantie dafür, dass Skripte von Drittanbietern wie Google Analytics dies niemals benötigen.

Eine weitere Option ist setTimeout, beispielsweise setTimeout(doSomething, 1);. Sobald andere unmittelbare Aufgaben ausgeführt wurden, führt der Browser die Funktion doSomething() aus. Tatsächlich wurde es ans Ende der To-Do-Liste verschoben. Leider wird die Funktion unabhängig vom Verarbeitungsbedarf aufgerufen.

#requestIdleCallback

requestIdleCallback ist eine neue API, mit der weniger wichtige geplante Hintergrundaufgaben ausgeführt werden, wenn der Browser eine Pause einlegt. Es erinnert unweigerlich an requestAnimationFrame, das die Funktion ausführt, die Animation vor dem nächsten Neuzeichnen zu aktualisieren. Wenn Sie mehr wissen möchten, klicken Sie hier: Verwenden Sie requestAnimationFrame, um einfache Animationen zu erstellen.

RequestIdleCallback-Funktionsüberwachung:

if ('requestIdleCallback' in window) {
 // requestIdleCallback supported
 requestIdleCallback(backgroundTask);
}
else {
 // no support - do something else
 setTimeout(backgroundTask1, 1);
 setTimeout(backgroundTask2, 1);
 setTimeout(backgroundTask3, 1);
}
Nach dem Login kopieren

Sie können auch Konfigurationsparameterobjekte angeben, z. B. Timeout,

requestIdleCallback(backgroundTask, { timeout: 3000; }); 
Nach dem Login kopieren

Stellen Sie sicher, dass die Funktion innerhalb von 3 Sekunden aufgerufen wird, unabhängig davon, ob der Browser inaktiv ist.

Wenn das Deadline-Objekt die folgenden Parameter übergibt, führt requestIdleCallback den Rückruf nur einmal aus:

didTimeout – Wird auf „true“ gesetzt, wenn ein optionales Timeout ausgelöst wird
timeRemaining() – Funktion gibt die Anzahl der Millisekunden zurück, die zur Ausführung der Aufgabe verbleiben
timeRemaining() reserviert bis zu 50 ms für die Aufgabenausführung. Wenn dieser Grenzwert überschritten wird, wird die Aufgabe nicht gestoppt. Es ist jedoch am besten, requestIdleCallback erneut aufzurufen, um die weitere Verarbeitung zu veranlassen.

Lassen Sie uns ein einfaches Beispiel erstellen, um mehrere Aufgaben nacheinander auszuführen. Die Funktionsreferenz der Aufgabe wird im Array gespeichert:

//待执行的函数数组
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);
 }
}
Nach dem Login kopieren

#Was sollte zwischen requestIdleCallback nicht getan werden?

Paul Lewis erwähnte in seinem Artikel, dass die von einem requestIdleCallback ausgeführten Aufgaben in kleine Stücke geschnitten werden sollten. Es ist nicht für unvorhersehbare Zeitsituationen geeignet (z. B. für den Betrieb von DOM, es ist besser, den Rückruf von requestAnimationFrame zu verwenden). Seien Sie auch vorsichtig, wenn Sie Versprechen auflösen (oder ablehnen). Die Rückruffunktion wird sofort nach Abschluss des inaktiven Rückrufs ausgeführt, auch wenn keine Zeit mehr übrig ist.

#requestIdleCallback Browser-Unterstützung

requestIdleCallback ist eine experimentelle Funktion, die Spezifikation ist immer noch instabil und es ist nicht überraschend, dass API-Änderungen auftreten. Chrome 47 wird unterstützt...sollte vor Ende 2015 verfügbar sein. Opera sollte diesem Beispiel folgen. Sowohl Microsoft als auch Mozilla überlegen, ob APIs Promises unterstützen sollten. Apple ist wie üblich pessimistisch.

Paul Lewis (oben erwähnt) hat einen einfachen requestIdleCallback-Shim geschrieben, der das Leerlaufüberwachungsverhalten des Browsers simulieren kann, aber kein Polyfill ist (der Unterschied zwischen Shim und Polyfill).

requestIdleCallback-Shim-Code lautet wie folgt:

/*!
 * Copyright Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version . (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */
/*
 * @see https://developers.google.com/web/updates///using-requestidlecallback
 */
window.requestIdleCallback = window.requestIdleCallback ||
 function (cb) {
  var start = Date.now();
  return setTimeout(function () {
   cb({
    didTimeout: false,
    timeRemaining: function () {
     return Math.max(, - (Date.now() - start));
    }
   });
  }, );
 }
window.cancelIdleCallback = window.cancelIdleCallback ||
 function (id) {
  clearTimeout(id);
 }
Nach dem Login kopieren

ps: So führen Sie eine geplante Aufgabe aus

1. Führen Sie GPEDIT.MSC aus

2. Computerkonfiguration auswählen

--- Windows-Einstellungen
                                                          Sicherheitseinstellungen
​​​​—Lokale Strategie
​​​​​—-Zuweisung von Benutzerrechten
Doppelklicken Sie rechts auf „Auf diesen Computer über das Netzwerk zugreifen“
Fügen Sie die erforderlichen Benutzernamen zur Liste hinzu.

3. --- Sicherheitseinstellungen

---Sichere Wahl
Aktivieren Sie „Serverbetreibern erlauben, Aufgaben zu planen“

4.-----Lokale Strategie

--- Als Batch-Job anmelden
Fügen Sie die erforderlichen Benutzernamen zur Liste hinzu.

5.-----Lokale Strategie

--- Erlauben Sie Computern und Benutzern, für die Delegierung vertrauenswürdig zu sein
Fügen Sie die erforderlichen Benutzernamen zur Liste hinzu.
Am besten ist es, der Administrator-Benutzer zu sein.

Wenn der Aufgabenplan nicht gestartet werden kann, Eingabeaufforderungscode: 0X80041315

Lösung: Es gibt zwei Möglichkeiten: Der Dienst „Task Scheduler“ im System ist nicht gestartet. Sie können während des Betriebs „services.msc“ eingeben, um zu überprüfen, ob der Dienst „Task Scheduler“ auf „Bereits“ eingestellt ist „Deaktivieren“, wenn ja, doppelklicken Sie einfach darauf, um den Starttyp auf „Automatisch“ zu ändern und eine geplante Aufgabe zurückzusetzen, um sie auszuführen.

Wenn Ihr aktuelles Konto auf automatische Anmeldung eingestellt ist und das Anmeldekennwort leer ist, kann dies auch dazu führen, dass der Aufgabenplan nicht rechtzeitig ausgeführt wird. In der XP Professional Edition müssen Sie „gpedit.msc“ ausführen Bearbeiten Sie die Gruppenrichtlinie: Erweitern Sie „Computer“-Konfiguration→Windows-Einstellungen→Sicherheitseinstellungen→Lokale Computerrichtlinie→Sicherheitsoptionen“, doppelklicken Sie rechts auf das Element „Konten: Lokale Konten mit leeren Passwörtern erlauben nur Konsolenanmeldung“ und wählen Sie „ „Deaktiviert“ im Popup-Dialogfeld.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Apr 04, 2025 pm 02:42 PM

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Wer bekommt mehr Python oder JavaScript bezahlt? Wer bekommt mehr Python oder JavaScript bezahlt? Apr 04, 2025 am 12:09 AM

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Apr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt? Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt? Apr 04, 2025 pm 05:09 PM

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe? Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe? Apr 04, 2025 pm 05:12 PM

Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...

Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen?
oder:
Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird? Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen? oder: Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird? Apr 04, 2025 pm 05:36 PM

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

Ist JavaScript schwer zu lernen? Ist JavaScript schwer zu lernen? Apr 03, 2025 am 12:20 AM

JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.

So implementieren Sie die Funktion des Ziell- und Drop-Einstellungsfunktion, ähnlich wie bei VSCODE in der Front-End-Entwicklung? So implementieren Sie die Funktion des Ziell- und Drop-Einstellungsfunktion, ähnlich wie bei VSCODE in der Front-End-Entwicklung? Apr 04, 2025 pm 02:06 PM

Erforschen Sie die Implementierung der Funktion des Bedien- und Drop-Einstellungsfunktion der Panel ähnlich wie VSCODE im Front-End. In der Front-End-Entwicklung wird VSCODE ähnlich wie VSCODE implementiert ...

See all articles