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 相关文章推荐
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
jquery实现提示语淡入效果
May 05 jQuery
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 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回溯法解决0-1背包问题实例分析
2015/03/23 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
arguments对象
2006/11/20 Javascript
js left,right,mid函数
2008/06/10 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
React优化子组件render的使用
2019/05/12 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
Python编程之序列操作实例详解
2017/07/22 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
意大利网上药房:Farmacia 33
2020/01/27 全球购物
给同事的道歉信
2014/01/11 职场文书
领导视察欢迎词
2014/01/15 职场文书
诚信承诺书模板
2014/05/26 职场文书
公司任命书模板
2014/06/06 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2014年科普工作总结
2014/12/06 职场文书
产品质量保证书范本
2015/02/27 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
教师教育心得体会
2016/01/19 职场文书