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. django在centos部署

    各种坑各种蛋疼,搞了两天终于能用了.整体分2步: 1. 通过uwsgi 启动django项目 在manage.py同级目录,新建uwsgi.ini文件 [uwsgi] # 配置服务器的监听ip和端口, ...

  2. iptables随笔

    iptables 分为四表五链 四表: filter表 nat 表 mangle 表 raw 表 五链 INPUT 链 OUTPUT 链 FORWARD 链 PREROUTING(路由前) POSTR ...

  3. asp.net文件/大文件上传需要配置的项目整理

    HTTP 错误 404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求. 最可能的原因: •Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值. 可尝 ...

  4. 使用__slots__节省python内存技巧

    __slots__作用 __slots__有一个作用是:限制类实例绑定的属性,但是它有一个更重要的作用就是节省内存,当然更适用于数据量大的情况(万量级以上). __slots__节省内存的原理 cla ...

  5. C#Winform的DEV下拉下拉控件介绍

    LookupEdit 下拉单选,可搜索,下拉展示为一个table: ComboxEdit 下拉单选,可当做text使用,输入数据源中没有的项,只有显示值: CheckcomboxEdit 下拉多选,可 ...

  6. mysql命令行常用指令

    一. 启动mysql:service mysql start 停止mysql:service mysql stop 重启mysql:service mysql restart 查看mysql服务状态: ...

  7. thinkphp5中使用excel导出数据表格(包涵图片)

    首先使用composer require phpoffice/phpexcel下载安装phpexcel包. 将包放入extend下面. 不附加图片的导出 /** * 导出excel(不带图片) * @ ...

  8. 791. Custom Sort String字符串保持字母一样,位置可以变

    [抄题]: S and T are strings composed of lowercase letters. In S, no letter occurs more than once. S wa ...

  9. node.js 调试问题

    最近打算在项目过程中使用node.js辅助解决一些问题,需要用到node.js的调试技术. 通常而言,大家都会提到debugger或者node-inspector方法. debugger方法谁用谁知道 ...

  10. 如何在chrome上打开SSL3.0

    Chrome默认关闭对SSL3.0的支持,无法访问一些Web应用.可以手动打开他. 启动chrome依次选择 设置->高级->系统->打开代理设置->安全 将使用SSL 3.0 ...