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 联动日历实现代码
May 31 Javascript
js 窗口抖动示例
Sep 04 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
JS将unicode码转中文方法
May 08 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
JavaScript正则表达式简单实用实例
Jun 23 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
用穿越火线快速入门php面向对象
2012/02/22 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php事务处理实例详解
2014/07/11 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
Python字符遍历的艺术
2008/09/06 Python
Python中的并发编程实例
2014/07/07 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
写好自荐信要注意的问题
2013/11/10 职场文书
晚会开场白和结束语
2015/05/29 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
解析Java异步之call future
2021/06/14 Java/Android
Hive常用日期格式转换语法
2022/06/25 数据库