通过对浏览器进程 线程的理解,了解JS的任务调度方式。
首先了解浏览器主要进程:
1.浏览器进程:
负责主界面显示(浏览器的控件),用户交互(监听用户的操作 例如:点击事件),开启多线程处理各种任务。
2.网络进程
加载网络资源(网络请求数据 AJAX等)
3.渲染页面进程
- 开启渲染主线程
- 解析HTML CSS JS代码
- 计算样式
- 布局
- 处理图层
- 执行JS代码
- 事件处理函数
- 定时器回调
- ...
这里可以理解为:每当你打开一个网站都会开启一个新的渲染页面进程,该进程解析访问网站的HTML(通过网络请求获取),渲染出页面。
事件循环:
JS是一门单线程语言。它通过队列来实现任务调度。
-
在最开始的时候,渲染主线程开启一个无限循环,依次执行队列中的任务。
-
每一次循环会检查消息队列中是否有任务存在。如果有,就取出第一个任务执行,执行完一个后进入下一次循环;如果没有,则进入休眠状态。
-
其他所有线程(包括其他进程的线程)可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时,如果主线程是休眠状态,则会将其唤醒以继续循环拿取任务。
如果是遇到需要立即处理的任务,例如:
-
计时完成后需要执行的任务
setTimeout
、setInterval
-
网络通信完成后需要执行的任务
-
用户操作后需要执行的任务
addEventListener
又是如何执行的呢?
这里浏览器会使用异步,开启其他线程来处理。
主线程将任务交给其他线程去处理,并自身立即结束任务的执行,转而执行后续代码。
其他线程处理完任务后,将回调函数加入到主线程的消息队列的队尾,等待主线程执行。
会开启例如:
- 定时器线程===处理定时器的任务
- 网络线程===处理网络请求的任务
- 事件监听===监听事件的任务
- 等......
例如:
计时器计时开始时:通知计时线程开始计时,计时结束后,将回调函数放入主线程执行队列,等待调度。
关于任务优先级:
任务没有优先级,但是队列有优先级。
- 每个任务都有任务类型,相同任务类型的任务必须在同一个队列中(也就是同一个处理线程)。
比如说:
定时器任务的类型:定时器类型
因此定时器任务都必须放在定时器队列(定时器线程)中处理。
- 浏览器必须提供一个微队列,在微队列里的任务优先级高于其他队列。
在目前 chrome 的实现中,至少包含了下面的队列:
-
延时队列:用于存放计时器到达后的回调任务,优先级「中」
-
交互队列:用于存放用户操作后产生的事件处理任务,优先级「高」
-
微队列:用户存放需要最快执行的任务,优先级「最高」
当每一个队列都有任务时,会将优先级高的任务先执行。
执行顺序是 任务1 任务C 任务B 任务A。