js的事件循环的理解

文章详细解释了进程和线程的概念,指出浏览器是一个多进程多线程的应用,每个标签页有独立的渲染进程。渲染主线程通过事件循环处理任务,包括JavaScript代码执行。异步处理是为了防止主线程阻塞,采用任务队列策略,如微队列、延时队列和交互队列,确保任务按顺序执行。文章还通过例子解析了事件循环的执行顺序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

进程到底是什么?

话不多说,开门见山,程序运行需要有它自己的专属的内存空间,可以把这块内存空间简单的理解为进程。每个应用至少都是需要一个进程,进程之间相互独立,即使要通信也是需要双方同意。比如QQ,微信,都是有自己的内存空间,互不干扰的,即使QQ崩溃了也不影响微信。

线程又是什么?

有了进程就可以运行程序的代码了,然而由谁来运行呢,运行代码的这个"人"就被称为线程,所以一个进程至少都是有一个线程来运行代码的,然而这个随着进程自动创建的线程就被称为主线程。如果某个程序需要同时执行多块代码,那么主线程就会启动更多的线程来执行代码,所以一个线程可以包含多个线程,同时如果一个程序的主线程执行完毕那么整个程序就执行完毕了。

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

浏览器本身就是一个多进程多线程的应用程序,避免某一块崩溃导致整个浏览器崩溃
这里我们主要关注一下渲染进程,渲染进程启动后,会开启一个渲染主线程(事件循环发生的地方),主线程负责执行HTML,CSS,JS代码,默认情况下,浏览器会为每一个标签页开启一个新的渲染进程,以保证不同的标签之间不相互影响。

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

渲染主线程是浏览器中最繁忙的进程,需要处理js,html,css代码,处理的事情多了,那么主线程就遇到了一个前所未有的难题:如何调度任务?
渲染主线程提出了一个解决办法:排队。

  • 在最开始的时候,渲染主线程会进入一个无限循环;
  • 每一次循环会检查消息队列中是否有任务存在,如果有,就去取出第一个任务执行,执行完一个后进入下一次循环;如果没有,则进入休眠状态;
  • 其他所有的线程(包括其他进程的线程)可以随时向消息队列添加任务,新任务会加到消息队列的末尾。在添加新任务时,如果主线程是休眠状态,则会将其唤醒以继续循环拿取任务;
    整个过程被称为事件循环也被称为消息循环

什么是异步?

代码执行时,会遇到的一些无法立即处理的任务,比如:setTimeout,setInterval,XHR,Fetch,addEventListener等,如果让渲染主线程等待这些任务的时机达成,机会导致主线程长期处于阻塞的状态,从而导致浏览器卡死,所以渲染主线程需要去异步去处理这些问题
学了这几个概念可以引入一个面试题:如何理解js的异步?
参考答案:JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个。而渲染主线程承担着诸多的工作,渲染页面,执行js都是在其中运行。如果使用同步的方式,就极有可能导致主线程产生阻塞,从而导致信息列表中的很多任务无法得到执行,这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。
所以浏览器采用异步的方式来避免,具体做法是当某个任务发生变法时,比如计时器,网络,事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他线程完成时,将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等主线程调度执行,在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了单线程的流畅执行。

任务有优先级吗?

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

  • 每个任务都有一个任务类型,同一个类型的任务必须在一个队列,不同类型的任务可以分属不同的队列。在一次事件循环中,浏览器可以根据实际情况从不同的队列中取出任务执行

  • 浏览器必须准备好一个微队列,微队列中任务优先所有其他任务执行
    目前 chrome的实现中,至少包含了下面的队列:

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

  • 交互队列:用于存放用户操作后产生的事件处理任务,优先级高

  • 微队列:用户存放需要最快执行的任务,优先级最高
    引入一个事件循环的面试题

function a(){
				console.log(1)
				Promise.resolve().then(function(){
					console.log(2)
				})
			}
			setTimeout(function(){
				console.log(3)
				Promise.resolve().then(a)
			},0)
			Promise.resolve().then(function(){
				console.log(4)
			})
			console.log(5)
			//输出结果54312

分析:

不管遇到多复杂的事件循环的题,先画图。备注,为了方便区分,输出几就称为f几,
第一步
渲染主线程: f5
微队列: f4
延时队列:f3
交互队列
第一步结束输出,先输出全局的f5 输出为5 在将微队列f4放到渲染主线程执行
第二步
渲染主线程: f4
微队列:
延时队列:f3
交互队列
第二步结束输出:输出4
第三步
渲染主线程: f3
微队列:
延时队列:
交互队列
第二步结束输出:将f3放在主线程执行,然后将f3里面的分解,console.log(3)首先放到渲染主线程执行,输出3.然后promise.resove从微队列放到渲染主线程中执行
第四步
渲染主线程: f1
微队列: f2
延时队列:
交互队列
第四步结束输出:先执行主线程输出1,在将微队列放到主线程执行,输出2,结束整个事件循环。输出54312
总结,先执行渲染主线程中的全局事件,然后执行微队列,延时队列,交互队列。
单线程是异步产生的原因,事件循环是异步的实现方式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值