一、浏览器的线程

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.查看下图

图 1

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.查看下图

图 1

4.3.异步任务的运行机制分析

4.3.1.ajax进入Event Table, 注册回调函数success;

4.3.2.执行console.log(‘run’),——同步任务;

4.3.3.ajax事件完成http网络请求线程把任务放入Event Queue中;

4.3.4.主线程(调用栈)读取任务后执行success函数;

五、重新理解定时器

5.1.setTimeout的作用

5.1.1.setTimeout的等待时间结束后并不是直接执行的而是先推入浏览器的一个任务队列,在同步队列结束后再依次调用任务队列中的任务执行

5.1.2.setTimeout(function () {}, 0}js主线程中的执行栈为空时,0毫秒实际上也达不到的,根据html标准,最低4毫秒。

5.1.3.setInterval是每隔一段时间把任务放到Event Queue中。

 

博主联系方式:

  • 微信:34419369
  • QQ: 34419369
  • 公众号:前方录
  • 有什么不懂的地方欢迎联系我,帮到你是我会很开心

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注