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 mapreduce工作原理简析
Nov 25 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
详解React中的组件通信问题
Jul 31 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 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
PHP学习之PHP表达式
2006/10/09 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
canvas的神奇用法
2017/02/03 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
微信跳一跳python代码实现
2018/01/05 Python
Python tkinter事件高级用法实例
2018/01/31 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python构建基础的爬虫教学
2018/12/23 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
Python列表解析操作实例总结
2020/02/26 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
软件测试笔试题
2012/10/25 面试题
平面设计的岗位职责
2013/11/08 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
员工工作能力评语
2014/12/31 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
公司职员入党自传书
2015/06/26 职场文书
Python字符串常规操作小结
2022/04/03 Python