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 事件的一些重要说明
Oct 25 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
Table冻结表头示例代码
Aug 20 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHPCMS的使用小结
2010/09/20 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
python多线程操作实例
2014/11/21 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
红旗渠导游词
2015/02/09 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis