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 相关文章推荐
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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实现的简单sha1加密功能示例
2017/08/27 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
js内置对象 学习笔记
2011/08/01 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
vuejs指令详解
2017/02/07 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
vue--vuex详解
2019/04/15 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
回调函数的意义以及python实现实例
2017/06/20 Python
谈谈python中GUI的选择
2018/03/01 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python中round函数保留两位小数的方法
2020/12/04 Python
美国五金商店:Ace Hardware
2018/03/27 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
广州盈通面试题
2015/12/05 面试题
酒店应聘自荐信
2013/11/09 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
golang中的空接口使用详解
2021/03/30 Python
JavaScript 实现页面滚动动画
2021/04/24 Javascript