js单线程

js是单线程的,这样更有利与用户交互以及DOM操作;有关进程与线程的详细解释可以点击传送门;尽管webworker可以实现多线程,但本质上他还属于单线程,由webworker创建的线程都由主线程控制并且只能进行计算而已;

js同步、异步

同步执行:即js主线程按顺序执行任务,如遇操作webAPI/ajax等代码时会等待其响应后面代码得不到执行,也就是下一个任务必须等到前一个任务执行完成;

异步执行:js是单线程的本身不具备异步能力,但浏览器可以;当js执行时遇到webAPI(如setTimeout/ajax等),会立即返回一个值,从而不阻塞主线程,而真正的异步由浏览器执行,待完成后讲其回调函数推入js主线程的消息队列中等待主线程调用;

事件循环机制[Event-loop]

js执行时其主线程拥有一个执行栈[个人习惯叫调用栈](stack)和一个消息列队[也叫任务列队或事件列队](Event-queue);当js执行时遇到函数function时会将其入栈待函数执行完在出栈,主线程调用执行栈并执行,如果遇到webAPI会异步执行;当执行栈中没有任务时,主线程会查询消息列队,如查询成功,则将查询的任务入栈执行,直到执行栈为空,再次查询消息列队,这样形成一个循环就是大名鼎鼎的事件循环[Event-loop];由于异步执行是浏览器完成的这也就好理解为什么js线程阻塞时操作dom事件会在线程恢复后依次执行,[js主线程的任务列队是浏览器推入的,js线程阻塞!==浏览器线程阻塞,换言之即是主线程阻塞也不妨碍向任务列队推入任务];画个草图;

再来段代码:

      // 主线程执行fn1任务  1
function fn1(){
console.log("任务1执行")
// 遇到webAPI立即返回 这里是undefined值 并交给浏览器对应线程处理 2
// 浏览器收到后 0 毫秒将回调函数推入消息列队; 异步执行
setTimeout(function(){// 查询到一个回调任务 入栈执行 5
console.log("回调1执行")
// 遇到webAPI立即返回 这里是undefined值 并交给浏览器对应线程处理 6
// 浏览器收到后 500 毫秒将回调函数推入消息列队; 异步执行
setTimeout(function(){// 查询到一个回调任务 入栈执行 7
console.log("回调2执行")
},500)
},0)
}
// 主线程执行fn2任务 3
function fn2(){console.log("任务2执行")}
// 执行栈没有可执行任务 开始查询消息列队 4

Macrotasks 和 Microtasks

消息列队分为两种即Macrotasks[Task Queue]与Microtasks[Microtasks Queue ];

  • macrotaskssetTimeoutsetIntervalsetImmediate, I/O, UI rendering
  • microtasksprocess.nextTickPromisesObject.MutationObserver

这就引发一个问题他俩到底该谁先执行呢?Promise/A+规范指出:

Here “platform code” means engine, environment, and promise implementation code. In practice, this requirement ensures that onFulfilled and onRejected execute asynchronously, after the event loop turn in which then is called, and with a fresh stack. This can be implemented with either a “macro-task” mechanism such as setTimeout or setImmediate, or with a “micro-task” mechanism such as MutationObserver or process.nextTick. Since the promise implementation is considered platform code, it may itself contain a task-scheduling queue or “trampoline” in which the handlers are called.
其实执行过程也是很好理解的也是一个循环查询,在前面的基础上查询消息列队时 会先查询 microtasks将其所有任务执行完毕后在查询macrotasks如果执行macrotasks中有microtasks任务则下次查询依旧会先执行完microtasks列队任务在查询macrotasks 如此反复 直到消息列队[两个 Queue]无任务;
ok我们上段代码[promise特性为es6 故用node环境]
console.log(1);
setTimeout(function(){
console.log(7)
},0);
setTimeout(function(){
new Promise(function(resolve){
resolve();
}).then(function(){
console.log(8)
}).then(function(){
console.log(9)
}).then(function(){
console.log(10);
})
},0);
new Promise(function(resolve){
resolve();
}).then(function(){
console.log(3)
}).then(function(){
console.log(4)
}).then(function(){
console.log(5)
}).then(function(){
console.log(6)
})
console.log(2);
// 1 2 3 4 5 6 7 8 9 10

上边代码执行过程:

js执行console 1 遇到setTimeout改为异步执行,又遇setTimeout再次异步执行,接着执行遇到promise 被推入microtasks型任务列队之后执行console 2 至此执行栈为空开始查询消息列队,先去查询microtasks发现有个 有任务可以执行,接着会将任务入栈执行并相应打印 3 4 5 6【只要发现microtasks不为空就执行到为空为止】; 再次查询消息列队 此时microtasks列队已无任务可执行,接着查询macrotasks列队发现一个setTimeout回调等待执行,接着入栈执行并出栈,打印 7 ;再次查询列队 此时microtasks列队依然无任务,接着查询macrotasks列队又发现一个setTimeou回调等待执行,入栈执行 发现promise推入microtasks列队 出栈,执行栈又空了。查询消息列队 此时发现microtasks有任务可以执行,入栈 执行 出栈;打印响应 8 9 10;至此执行结束主线程处于等待状态;

javascript事件循环的更多相关文章

  1. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  2. 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)

    JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...

  3. JavaScript 事件循环

    JavaScript 事件循环 事件循环 任务队列 async/await 又是如何处理的呢 ? 定时器问题 阻塞还是非阻塞 实际应用案例 拆分 CPU 过载任务 进度指示 在事件之后做一些事情 事件 ...

  4. 深入理解 JavaScript 事件循环(一)— event loop

    引言 相信所有学过 JavaScript 都知道它是一门单线程的语言,这也就意味着 JS 无法进行多线程编程,但是 JS 当中却有着无处不在的异步概念 .在初期许多人会把异步理解成类似多线程的编程模式 ...

  5. 深入理解 JavaScript 事件循环(二)— task and microtask

    引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执 ...

  6. javascript事件循环机制 浅尝手记

    引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...

  7. JavaScript事件循环(Event Loop)机制

    JavaScript 是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决定 ...

  8. JavaScript事件循环机制

    事件循环 事件循环不仅仅包含事件队列,而是具有至少两个队列,除了事件,还要保持浏览器执行的其他操作.这些操作被称为任务,并且分为两类:宏任务(或通常称为任务)和微任务. 单次循环迭代中,最多处理一个宏 ...

  9. [浏览器事件循环] javaScript事件循环 EventLoop

    前言 Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理. 先熟悉基本概念 [堆Heap] 堆是一种数据结构 ...

  10. 深入理解JavaScript事件循环机制

    前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...

随机推荐

  1. layer.js 注册登录切换的问题

    layer.js 是一个很好用的弹窗框架,使用的时候很方便,但是今天遇到一个问题,让我很头疼啊,一直都做不出来,就是登录和注册弹窗的切换问题 这里涉及到两个页面:guide.html 即父页面,den ...

  2. CSS: pseudo-classes and pseudo-elements

    1.Definition: pseudo-classes The pseudo-class concept is introduced to permit selection based on inf ...

  3. [Redis]Redis高级特性的配置及使用

    ---------------------------------------------------------------------------- [Redis安全性] 一 . 默认我们进入Re ...

  4. js学习(4) 函数

    JavaScript有三种声明函数的方法 (1)function命令 function print(s) { console.log(s); } (2)函数表达式 1.var print = func ...

  5. Codeforces Round #436 (Div. 2)C. Bus 模拟

    C. Bus time limit per test: 2 seconds memory limit per test: 256 megabytes input: standard input out ...

  6. 数据库mysql之慢查询优化

    今天项目遇到一个问题:就是在公司test环境中执行sql查询语句很快,也就几百毫秒,但是放到sit环境中测试就要延迟至少1分钟左右. 网上找了很多原因,大多数都是说索引问题,我看了索引没问题,又重新建 ...

  7. php正则提取html图片(img)src地址与任意属性的方法

    <?php /*PHP正则提取图片img标记中的任意属性*/ $str = '<center><img src="/uploads/images/2017020716 ...

  8. 转载-js如何设置网页横屏和竖屏切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. POJ1862 Stripies 贪心 B

    POJ 1862 Stripies https://vjudge.net/problem/POJ-1862 题目:     Our chemical biologists have invented ...

  10. HTTP协议简单认识

    一.HTTP协议简介 HTTP超文本传输协议是一种用于分布式,协作式和超媒体信息系统的应用层协议 二.HTTP协议概述 HTTP是一个客户端和服务端请求和响应的标准 三.HTTP协议工作步骤 1.客户 ...