Heim > Artikel > Web-Frontend > Was ist EventLoop? So testen Sie die Leistung eines Knotens oder einer Seite

Was ist EventLoop? So testen Sie die Leistung eines Knotens oder einer Seite

青灯夜游nach vorne: 2023-03-03 19:47:492089Durchsuche

Jeder sollte den Event-Loop-Mechanismus kennen. Dieser Artikel verwendet EventLoop, um einen interessanten Code zur Erkennung der Knoten- oder Seitenleistung zu erstellen. Ich hoffe, dass er für alle hilfreich ist. Was ist EventLoop? So testen Sie die Leistung eines Knotens oder einer Seite

Was ist EventLoop? So testen Sie die Leistung eines Knotens oder einer Seite

Ereignisschleife

Jeder sollte den Mechanismus der Ereignisschleife kennen. Lassen Sie mich zunächst die Zusammenfassung wiederholen. Die Ereignisschleife von Node.js unterscheidet sich von der von Javascript. Intuitiv gibt es zwei weitere APIs: setImmediate und process.nextTick. Zweitens, weil die Laufzeit unterschiedlich ist, Html Standard berücksichtigt unterschiedliche Aufgabenwarteschlangen für unterschiedliche Quellen, z. B. mehrere Seiten und DOM-Vorgänge. Und Node.js Event Loop Es gibt nicht so viel zu beachten. setImmediate 和 process.nextTick 两个 API。其次是由于运行时不一样，Html Standrad 里面会考虑多页面、DOM操作等不同来源会有不同的 task queue 。而 Node.js Event Loop 中需要考虑的没这么多。按照我的理解，双方在概念上是一致的，可以如此概括（或者看这里）：

task queue 任务队列。一些事件等会被定义为任务，很多时候会被称为 MacroTask（宏任务）与 MicroTask 进行对应。每次会获取队头的 task 进行执行。
microtask queue 微任务队列。会有一个微任务队列，一个 Task 内一般会执行清空微任务队列。
如此往复。

性能测量

在上面的了解之后，有一个简单的对性能进行测量的方法：每秒内完成了多少次 Event Loop 循环，或者说执行了多少个 MacroTask，这样我们大致就能知道代码中同步的代码的执行情况。 测试函数

class MacroTaskChecker {
    constructor(macroTaskDispatcher, count = 1000, cb = () => { }) {
        this.macroTaskDispatcher = macroTaskDispatcher
        this.COUNT = count
        this.cb = cb
    }
    start(cb) {
        this.cb = cb || this.cb
        this.stop = false
        const scope = () => {
            let count = this.COUNT
            const startTime = performance.now()
            const fn = () => {
                count--
                if (count > 0) this.macroTaskDispatcher(fn)
                else {
                    const endTime = performance.now()
                    // 执行 COUNT 次宏任务之后 计算平均每秒执行了多少个
                    this.cb({
                        avg: this.COUNT / (endTime - startTime) * 1000,
                        timestamp: endTime
                    })
                    !this.stop && this.macroTaskDispatcher(scope)
                }
            }
            this.macroTaskDispatcher(fn)
        }
        scope()
    }

    stop() {
        this.stop = true
    }
}

之后，执行一些死循环去测试是否能检测到密集同步代码执行。

function meaninglessRun(time) {
    console.time(&#39;meaninglessRun&#39;)
    for (let i = time; i--; i > 0) {
        // do nothing
    }
    console.timeEnd(&#39;meaninglessRun&#39;)
}

setTimeout(() => {
    meaninglessRun(1000 * 1000 * 1000)
}, 1000 * 5)

setTimeout(() => {
    checker.stop()
    console.log(&#39;stop&#39;)
}, 1000 * 20)

setTimeout

const checker = new MacroTaskChecker(setTimeout, 100)

checker.start(v => console.log(`time: ${v.timestamp.toFixed(2)} avg: ${v.avg.toFixed(2)}`))

从输出中能明显看到同步阻塞的时候avg是下降的。不过在 browser 和 node.js 上测试两边会有明显差距。【相关教程推荐：nodejs视频教程】

// node.js
time: 4837.47 avg: 825.14
time: 4958.18 avg: 829.83
meaninglessRun: 918.626ms
time: 6001.69 avg: 95.95
time: 6125.72 avg: 817.18
time: 6285.07 avg: 635.16
// browser
time: 153529.90 avg: 205.21
time: 154023.40 avg: 204.46
meaninglessRun: 924.463ms
time: 155424.00 avg: 71.62
time: 155908.80 avg: 208.29
time: 156383.70 avg: 213.04

虽然达成我们的目的，但是使用 setTimeout 是不完全能准确记录下每一个任务的。根据 HTML Standrad 和 MDN 的说法，setTimeout 最少的会等待4ms。从这个角度看 browser avg * 4ms

approx

1000ms。而 node.js 应该是没有遵循 browser 那边的约定，但是也没有执行到记录每一个loop。

setImmediate

如果使用 node.js 的 setImmediate：

const checker = new MacroTaskChecker(setImmediate, 1000 * 10)

可以看到执行次数大概高出 Node.js setTimeout 一个量级：

time: 4839.71 avg: 59271.54
time: 5032.99 avg: 51778.84
meaninglessRun: 922.182ms
time: 6122.44 avg: 9179.95
time: 6338.32 avg: 46351.38
time: 6536.66 avg: 50459.77

按照 Node.js 文档中的解释，setImmediate 会在每一个 loop (phase) 的 check 阶段执行。使用 setImmediate 应该是能准确记录每一次 Loop 的。我这台机器大概是 40000 到 60000 之间的循环次数。

window.postMessage

在 browser 上由于没有 setImmediate 我们可以按照 MDN 上的指引使用 window.postMessage

Nach meinem Verständnis sind die beiden Parteien konzeptionell konsistent und können wie folgt zusammengefasst werden (oder siehe hier): 🎜

🎜Aufgabenwarteschlange Aufgabenwarteschlange. Einige Ereignisse werden als Aufgaben definiert und häufig als MacroTask (Makroaufgabe) bezeichnet, um MicroTask zu entsprechen. Jedes Mal wird die Aufgabe an der Spitze der Warteschlange zur Ausführung abgerufen. 🎜
🎜Mikrotask-Warteschlange Mikrotask-Warteschlange. Es gibt eine Mikrotask-Warteschlange, und die Mikrotask-Warteschlange wird normalerweise innerhalb einer Aufgabe gelöscht. 🎜
🎜Und so weiter. 🎜

🎜🎜Leistungsmessung🎜🎜🎜Nachdem wir das oben Gesagte verstanden haben, gibt es eine einfache Möglichkeit, die Leistung zu messen: wie viele Ereignisschleifenzyklen pro Sekunde abgeschlossen werden oder wie viele MacroTasks ausgeführt werden, damit wir kann die Ausführung des synchronisierten Codes im Code grob kennen. 🎜🎜🎜Testfunktion🎜🎜

const fns = []
window.addEventListener("message", () => {
    const currentFns = [...fns]
    fns.length = 0
    currentFns.forEach(fn => fn())
}, true);
function messageChannelMacroTaskDispatcher(fn) {
    fns.push(fn)
    window.postMessage(1)
}

🎜Führen Sie danach einige Endlosschleifen aus, um zu testen, ob eine intensive synchrone Codeausführung erkannt werden kann. 🎜

time: 78769.70 avg: 51759.83
time: 78975.60 avg: 48614.49
meaninglessRun: 921.143 ms
time: 80111.50 avg: 8805.14
time: 80327.00 avg: 46425.26
time: 80539.10 avg: 47169.81

🎜🎜setTimeout🎜🎜

const { port1, port2 } = new MessageChannel();
const fns = []
port1.onmessage = () => {
    const currentFns = [...fns]
    fns.length = 0
    currentFns.forEach(fn => fn())
};
function messageChannelMacroTaskDispatcher(fn) {
    fns.push(fn)
    port2.postMessage(1)
}

🎜Aus der Ausgabe ist deutlich ersichtlich, dass der Durchschnitt abnimmt, wenn die Synchronisierung blockiert ist. Es wird jedoch offensichtliche Unterschiede zwischen den beiden Tests für Browser und node.js geben. [Empfohlene verwandte Tutorials: nodejs-Video-Tutorial]🎜

time: 54974.80 avg: 68823.12
time: 55121.00 avg: 68493.15
meaninglessRun: 925.160888671875 ms
time: 56204.60 avg: 9229.35
time: 56353.00 avg: 67430.88
time: 56503.10 avg: 66666.67
// 一起执行 wp=window.postMessage mc=MessageChannel
wp time: 43307.90 avg: 25169.90
mc time: 43678.40 avg: 27005.13
wp time: 43678.60 avg: 26990.55
mc time: 44065.80 avg: 25833.12
wp time: 44066.00 avg: 25819.78
mc time: 44458.40 avg: 25484.20

🎜Obwohl wir unser Ziel erreicht haben goal , aber die Verwendung von setTimeout ist nicht vollständig in der Lage, jede Aufgabe genau aufzuzeichnen. Laut HTML-Standard und MDN wartet setTimeout mindestens 4 ms. Aus dieser Perspektive betrachtet Browser-Durchschnitt * 4 ms

\approx ungefähr math>

Das obige ist der detaillierte Inhalt vonWas ist EventLoop? So testen Sie die Leistung eines Knotens oder einer Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript node.js html 循环 Event JS 事件 dom

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Ausführliche Erklärung, wie Sie mit JS einen Overlay-Wasserzeicheneffekt erzielenNächster Artikel：Ausführliche Erklärung, wie Sie mit JS einen Overlay-Wasserzeicheneffekt erzielen

In Verbindung stehende Artikel

Mehr sehen

Was ist EventLoop? So testen Sie die Leistung eines Knotens oder einer Seite

Ereignisschleife

性能测量

browser

node

总结

In Verbindung stehende Artikel