宏任务、微任务、同步代码哪个会阻塞浏览器渲染 #21

zuopf769 · 2023-04-18T03:58:35Z

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input/>
    <br>
    <button onclick="sync()">同步</button>
    <button onclick="async()">微任务</button>
    <button onclick="micro()">宏任务</button>
    <script>
    
        function sync() {
            console.log('sync同步代码在执行');
            while(true) {

            }
        }

        function macro() {
            console.log('微任务在执行');
            Promise.then(async())
        }

        function micro() {
            console.log('宏任务在执行')
            setTimeout(micro, 0);
        }

    </script>
    
</body>
</html>

zuopf769 · 2023-04-18T04:00:23Z

什么叫阻塞浏览器渲染？

点了相应任务的按钮后，input框不能继续输入字符了

zuopf769 · 2023-04-18T04:03:35Z

为什么同步代码会阻塞浏览器渲染？

主线程 => 微任务 => 宏任务 (包括UI渲染；UI渲染也是宏任务，他和setTimeout是同等级别的宏任务)

同步代码会阻塞主线程，主线程被阻塞了，那后面的宏任务就不会被执行，因此页面渲染也被阻塞了

zuopf769 · 2023-04-18T08:43:00Z

为什么微任务会阻塞页面渲染？

微任务会阻塞宏任务；UI渲染也是宏任务，因此微任务会阻塞页面渲染

zuopf769 · 2023-04-18T09:54:36Z

为什么宏任务不会阻塞页面渲染？

宏任务和UI渲染都是宏任务；在宏任务执行完事后有空闲时间就会触发UI渲染；上面的案例中setTimeout(fn, 0)；大概是0~5毫秒后执行，但是fn中的代码不耗时，浏览器的一帧大约是1000/60=16.666666666666668ms，定时器执行完后，一帧内还有时间就会触发页面UI渲染

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

宏任务、微任务、同步代码哪个会阻塞浏览器渲染 #21

宏任务、微任务、同步代码哪个会阻塞浏览器渲染 #21

zuopf769 commented Apr 18, 2023 •

edited

Loading

zuopf769 commented Apr 18, 2023 •

edited

Loading

zuopf769 commented Apr 18, 2023

zuopf769 commented Apr 18, 2023

zuopf769 commented Apr 18, 2023

宏任务、微任务、同步代码哪个会阻塞浏览器渲染 #21

宏任务、微任务、同步代码哪个会阻塞浏览器渲染 #21

Comments

zuopf769 commented Apr 18, 2023 • edited Loading

zuopf769 commented Apr 18, 2023 • edited Loading

zuopf769 commented Apr 18, 2023

zuopf769 commented Apr 18, 2023

zuopf769 commented Apr 18, 2023

zuopf769 commented Apr 18, 2023 •

edited

Loading

zuopf769 commented Apr 18, 2023 •

edited

Loading