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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
js完整倒计时代码分享
Sep 18 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
详解JavaScript的计时器和按钮效果设置
Feb 18 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
在PHP中使用redis
2013/11/04 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python splitlines使用技巧
2008/09/06 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
基于python中__add__函数的用法
2019/11/25 Python
小学生防溺水广播稿
2014/01/12 职场文书
仓库文员岗位职责
2014/04/06 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
计算机专业自荐信
2015/03/05 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
倡议书的格式写法
2015/04/28 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
汽车车尾标语大全
2015/08/11 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电