时间戳

首页 > 解决方案 > 为什么 Promise 对象会阻塞渲染？

javascript - 为什么 Promise 对象会阻塞渲染？

问题描述

我正在测试 Promise 对象并编写了一些代码来模拟长时间运行的同步任务。我在比较 Promise 和 setTimeout - 见小提琴：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h2>Promise vs setTimeout</h2>
    <div><button id="settimeout-test">setTimeout with slow running function</button></div>
    <div><button id="promise-test">Promise and slow running function</button></div>
    <div><button id="clear">Clear Results</button></div>
    <h5>Results</h5>
    <div id="result"></div>

    <script>
        const slow = function() {
            let nu = Date.now();
            while (Date.now() - nu < 1000) {}
        }
        const getSlowPromise = () => new Promise(resolve => {
                slow();
                resolve();
        });
        const resultsElement = document.getElementById('result')
        const log = (message) => {
            resultsElement.innerText += message;
        }  

        const settimeoutButton = document.getElementById('settimeout-test');
        settimeoutButton.addEventListener('click', () => {
            const now = Date.now();
            log(`\nsetTimeout test starts after ${Date.now() - now} ms`);
            setTimeout(() => {
                slow();
                log(`\nSlow function completes after ${Date.now() - now} ms`);
            }, 0);
            log(`\nEvent listener completes after ${Date.now() - now} ms`);
        });

        const promiseButton = document.getElementById('promise-test');
        promiseButton.addEventListener('click', () => {
            const now = Date.now();
            log(`\nsetTimeout test starts after ${Date.now() - now} ms`);
            getSlowPromise().then(res => log(`\nPromise completes after ${Date.now() - now} ms`));
            log(`\nevent listener completes after ${Date.now() - now} ms`);
        })

        const clear = () => resultsElement.innerText = '';
        const clearButton = document.getElementById('clear');
        clearButton.addEventListener('click', () => clear());

    </script>

  </body>

</html>

我认为 Promise 和 setTimeout 会以类似的方式运行，将代码添加到任务队列中，然后继续执行。结果的顺序是相同的，但是长时间运行任务的承诺似乎会阻止渲染，直到长时间运行的任务完成。有人可以解释一下吗？

该示例在 Chrome 中运行得最好。

更新： 我不想让长时间运行的任务并行运行，我只是想了解为什么 Promise 和 setTimeout 在我的示例中表现不同。但是，如果您确实想并行运行任务，那么 Web Worker / Worker 线程就是 Quentin 建议的方式。

但是我的问题的答案似乎是，正如 Bergi 在评论中所写的那样，Promise 构造函数是同步的。这是一个更长的解释

标签： javascriptpromisesettimeoutes6-promise

解决方案

while (Date.now() - nu < 1000) {}不模拟同步的长时间运行的任务。这是一个长期运行的同步任务。

Promise 是一种管理异步代码的方法，不是一种使代码异步的方法，也不是一种模拟多线程的方法。

为此，您需要查看workers。

推荐阅读