javascript / expert
Snippet
Macro-Task-Scheduling über MessageChannel
MessageChannel ist eine leistungsstarke Alternative zu setTimeout(0) für das Scheduling von Macro-Tasks. Im Gegensatz zu setTimeout, das bei verschachtelten Aufrufen oft eine Verzögerung von mindestens 4ms (Clamping) aufweist, nutzt MessageChannel das interne Messaging-System des Browsers, um Aufgaben auszuführen, sobald der aktuelle Ausführungsstack und die Micro-Task-Queue leer sind.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
function scheduleMacroTask(task) {const channel = new MessageChannel();channel.port1.onmessage = () => {channel.port1.close();task();};channel.port2.postMessage(null);}// Usage: Deferring non-critical executionscheduleMacroTask(() => {console.log('Processed in the next macro-task, bypassing 4ms clamping');});
nextjs
Erklärung
1
const channel = new MessageChannel();
Erstellt einen neuen Nachrichtenkanal mit zwei verbundenen Ports für die Kommunikation.
2
channel.port1.onmessage = () => { ... };
Richtet einen Handler ein, der die Aufgabe ausführt, sobald eine Nachricht auf Port 1 empfangen wird.
3
channel.port2.postMessage(null);
Sendet eine Nachricht an Port 2, was den Übergang von der Micro-Task- zur Macro-Task-Ebene auslöst.