事件循环深度学习

事件循环

学习事件循环 首先就要了解一下浏览器的进程模型

浏览器的进程模型

何为进程?

• 如果要运行一个程序 就要属于他自己的内存空间 可以把这块内存空间简单理解为进程
• 什么对象,函数啥啥啥的 都是放在内存里面的 所以就需要开辟一块内存空间让这个程序自己去使用
• 总结 : 进程 == 开辟出的这块内存空间

每一个应用 至少也要有一个进程 进程之间相互独立 即使要通讯 也需要双方同意才行
比如qq进程崩溃了 肯定是不会影响到微信的 所以每一个进程是完全独立的

何为线程?

• 有了进程后 就可以运行程序的代码了
• 运行代码的人称之为线程

一个进程至少有一个线程 所以在进程开启后会自动创建一个线程来运行代码 该线程称之为主线程

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

浏览器有哪些进程和线程

浏览器是一个多进程多线程的应用程序

• 浏览器内部工作极其复杂
• 为了避免相互影响 为了减少连环崩溃的几率 当浏览器启动后 它会开启多个进程

可以在浏览器的任务管理器中查看当前的所有进程

其中最主要的进程有

• 浏览器进程 : 主要负责页面的显示 用户交互 子进程管理等 浏览器进程内部会启动多个线程处理不同的任务
• 网络进程 : 负责加载网络资源 网络进程内部会启动多个线程来处理不同的网络任务
• 渲染进程(重点) : 渲染进程启动后 会开启一个渲染主线程 , 主线程负责执行HTML,CSS,JS代码

默认情况下浏览器会为为每个标签页开启一个新的渲染进程 以保证不同的标签页之间不相互影响

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

ps: 事件循环就在主线程中执行

• 渲染主线程是浏览器中最繁忙的线程 需要他处理的任务非常多
• 解析html,css,js,计算样式,布局,处理图层,每秒把页面画60次.....

要处理这么多的任务 主线程如何去调度指挥任务呢?

比如:

• 我正在执行一个js函数,执行到一半的时候用户点击了按钮, 我该立即去执行点击事件的处理函数吗?
• 我正在执行一个js函数,执行到一半额时候某个计时器到达了时间,我改立即去实现它的回调函数吗?
• 浏览器进程通知我用户点击了按钮 ,与此同时,某个计时器也到达了时间,我应该处理哪一个呢?

渲染主线程指挥调度核心的方法 排队

以下的整个过程,被称之为事件循环 也可以说消息循环

• 在最开始的时候 渲染主线程会进入一个无限的循环
• 每一次循环会检查事件队列中是否有任务存在,如果有,就取出第一个任务执行,执行完后进入下一次循环,如果没有就休息
• 其他所有线程 (包括其他进行的线程比如网络线程,监听用户交互的线程等等..) ,可以随时向事件队列里添加任务,新任务会加到事件队列的末尾,在添加新任务的时候,如果主线程是休眠状态,则会唤醒以继续循环拿去任务

事件循环的细节

异步是什么?

在代码执行过程中, 会遇到一些无法立即处理的任务

• 计时完成后需要执行的任务—setTimeOut,setInterval
• 网络通信后需要执行的任务—XHR,Fetch
• 用户操作后需要执行的任务—addEventListener

执行这些任务 都是需要未知的时间的 ,不能立即去执行

如果让渲染主线程等待这类型任务的时机达到,就会导致主线程长期处于阻塞的状态 从而导致浏览器卡死!!!

  setTimeOut(()=>{
   

    console.log(1);

  },300)
  
  console.log(2);
  // 如果先等待3秒后打印1  然后再打印2  这就是同步
  // 显然 这样是不可行的 因为一个定时器所有的任务都被阻塞了 
  // 那渲染主线程怎么执行绘制页面任务?怎么执行事件交互任务?  直接废了!