浏览器事件环

sstraybird

已于 2022-10-16 22:50:54 修改

阅读量152

点赞数

文章标签：前端 javascript html5

于 2022-10-16 22:43:57 首次发布

本文链接：https://blog.csdn.net/sstraybird/article/details/127352441

版权

1、浏览器的进程

每一个页卡都是进程（互不影响）
浏览器也有一个主进程（用户界面）
渲染进程每个页卡里都有一个渲染进程（浏览器内核）
网络请求（处理请求）
GPU进程3d绘制
第三方插件的进程

2、渲染进程（包含着多个线程）

GUI渲染线程（渲染页面的）
js引擎线程他和页面渲染时互斥（GUI渲染线程和js引擎线程共用一个线程)
事件触发线程独立的线程 EventLoop
事件click、setTimeout、ajax也是一个独立线程

面试题：

1、微任务和GUI渲染

<html>
    <head>

    </head>
    <body>
        <script>
            document.body.style.background = 'red';
            console.log(1)
            Promise.resolve().then(()=>{
                console.log(2)
                document.body.style.background = 'yellow';
            })
            console.log(3)
            // 1 3 2 页面一直是黄色 因为渲染是发生在微任务之后
        </script>
    </body>
</html>

2、事件任务

<html>
    <head>

    </head>
    <body>
        <script>
            document.body.style.background = 'red';
            console.log(1)
            setTimeout(()=>{
                console.log(2)
                document.body.style.background = 'yellow';
            },0)
            console.log(3)
            // 1 3 2 页面不一定一直是黄色，因为浏览器会检测是否要重新渲染,浏览器有刷新频率 大约16.6ms
        </script>
    </body>
</html>

3、事件任务

<html>
    <head>

    </head>
    <body>
        <button id="button"></button>
        <script>
            button.addEventListener('click',()=>{
                console.log('listener1')
                Promise.resolve().then(()=>console.log('micro task1'))
            })
            button.addEventListener('click',()=>{
                console.log('listener2')
                Promise.resolve().then(()=>console.log('micro task2'))
            })
            button.click();
            // 点击按钮 产生了两个宏任务 listener1 micro task1 listener2 micro task2
            // 不点击按钮 相当于直接执行方法调用 每个方位里产生微任务 listener1 listener2 micro task1 micro task2
        </script>
    </body>
</html>

4、定时器任务

<html>
    <head>

    </head>
    <body>
        <button id="button"></button>
        <script>
            Promise.resolve().then(()=>{
                console.log("Promise1")
                setTimeout(()=>{
                    console.log('setTimeout2')
                },0)
            })
            setTimeout(()=>{
                console.log('setTimeout1')
                Promise.resolve().then(()=>{
                    console.log('Promise2')
                })
                // 点击按钮 Promise1 setTimeout1 Promise2 setTimeout2
            })
        </script>
    </body>
</html>

参考：

1、微任务、宏任务与Event-Loop

2、微任务（Microtask）

3、事件循环：微任务和宏任务