javascript / expert
Snippet
Micro-Task Scheduling über die MessageChannel API
Dies plant eine Aufgabe so, dass sie unmittelbar nach der aktuellen Skriptausführung und vor dem nächsten Paint ausgeführt wird. Im Gegensatz zu setTimeout(0) werden MessageChannel-Tasks vom Browser mit höherer Priorität behandelt und vermeiden die minimale Verzögerung von 4ms.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const scheduleDeferredTask = (task) => {const channel = new MessageChannel();channel.port1.onmessage = () => {task();channel.port1.close();};channel.port2.postMessage(null);};// Usage in Reactconst handleHeavyOp = () => {scheduleDeferredTask(() => compute(data));};
react
Erklärung
1
const channel = new MessageChannel();
Erstellt eine bidirektionale Kommunikationsleitung für asynchrones Messaging.
2
channel.port1.onmessage = () => { task(); ... }
Definiert die Aufgabe, die ausgeführt werden soll, sobald die Nachricht empfangen wird.
3
channel.port2.postMessage(null);
Löst die Nachricht asynchron aus und gibt die Kontrolle vorübergehend an den Event-Loop zurück.