为什么 JavaScript 是单线程的呢?

这主要与 JavaScript 用途有关。它的主要用途是与用户互动，以及操作 DOM。如果 JavaScript 是多线程的，会带来很多复杂的问题，假如 JavaScript 有 A 和 B 两个线程，A 线程在 DOM 节点上添加了内容，B 线程删除了这个节点，应该是哪个为准呢? 所以，为了避免复杂性，所以设计成了单线程。

虽然 HTML5 提出了 Web Worker 标准。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。**但是子线程完全受主线程控制，且不得操作 DOM。**所以这个并没有改变 JavaScript 单线程的本质。一般使用 Web Worker 的场景是代码中有很多计算密集型或高延迟的任务，可以考虑分配给 Worker 线程。

浏览器的内核是多进程的

1. browser 进程（主进程）

负责浏览器的页面展示，与用户交互。如前进，后退 页面的前进，后退 负责页面的管理，创建和销毁其他进程

1. GPU 进程

3D 渲染

1. 插件进程

每种类型的插件对应一个进程，仅当使用该插件时才能创建

1. 浏览器渲染进程（浏览器内核）

①GUI 渲染线程

负责渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等。 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行 注意，GUI 渲染线程与 JS 引擎线程是互斥的，当 JS 引擎执行时 GUI 线程会被挂起（相当于被冻结了），GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行。 JS 引擎线程

② 也称为 JS 内核，负责处理 Javascript 脚本程序。（例如 V8 引擎） JS 引擎线程负责解析 Javascript 脚本，运行代码。 JS 引擎一直等待着任务队列中任务的到来，然后加以处理，一个 Tab 页（renderer 进程）中无论什么时候都只有一个 JS 线程在运行 JS 程序 同样注意，GUI 渲染线程与 JS 引擎线程是互斥的，所以如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。 事件触发线程

③ 归属于浏览器而不是 JS 引擎，用来控制事件循环（可以理解，JS 引擎自己都忙不过来，需要浏览器另开线程协助） 当 JS 引擎执行代码块如 setTimeOut 时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX 异步请求等），会将对应任务添加到事件线程中 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待 JS 引擎的处理 注意，由于 JS 的单线程关系，所以这些待处理队列中的事件都得排队等待 JS 引擎处理（当 JS 引擎空闲时才会去执行）

私定时触发器线程

传说中的 setInterval 与 setTimeout 所在线程 浏览器定时计数器并不是由 JavaScript 引擎计数的,（因为 JavaScript 引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确） 因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待 JS 引擎空闲后执行） 注意，W3C 在 HTML 标准中规定，规定要求 setTimeout 中低于 4ms 的时间间隔算为 4ms。 异步 http 请求线程

在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由 JavaScript 引擎执行。

GUI 渲染线程和 JS 引擎线程互斥

js 是可以操作 DOM 的，如果在修改这些元素的同时渲染页面（js 线程和 ui 线程同时运行），那么渲染线程前后获得的元素数据可能就不一致了。

JS 阻塞页面加载

浏览器在执行 GPU 引擎的时候，如果遇到 js 脚本得去切换到 js 引擎 js 如果执行时间过长就会阻塞页面**

进程（process）和线程（thread）是操作系统的基本概念。

进程是 CPU 资源分配的最小单位（是能拥有资源和独立运行的最小单位）。 线程是 CPU 调度的最小单位（是建立在进程基础上的一次程序运行单位）。

setTimeout

setTimeout 的运行机制：执行该语句时，是立即把当前定时器代码推入事件队列，当定时器在事件列表中满足设置的时间值时将传入的函数加入任务队列，之后的执行就交给任务队列负责。但是如果此时任务队列不为空，则需等待，所以执行定时器内代码的时间可能会大于设置的时间

setTimeout 和 setInterval 区别

setTimeout: 指定延期后调用函数，每次 setTimeout 计时到后就会去执行，然后执行一段时间后才继续 setTimeout,中间就多了误差，（误差多少与代码的执行时间有关）。 setInterval：以指定周期调用函数，而 setInterval 则是每次都精确的隔一段时间推入一个事件（但是，事件的执行时间不一定就不准确，还有可能是这个事件还没执行完毕，下一个事件就来了）.

requestAnimationFrame 会在每次屏幕刷新的时候被调用，而 requestIdleCallback 则会每次屏幕刷新时，判断当前帧是否还有多余的时间，如果有，则会调用 requestAnimationFrame 的回调函数。

requestAnimationFrame 会在每次屏幕刷新的时候被调用，而 requestIdleCallback 则会在每次屏幕刷新时，判断当前帧是否还有多余的时间，如果有，则会调用 requestAnimationFrame 的回调函数

requestAnimationCallback

图片中是两个连续的执行帧，大致可以理解为两个帧的持续时间大概为 16.67，图中黄色部分就是空闲时间。所以，requestIdleCallback 中的回调函数仅会在每次屏幕刷新并且有空闲时间时才会被调用.

利用这个特性，我们可以在动画执行的期间，利用每帧的空闲时间来进行数据发送的操作，或者一些优先级比较低的操作，此时不会使影响到动画的性能，或者和 requestAnimationFrame 搭配，可以实现一些页面性能方面的的优化，