当前位置:首页 > 编程笔记 > 正文
已解决

事件循环面试题如何去回答?

来自网友在路上 168868提问 提问时间:2023-09-19 15:50:39阅读次数: 68

最佳答案 问答题库688位专家为你答疑解惑

谈到事件循环,我们脑子里会延伸出很多问题,比如说浏览器方面的一些问题、同步异步、线程进程等等等等,很多问题,如果我们希望回答这个问题可以让面试官眼前一亮亦或者说回答这个面试题你能把它说的面非常广,我想此时你在面试官印象会更加深刻一些。(●ˇ∀ˇ●)

该文章来源于渡一老师的腾讯课堂 可以加微信去免费领取腾讯课堂:duyi19891008

我们进入正题:

1、我们从浏览器的进程模型延伸出渲染主线程这个问题(浏览器的进程模型)

进程:

一个在内存中运行的应用程序,程序运行需要它自己专属的内存空间,可以把这块内存空间理解为进程。每个进程都有自己独立的一块内存空间,一个进程可以有多个线程,比如在Windows系统中,一个运行的xx.exe就是一个进程。

浏览器进程图:

我们可以看到每一块都是一个进程,我们的每个标签页也是一块渲染进程。 

线程:

有了进程后,就可以运⾏程序的代码了。运⾏代码的称之为线程

⼀个进程⾄少有⼀个线程,所以在进程开启后会⾃动创建⼀个线程来运⾏ 代码,该线程称之为主线程。

如果程序需要同时执⾏多块代码,主线程就会启动更多的线程来执⾏代 码,所以⼀个进程中可以包含多个线程。

浏览器有哪些进程和线程?

浏览器是⼀个多进程多线程的应⽤程序

浏览器内部⼯作极其复杂。

为了避免相互影响,为了减少连环崩溃的⼏率,当启动浏览器后,它会自动启动多个进程。

其中,最主要的进程有:

1. 浏览器进程 主要负责界⾯显示、用于交互、⼦进程管理等。浏览器进程内部会启动多个 线程处理不同的任务。

2. ⽹络进程 负责加载⽹络资源。⽹络进程内部会启动多个线程来处理不同的⽹络任务。

3. 渲染进程(本节课重点讲解的进程) 渲染进程启动后,会开启⼀个渲染主线程,主线程负责执⾏ HTML、CSS、 JS 代码。 默认情况下,浏览器会为每个标签⻚开启⼀个新的渲染进程,以保证不同的 标签⻚之间不相互影响。

2、这里谈到渲染进程延伸到渲染主线程

渲染主线程是如何⼯作的?

渲染主线程是浏览器中最繁忙的线程,需要它处理的任务包括但不限于:

解析 HTML

解析 CSS

计算样式

布局

处理图层

每秒把⻚⾯画 60 次

执⾏全局 JS 代码

执⾏事件处理函数

执⾏计时器的回调函数

延伸出一个思考题:(这里仅供了解,面试官极少可能会问,很有可能面试官听完回答不会做任何提问)

为什么渲染进程不适⽤多个线程来处理这些事情?

要处理这么多的任务,主线程遇到了⼀个前所未有的难题:如何调度任务?

 

 3、可以说一说同步与异步,谈谈异步解决什么问题?

代码在执⾏过程中,会遇到⼀些⽆法⽴即处理的任务,⽐如:

计时完成后需要执⾏的任务 -- setTimeout 、 setInterval

⽹络通信完成后需要执⾏的任务 -- XHR 、 Fetch

⽤户操作后需要执⾏的任务 -- addEventListener

如果让渲染主线程等待这些任务的时机达到,就会导致主线程⻓期处于 「阻塞」的状态,从⽽导致浏览器「卡死」

渲染主线程承担着极其重要的⼯作,⽆论如何都不能阻塞!

因此,浏览器选择异步来解决这个问题

 使⽤异步的⽅式,渲染主线程永不阻塞

面试回答:如何理解JS的异步?

JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染 主线程只有⼀个。 而渲染主线程承担着诸多的⼯作,渲染页面、执⾏ JS 都在其中运⾏。 如果使⽤同步的⽅式,就极有可能导致主线程产⽣阻塞,从⽽导致消息队列 中的很多其他任务⽆法得到执⾏。这样⼀来,⼀⽅⾯会导致繁忙的主线程白白的消耗时间,另⼀⽅⾯导致⻚⾯⽆法及时更新,给⽤户造成卡死现象。所以浏览器采⽤异步的⽅式来避免。具体做法是当某些任务发⽣时,⽐如计 时器、⽹络、事件监听,主线程将任务交给其他线程去处理,⾃身⽴即结束 任务的执⾏,转⽽执⾏后续代码。当其他线程完成时,将事先传递的回调函 数包装成任务,加⼊到消息队列的末尾排队,等待主线程调度执行。 在这种异步模式下,浏览器永不阻塞,从而最⼤限度的保证了单线程的流畅 运行。

4、任务有优先级吗?

谈到异步以后,我们会说明消息队列,消息队列用来处理我们的任务。因此队列任务的优先级可以说一说。

任务没有优先级,在消息队列中先进先出

但消息队列是有优先级的

根据 W3C 的最新解释:

每个任务都有⼀个任务类型,同⼀个类型的任务必须在⼀个队列,不同类型 的任务可以分属于不同的队列。

在⼀次事件循环中,浏览器可以根据实际情况从不同的队列中取出任务执行。

浏览器必须准备好⼀个微队列,微队列中的任务优先所有其他任务执行

随着浏览器的复杂度急剧提升,W3C 不再使⽤宏队列的说法

目前chrome的实现中,至少包含了下面的队列:

延时队列:⽤于存放计时器到达后的回调任务,优先级「中」

交互队列:⽤于存放⽤户操作后产⽣的事件处理任务优先级「⾼」

微队列:⽤户存放需要最快执⾏的任务,优先级「最⾼」

 面试题:js的事件循环简述

事件循环⼜叫做消息循环,是浏览器渲染主线程的⼯作⽅式。 在 Chrome 的源码中,它开启⼀个不会结束的 for 循环,每次循环从消息 队列中取出第⼀个任务执⾏,⽽其他线程只需要在合适的时候将任务加⼊到 队列末尾即可。 过去把消息队列简单分为宏队列和微队列,这种说法⽬前已⽆法满⾜复杂的 浏览器环境,取⽽代之的是⼀种更加灵活多变的处理⽅式。 根据 W3C 官⽅的解释,每个任务有不同的类型,同类型的任务必须在同⼀ 个队列,不同的任务可以属于不同的队列。不同任务队列有不同的优先级, 在⼀次事件循环中,由浏览器⾃⾏决定取哪⼀个队列的任务。但浏览器必须 有⼀个微队列,微队列的任务⼀定具有最⾼的优先级,必须优先调度执⾏。

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"事件循环面试题如何去回答?":http://eshow365.cn/6-9394-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!