setTimeout(0) vs window.postMessage vs MessagePort.postMessa

setTimeout(0) vs window.postMessage vs MessagePort.postMessage

本文关键字：vs postMessage MessagePort postMessa window setTimeout      更新时间：2023-09-26

显然，使用window.postMessage是在所有现代浏览器中对异步javascript回调进行排队的首选方法window.setTimeout(fn, 0)。我找不到window.postMessage和MessagePort.postMessage（使用相同的MessageChannel异步发送和接收消息）之间的类似比较。有没有人看到或做过任何时间？MessagePort.postMessage是否适用于此目的（如果可用）？

[编辑] MessagePort.postMessage确实为此工作，但window.postMessage仍然是一种首选方式，IMO（见我的答案）。

[UPDATE] 添加了setImmediate测试和 JSFiddle。相关，Q 使用setImmediate和 ASAP 库的跨浏览器实现来解析/拒绝承诺。

我继续做了一些时间安排，使用David Baron代码的修改版本，结果如下：

setTimeoutMC - 使用MessageChannel
setTimeoutPM - 使用window.postMessage
setTimeout(0) - 使用setTimer

IE10：

2000 iterations of setTimeoutMC took 126 milliseconds.
2000 iterations of setTimeoutPM took 190 milliseconds.
2000 iterations of setTimeout(0) took 7986 milliseconds.

铬 v29.0.1547.66：

2000 iterations of setTimeoutMC took 144 milliseconds.
2000 iterations of setTimeoutPM took 81 milliseconds.
2000 iterations of setTimeout(0) took 10589 milliseconds.

显然，window.postMessage是这里的赢家（考虑到现有的跨浏览器支持水平）。较松的是window.setTimeout(fn, 0)，应尽可能避免。

法典：

<!DOCTYPE html>
<html>
<head>
    <!-- http://stackoverflow.com/q/18826570/1768303 -->
    <!-- based on http://dbaron.org/log/20100309-faster-timeouts -->
    <!-- requires IE10 or Chrome. Firefox doesn't support MessageChannel yet -->
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript">
        // setTimeoutMC via MessageChannel
        (function () {
            "use strict";
            var i = 0;
            var timeouts = {};
            var setApiName = "setTimeoutMC";
            var clearApiName = "clearTimeoutMC";
            var channel = new MessageChannel();
            function post(fn) {
                if (i === 0x100000000) // max queue size
                    i = 0;
                if (++i in timeouts)
                    throw new Error(setApiName + " queue overflow.");
                timeouts[i] = fn;
                channel.port2.postMessage(i);
                return i;
            }
            channel.port1.onmessage = function (ev) {
                var id = ev.data;
                var fn = timeouts[id];
                if (fn) {
                    delete timeouts[id];
                    fn();
                }
            }
            function clear(id) {
                delete timeouts[id];
            }
            channel.port1.start();
            channel.port2.start();
            window[setApiName] = post;
            window[clearApiName] = clear;
        })();
        // setTimeoutPM via window.postMessage
        (function () {
            "use strict";
            var i = 0;
            var timeouts = {};
            var setApiName = "setTimeoutPM";
            var clearApiName = "clearTimeoutPM";
            var messageName = setApiName + new Date().getTime();
            function post(fn) {
                if (i === 0x100000000) // max queue size
                    i = 0;
                if (++i in timeouts)
                    throw new Error(setApiName + " queue overflow.");
                timeouts[i] = fn;
                window.postMessage({ type: messageName, id: i }, "*");
                return i;
            }
            function receive(ev) {
                if (ev.source !== window)
                    return;
                var data = ev.data;
                if (data && data instanceof Object && data.type === messageName) {
                    ev.stopPropagation();
                    var id = ev.data.id;
                    var fn = timeouts[id];
                    if (fn) {
                        delete timeouts[id];
                        fn();
                    }
                }
            }
            function clear(id) {
                delete timeouts[id];
            }
            window.addEventListener("message", receive, true);
            window[setApiName] = post;
            window[clearApiName] = clear;
        })();
        // timing
        function runtest() {
            var output = document.getElementById("output");
            var outputText = document.createTextNode("");
            output.appendChild(outputText);
            function printOutput(line) {
                outputText.data += line + "'n";
            }
            var n = 2000;
            var i = 0;
            var startTime = Date.now();
            setTimeoutMC(testMC);
            function testMC() {
                if (++i === n) {
                    var endTime = Date.now();
                    printOutput(n + " iterations of setTimeoutMC took " + (endTime - startTime) + " milliseconds.");
                    i = 0;
                    startTime = Date.now();
                    setTimeoutPM(testPM, 0);
                } else {
                    setTimeoutMC(testMC);
                }
            }
            function testPM() {
                if (++i === n) {
                    var endTime = Date.now();
                    printOutput(n + " iterations of setTimeoutPM took " + (endTime - startTime) + " milliseconds.");
                    i = 0;
                    startTime = Date.now();
                    setTimeout(test, 0);
                } else {
                    setTimeoutPM(testPM);
                }
            }
            function test() {
                if (++i === n) {
                    var endTime = Date.now();
                    printOutput(n + " iterations of setTimeout(0) took " + (endTime - startTime) + " milliseconds.");
                }
                else {
                    setTimeout(test, 0);
                }
            }
        }
    </script>
</head>
<body onload="runtest()">
    <pre id="output"></pre>
</body>
</html>
相关文章：