【JavaScript】 JS 的单线程和浏览器的多进程架构

概述

此外,JS 最初是为了解决⽹⻚交互的问题⽽诞⽣的,⽽⽹⻚交互的需求⼤部分是基于⽤户事件的,⽐如点击按钮、输⼊⽂本等。这些操作的响应速度要求很⾼,如果在响应事件的同时还要处理其他任务,可能会导致⽹⻚卡顿、响应变慢等⽤户体验不佳的问题。

为了利⽤多核 CPU 的计算能⼒,HTML5 提出 Web Worker 标准,允许 JS 脚本创建多个线程,但是⼦线程完全受主线程控制,且不得操作 DOM。所以,这个新标准并没有改变 JS 单线程的本质。

浏览器的多进程架构

"JS 是单线程的" 指的是执⾏ JS 的线程只有⼀个,是浏览器提供的 JS 引擎线程(主线程)。

如今的主流浏览器都是多进程架构的,以 Chrome 为例,它包含了 1 个浏览器主进程、1个 GPU 进程、1 个⽹络进程、多个渲染进程或多个插件进程。默认情况下,Chrome 会为每个 Tab 标签创建⼀个渲染进程。⼀个渲染进程通常由以下线程组成:

  • JS 引擎线程(主线程):
    JavaScript 引擎,也称为 JS 内核,负责处理 JS 脚本,执⾏代码。当主线程空闲且任务队列不为空时,会依次取出任务执⾏。注意,该线程与 GUI 渲染线程互斥,当 JS 引擎线程执⾏ JS 时间过⻓,将导致⻚⾯渲染的阻塞。
  • GUI 渲染线程:
    主要负责⻚⾯的渲染,解析 HTML、CSS,构建DOM树,布局和绘制等。当界⾯需要重绘或者由于某种操作引发重排时,将执⾏该线程。注意:该线程与 JS 引擎线程互斥,当执⾏ JS 引擎线程时,GUI 线程会被挂起,当任务队列空闲时,主线程才会去执⾏ GUI 渲染。
  • 事件触发线程:
    ⽤于控制事件循环,将准备好的事件交给 JS 引擎线程执⾏。当主线程遇到异步任务,如 setTimeOut(或 ajax 请求、⿏标点击事件),会将它们交由对应的线程处理,处理完毕后,事件触发线程会把对应的事件添加到任务队列的尾部,等待 JS 引擎的处理。注意:由于 JS 的单线程关系,队列中的待处理事件都得排队等待,只有在 JS 引擎空闲时才能被执⾏。
  • 定时器触发线程:
    负责执⾏定时器⼀类函数的线程,如 setTimeout,setInterval 等。主线程依次执⾏代码时,遇到定时器,会将定时器交由该线程进⾏计时,当计时结束,事件触发线程会将定时器的回调函数添加到任务队列的尾部,等待 JS 引擎空闲后执⾏。
  • 异步 http 请求线程:
    负责执⾏异步请求⼀类的函数的线程,如 Promise,axios,ajax 等。主线程依次执⾏代码时,遇到异步请求,会将函数交给该线程处理。当监听到状态码变更,如果设置有回调函数,事件触发线程会将相应的回调函数添加到任务队列的尾部,等待 JS 引擎空闲后执⾏。
相关推荐
小白路过1 小时前
记录vue-cli-service serve启动本地服务卡住问题
前端·javascript·vue.js
xuchaoxin13751 小时前
bash@特殊字符@环境变量符号@特殊参数@参数扩展和替换@字符串处理用法总结
开发语言·bash
devmoon1 小时前
快速了解兼容 Ethereum 的 JSON-RPC 接口
开发语言·网络·rpc·json·区块链·智能合约·polkadot
代码游侠1 小时前
学习笔记——Linux字符设备驱动
linux·运维·arm开发·嵌入式硬件·学习·架构
aini_lovee1 小时前
基于MATLAB的材料晶粒组织生长与变化模拟:方法、实现与应用
开发语言·算法·matlab
1104.北光c°1 小时前
【黑马点评项目笔记 | 优惠券秒杀篇】构建高并发秒杀系统
java·开发语言·数据库·redis·笔记·spring·nosql
梦梦代码精1 小时前
Gitee 年度人工智能竞赛开源项目评选揭晓!!!
开发语言·数据库·人工智能·架构·gitee·前端框架·开源
2501_907136821 小时前
PDF增效工具 Quite imposing plus6
java·开发语言
常利兵1 小时前
Android Gradle 构建脚本现代化:Kotlin DSL (.kts) 与 Groovy DSL 深度对比与实战指南
android·开发语言·kotlin
梵得儿SHI1 小时前
Vue 高级特性:渲染函数与 JSX 精讲(h 函数语法、JSX 在 Vue 中的应用)
前端·javascript·vue.js·jsx·模板语法·渲染函数·底层视图生成机制