Apakah EventLoop? Bagaimana untuk menguji prestasi Node atau page

Semua orang harus tahu mekanisme Gelung Acara. Artikel ini menggunakan EventLoop untuk mencipta kod yang menarik untuk mengesan prestasi nod atau halaman Dengan cara ini, saya memperkenalkan EventLoop saya harap ia akan membantu semua orang.

Gelung Acara

Semua orang harus mengetahui mekanisme Gelung Acara. Biar saya ulangi ringkasannya dahulu.

Gelung Peristiwa Node.js berbeza daripada Javascript Secara intuitif, terdapat dua lagi API, setImmediate dan process.nextTick. Kedua, disebabkan oleh masa jalan yang berbeza, Html Standrad akan mempertimbangkan baris gilir tugas yang berbeza untuk sumber yang berbeza seperti berbilang halaman dan operasi DOM. Tidak begitu banyak perkara yang perlu dipertimbangkan dalam Gelung Acara Node.js.

Menurut pemahaman saya, kedua-dua pihak adalah konsisten dari segi konsep dan boleh diringkaskan seperti berikut (atau lihat di sini):

• tugas baris gilir tugas beratur . Sesetengah acara ditakrifkan sebagai tugas, dan sering dipanggil MacroTask (tugas makro) untuk sepadan dengan MicroTask. Setiap kali, tugas di kepala barisan akan diperolehi untuk dilaksanakan.

• gilir microtask baris gilir microtask. Akan ada baris gilir microtask, dan baris gilir microtask biasanya akan dikosongkan dalam Task.

• Dan seterusnya.

Pengukuran Prestasi

Setelah memahami perkara di atas, terdapat cara mudah untuk mengukur prestasi: berapa kali sesaat selesai gelung Gelung Acara , atau berapa banyak MacroTasks dilaksanakan, supaya kita boleh mengetahui secara kasar pelaksanaan kod yang disegerakkan dalam kod tersebut.

Selepas menguji fungsi

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
    }
}

, laksanakan beberapa gelung tak terhingga untuk menguji sama ada pelaksanaan kod segerak intensif boleh dikesan.

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

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

setTimeout(() => {
    checker.stop()
    console.log('stop')
}, 1000 * 20)

<span style="font-size: 18px;">setTimeout</span>setTimeout

const checker = new MacroTaskChecker(setTimeout, 100)

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

Anda boleh melihat dengan jelas daripada purata output apabila penyegerakan disekat semakin berkurangan. Walau bagaimanapun, akan terdapat perbezaan yang jelas antara kedua-dua ujian pada penyemak imbas dan node.js. [Cadangan tutorial berkaitan: tutorial video 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

Walaupun tujuan kami tercapai, menggunakan setTimeout tidak dapat merekod setiap tugasan dengan tepat. Menurut HTML Standrad dan MDN, setTimeout akan menunggu sekurang-kurangnya 4ms. Dilihat dari sudut ini pelayar purata * 4ms $\approx$ 1000ms. Node.js mungkin tidak mengikut konvensyen pelayar, tetapi ia juga tidak merekodkan setiap gelung.

<span style="font-size: 18px;">setImmediate</span>setImmediate

setImmediateJika menggunakan node.js

:

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

setTimeout Anda boleh melihat bahawa bilangan pelaksanaan adalah kira-kira satu susunan magnitud lebih tinggi daripada Node.js

:

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

Menurut penjelasan dalam dokumen Node.jssetImmediate , setImmediate akan dilaksanakan setiap kali Fasa semakan gelung (fasa) dilaksanakan. Menggunakan

seharusnya dapat merekod setiap gelung dengan tepat. Bilangan kitaran pada mesin saya adalah antara 40,000 dan 60,000.

<span style="font-size: 18px;">window.postMessage</span>window.postMessage

setImmediatewindow.postMessageMemandangkan tiada

pada penyemak imbas, kami boleh menggunakannya mengikut kepada garis panduan tentang MDN Laksanakan satu.

如果想在浏览器中实现 0ms 延时的定时器，你可以参考这里所说的 window.postMessage()

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)
}

可以看到和 node.js setImmediate 量级是一致的。

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

<span style="font-size: 18px;">MessageChannel</span>

browser

理论上 browser 使用 MessageChannel 应该也是可以的，还避免了无效的消息被其他 window.addEventListener("message", handler) 接收：

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)
}

不是很懂为啥会比 window.postMessage 频繁一点，同时启动两个 checker 的话可以看到 log 是成对出现的，也就是说一个loop内大家都只执行了一次。我猜测是 window.postMessage 的实现方式消耗会大一些。

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

node

在 node.js 上也有 MessageChannel ，是否也可以用来测量loop次数呢？

mc time: 460.99 avg: 353930.80
mc time: 489.52 avg: 355088.11
mc time: 520.30 avg: 326384.64
mc time: 551.78 avg: 320427.29

量级很不正常。理论上不应该超过 setImmediate 的。如果同时启动 setImmediate 和 setTimeout 的 checker:

...
(messagechannel) time: 1231.10 avg: 355569.31
(messagechannel) time: 1260.14 avg: 345825.77
(setImmediate) time: 1269.95 avg: 339.27
(setTimeout) time: 1270.09 avg: 339.13
(messagechannel) time: 1293.80 avg: 298141.74
(messagechannel) time: 1322.50 avg: 349939.04
...

很明显跟不是宏任务了。我猜测 MessageChannel 在 node.js 被归入到跟 socket 等同级别了，就是超出阈值之后的任务会移动到下一个loop中。

总结

使用这种方式去检测性能还挺有趣的，正式使用的话这个指标感觉过于不稳定（即使什么都没做都会有20%-30%的振动）。推荐和其他正经的办法（比如 performance 等）结合。

同时这种方式非常有可能影响正常的 Event Loop，比如 Node.js 中会有一个 pull 的阶段，在执行完全部微任务后，没有任何 timer 的话是会停留在这个阶段，准备马上执行下一个出现的微任务。

顺便复习了下 Event Loop。没想到的是 MessageChannel 在两边的差距居然有这么大。

更多node相关知识，请访问：nodejs 教程！

Atas ialah kandungan terperinci Apakah EventLoop? Bagaimana untuk menguji prestasi Node atau page. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!