前端基础-事件循环（消息循环）

笔者注： 本文是针对从事过后端工作想转前端开发的童鞋，因为我是从后端转前端的，转过来之后就想把自己的学习路径和知识点总结一下供大家参考。 文中内容参考了渡一教育的大师课内容，想查缺不漏的或者想了解前端原理的可以看看，如果感觉有收获可以收藏点赞支持一下原创。

1. 浏览器进程

关于进程和线程的区别就不多说了，可以把进程理解成一块独立的内存空间，线程就是在进程里面干活的人，其中领班就是主线程。但是这里有个浏览器任务管理器的知识点想提一下，通过浏览器的任务管理器可以查看每个单独打开的网页和使用的 插件占用了多少内存（不是操作系统的任务管理器，是浏览器的任务管理器啊）

如何打开浏览器的任务管理器？有两种方式：

1. chrome浏览器-设置-更多工具-任务管理器
2. 360极速浏览器“打开任务管理器”快捷键是Shift+Esc

主要的进程（了解）

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

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

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

2. 渲染主线程是如何工作的？

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

• 解析 HTML
• 解析 CSS
• 计算样式
• 处理图层
• 每秒把页面画 60 次（为保持动作连续性，比如滚动条就是不断重画页面实现的）
• 执行全局 JS 代码
• 执行事件处理函数
• 执行计时器的回调函数
  …

为什么渲染进程不适用多个线程来处理这些事情？我猜是为了保持数据一致性，减小切换线程开销

要处理这么多的任务，渲染主线程遇到了一个前所未有的难题：如何调度任务？
比如这个场景：主线程正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？答案是采用消息队列排队处理，处理过程如下,参考下图所示：

1. 在最开始的时候，渲染主线程会进入一个无限循环
2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；
如果没有，则进入休眠状态。