Почему объект Promise блокирует рендеринг? - PullRequest
Новая
       23

Почему объект Promise блокирует рендеринг?

0 голосов
/ 29 октября 2018

Я тестировал объект 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 Workers / Worker - это путь, который предлагает Квентин.

Но ответ на мой вопрос, похоже, заключается в том, что конструкторы Promise синхронны, как пишет Берги в комментарии. Вот более длинное объяснение

1 Ответ

0 голосов
/ 29 октября 2018

while (Date.now() - nu < 1000) {} не имитирует синхронную длительную задачу. Это - это синхронная длительная задача.

Обещания - это способ управлять асинхронным кодом, не способ сделать код асинхронным или способ симулировать многопоточность.

Для этого вам нужно взглянуть на работников .

...