进程到底是什么?
话不多说,开门见山,程序运行需要有它自己的专属的内存空间,可以把这块内存空间简单的理解为进程。每个应用至少都是需要一个进程,进程之间相互独立,即使要通信也是需要双方同意。比如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
总结,先执行渲染主线程中的全局事件,然后执行微队列,延时队列,交互队列。
单线程是异步产生的原因,事件循环是异步的实现方式