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与google map api结合使用 控件,监听器
Mar 04 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
vue实现树形菜单效果
Mar 19 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
pandas分区间,算频率的实例
2019/07/04 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python 字符串池化的前提
2020/07/03 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
公司新年寄语
2014/04/04 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书