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 相关文章推荐
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
vue实现数字滚动效果
Jun 29 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
PHP缓存技术的多种方法小结
2012/08/14 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
javascript中的this详解
2014/12/08 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
vue组件的写法汇总
2018/04/12 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python颜色随机生成器的实例代码
2020/01/10 Python
python str字符串转uuid实例
2020/03/03 Python
python创建文本文件的简单方法
2020/08/30 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
函授毕业生的自我鉴定
2013/11/26 职场文书
新学期班主任寄语
2014/01/18 职场文书
运动会通讯稿300字
2014/02/02 职场文书
十八大演讲稿
2014/05/22 职场文书
委托书怎样写
2014/08/30 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
财务出纳岗位职责
2015/03/31 职场文书
2015党建工作简报
2015/07/21 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python