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 相关文章推荐
自动更新作用
Oct 08 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
Js的MessageBox
2006/12/03 Javascript
Javascript typeof 用法
2008/12/28 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
详解jQuery中的事件
2016/12/14 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
浅谈React高阶组件
2018/03/28 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python元组拆包实现方法
2021/02/28 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
Sony C++笔试题
2013/03/10 面试题
2014年党支部工作总结
2014/11/13 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
运动与健康自我评价
2015/03/09 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript