首页  >  js知识点  >  深入剖析js执行机制

一、浏览器的线程

1.1.js引擎线程

主要负责：解释执行代码，用户输入，网络请求

js引擎线程是单线程：同一时间只能做一件事。

1.2.GUI线程

主要负责：绘制网页界面，与js主线程是互斥的

js可以操作DOM元素，进而会影响到GUI的渲染结果。

当js引擎线程处于运行状态时，GUI渲染线程将处理冻结状态。

1.3.http网络请求线程

处理用户的get,post等请求，等返回结果后将回调函数推入任务队列

1.4.定时触发器线程

setTimeout, setInterval等待时间结束后把执行函数推入任务队列中

1.5.浏览器事件处理线程

将click,mouse等交互事件发生后将这些事件放入事件队列中

1.6.UI主线程负责协调运转上述五个线程

UI主线程

二、运行机制

2.1.大量数据操作怎么办

单线程计算能力有限，大量数据需要计算机渲染的话，我们可以配合后端进行操作，后期学到的VUE与node.js相配合（传说中的ssr技术）

2.2.为什么让js线程和GUI线程冲突

js可以操作DOM，如果是多线程的话，会发生冲突（多线程同时更改一个DOM）

2.3js执行机制。

javascript是基于单线程运行的，同时又是可以异步执行的，一般来说这种既是单线程又是异步的话言都是基于事件来驱动的，恰好浏览器就给javascript提供了这么一个环境.

js主线程是单线程的，js代码在主线程中是一个执行完再进行另一个的。

js主线程任务执行完毕后，会读取任务队列中的任务（这里的任务是异步任务，各个不同的异步任务是由其他辅助线程提供的），然后再按顺序执行这些异步任务。

同步和异步任务分别进入不同的执行“场所“，同步的进入主线程，异步的进入Event Table 并注册函数。

当指定的事情完成时，Event Table会将这个函数移入Event Queue

主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行，上述过程会不断重复，也就是常说的Event Loop(事件循环）。

三、同步任务的代码及代码分析

3.1.代码

function outer(ot) {
  function inner(it) {
    debugger;
    console.log(it)
  }
  inner(20);
  console.log(ot);
}
outer();

3.2.查看下图

3.3.同步任务的运行机制分析

3.3.1.代码没有执行的时候，执行栈为空栈；

3.3.2.outer函数执行时，创建了一帧，这帧中包含了形参、局部变量（预编译过程），然后把这一帖压入执行栈中；

3.3.3.然后执行outer函数内代码，执行inner函数；

3.3.4.创建新帧，同样有形参、局部变量（预编译过程），然后把这一帖压入执行栈中；

3.3.5.inner函数执行完毕，弹出执行栈；

3.3.6.outer函数执行完毕，弹出执行栈；

3.3.7.执行栈为空；

3.3.8.执行栈其实相当于js主线程

四、异步任务的代码及代码分析

4.1.代码

$.ajax({
  url: 'localhost:/js/demo.json',
  data: {},
  success: function (data) {
    console.log(data);
  }
});
console.log('run');

4.2.查看下图