JS运行机制

参考链接

• 线程和进程的区别

进程是cpu资源分配的最小单位（拥有资源、独立运行）
线程是cpu调度的最小单位（线程是建立在进程的基础上一次程序运行单位）
一个进程由一个或多个线程组成
单线程与多线程，都是指在一个进程内的单和多

浏览器是 多进程的

• 浏览器内核（渲染进程）

浏览器的渲染进程是多线程的

1、GUI渲染线程

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

2、JS引擎线程
– 也称为JS内核，负责处理Javascript脚本程序，解析Javascript脚本，运行代码。（例如V8引擎）

• JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
• 同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

3、事件触发线程

• 属于浏览器，用来控制事件循环
• 当js引擎执行代码块时，会将对应任务添加至事件线程中，当对应的事件符合条件被触发时，该线程会把事件添加至待处理队列的队尾，等待js引擎处理
• 注意，由于js是单线程，所以待处理队列中的事件都需排队等待js引擎处理

4、定时器触发线程

• setInterval与setTimeout所在线程
• 浏览器定时计数器不是由js引擎执行，而是通过单独线程来计时并触发定时（计时完毕后，添加至事件队列中，等待js引擎执行）
  5、异步http请求线程
• 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
• 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行

浏览器渲染进程