js-从浏览器的进程线程到事件循环机制

浏览器的进程与线程

进程是正在运行的程序,它包括代码,操作系统分配的资源,例如内存。 进程是操作系统分配资源的最小单位。 线程是cpu调度的最小单位。我可能一个进程内包含多个线程。线程共享同一进程的资源。拿QQ来举例子,我们的接收消息,就是一个单独的线程,为了防止主界面的阻塞。而对于下载这种需要独立管理资源,即使出错,也不会干扰我们的主程序。使用单独的进程。

我们的浏览器是多进程的。他有以下四种进程

  • 主进程

    进行协调子进程的创建销毁,用户的收藏,前进返回。处理不可见的请求,例如文件访问,网络请求。

  • 渲染进程

    负责js的执行以及页面的渲染,事件处理。每个tab页代表一个进程。防止不同tab页崩溃影响其他的tab页

  • GPU进程

    负责3D绘制等。

  • 插件进程

    负责管理我们浏览器的插件,例如 vue develtools,react devtools。防止插件崩溃影响页面。

渲染进程中包括五个线程

js引擎线程 负责我们js脚本的执行。他是单线程结构 。 http线程 负责处理ajax请求。当请求完成触发回调,通知事件触发线程。 定时器线程 负责定时,到时间同时事件触发线程。 事件触发线程 负责控制事件,例如鼠标点击等。 GUI线程 负责进行页面的渲染工作。

事件循环机制

js是单线程的,我们不能让耗时性任务阻塞我们的主线程。我们将耗时性任务放入队列中,等待我们的主线程 完成之后再执行异步任务。可能异步任务又会产生新的异步任务,我们又将其放入任务队列中。如此维护事件执行顺序的机制叫做事件循环机制。

任务队列中的任务分为宏任务和微任务。

宏任务有 1.定时器 2.IO 3.事件 4.requestAnimationFrame 5.script 6.setImmidate(在IO操作的回调中比定时器快)

微任务有 promise.then函数中的回调 queenmicroTask()中的回调 //底层实现使用promise.resolve方法 process.nextTick(); // 达到递归深度会有一个警告机制。 mutationObserver();//H5新特性

注意:

浏览器中的事件循环是这样执行的

  1. 我们首先会去执行js脚本,它可以看成第一个宏任务。
  2. 接着我们会去将微任务队列清空 3.这时候假如时间到达了该渲染了时间(通常浏览器渲染为60帧),就执行一次渲染。 4.渲染完成后,执行宏任务,继续下一轮任务。

如此设计也是为了防止在我们渲染的同时修改元素的属性,造成页面数据的不一致性。也就是我们常常说的js渲染和主线程互斥。当然,有些情况也会进行页面的立即渲染,例如。

  • element.style.width=10px; const width = window.getElement.width 修改样式并立即获取
  • offestTop 触发重新渲染
  • scrolly 获取滚动位置

node环境下的区别主要是他没有渲染这一步骤,以及多了一个process.nextTick能进行微队列插队的方法。

相关推荐
程序员大阳9 小时前
副队长JavaScript教程(50)-DOM:网页开发的起点
javascript·dom·es·节点·概念·document·关系
香芋芋圆13 小时前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器
晗夜未央15 小时前
任务队列反复失败,先分清重试、阻塞和结果待核对
开发语言·javascript
jktantan16 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
我命由我1234517 小时前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
程序员大阳17 小时前
副队长JavaScript教程(65)-详解JSON:轻量级数据交换格式
javascript·json·序列化·反序列化·stringify·parse
paopaokaka_luck19 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩19 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
SEO_juper19 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js19 小时前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发