js单线程的本质 Event Loop解析


Posted in Javascript onOctober 29, 2019

怎么判断是浏览器还是node环境?

node中window是未定义;setImmediate是定义的,在浏览器中未定义

timer阶段:这个阶段会执行setTimeout和setInterval

check阶段:执行setImmediate

macro task [task] 宏任务 :script(页面代码)、setTimeout、setInterval、I/O事件、UI交互事件(点击事件)

micro task [job]  微任务: Promise、process.nextTick、Promise().then()

宏任务可以有多个队列

微任务只有一个队列

setTimeout任务之间,推迟执行的毫秒数越小,排在队列里面越靠前

在node里面,timers(setTimeout、setInterval)会优先于setImmediate

setTimeout(() => {
  console.log('setTimeout')
},0);  // 大于1000时,会先执行setImmediate
setImmediate(()=> { console.log('setImmediate')})
console.log('start');
setTimeout(function (){
  console.log('timeout');
},10);
new Promise((resolve) => {
  console.log('promise');
  resolve()
  setTimeout(() => {
    console.log('Promsie中的setTimeout');
  },0);
}).then(() => {
  console.log('then');
});
console.log('end');

运行机制

1. 在执行栈中执行一个宏任务。

2. 执行过程中遇到微任务,将微任务添加到微任务队列中。

3. 当前宏任务执行完毕,立即执行微任务队列中的任务。

4. 当前微任务队列中的任务执行完毕,检查渲染,GUI线程接管渲染。

5. 渲染完毕后,js线程接管,开启下一次事件循环,执行下一次宏任务(事件队列中取)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 #Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 #Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 #Javascript
vue实现路由监听和参数监听
Oct 29 #Javascript
基于axios 的responseType类型的设置方法
Oct 29 #Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 #Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
Three.js基础部分学习
2017/01/08 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python类属性与实例属性用法分析
2015/05/09 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Django实现发送邮件功能
2019/07/18 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
大整数数相乘的问题
2012/07/22 面试题
什么是数组名
2012/05/10 面试题
商务英语求职自荐信范文
2013/12/24 职场文书
劳动之星获奖感言
2014/02/01 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
学习礼仪心得体会
2014/09/01 职场文书
基层党组织整改方案
2014/10/25 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
委托函范文
2015/01/29 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书