前言

他来了他来了，前端必问题之一来了

一、什么是单线程？

就是至上而下，按照顺序走，前面执行了，后面的才会执行

二、为什么JS是单线程？

好处：单线程的特点能更好的提高运行效率
JS用法层面：JS的主要用途是与用户互动和dom操作。这决定了它只能是单线程，否则会带来很复杂的同步问题。如：若JS有多个线程，一个操作一个节点，另一个删除那个节点，要先走哪一步？

三、任务队列

由上面的单线程问题，我们知道JS是单线程的，有点像是同步操作的一个逻辑，一个页面，由同步操作又有异步操作，要怎么安排，怎么触发呢？这就扯到了，任务队列的问题。

1. 什么是任务队列

任务队列就相当于一个临时存放异步任务的储存栈，他首先会执行主线程的同步任务，当主线程遇到异步任务，就会先把异步任务先放在任务队列里，等到同步任务全部执行完，再去执行任务队列里面的异步任务。

2. 什么是微任务宏任务

通俗点讲，微任务就是同步任务，宏任务就是异步任务，例如

微任务：Promise(async/await)、简单的console.log啥的
宏任务：定时器、事件绑定、ajax、回调函数

四、常见面试题例子

     async function async1(){console.log(1)const result = await async2()console.log(3)}async function async2(){console.log(2)}Promise.resolve().then(()=>{console.log(4)})setTimeout(() => {console.log(5)});async1()console.log(6)

正确的顺序为：1、2、6、4、3、5

首先我们由上知道async事件和Promise都相当于优先执行的微任务，而计时器为宏任务
所以，先执行async1中输出‘1’，紧接着就输出‘2’
此时await事件还没有返回结果，所以‘3’还不能输出，而promise中的.then又要在等一轮，所以执行console.log(6)
第一轮执行完后，再来第二轮，此时await已返回可以输出’3’.但是async1在后面才调用，所以先执行.then输出‘4’
然后执行async1，await返回输出‘3’
最后再执行宏任务输出‘5’

总结

以上就是今天的全部内容，下次再见呐！

前端常见面试题之----js单线程，微任务宏任务相关推荐

前端常见面试题：js去除空格的三种方法
用js去除空格: 1.用str.replace (/\s*/g,"") 去除所有空格 2.str.trim() 无法去除中间的空格 3.$.trim(str) 无法去除中间的空格
前端常见面试题及答案
文章转自http://www.cnblogs.com/syfwhu/p/4434132.html 前言本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典.很有代表性. ...
前端常见面试题---flex:1 是什么？
前端常见面试题-flex:1 是什么文章目录前端常见面试题---flex:1 是什么 Flex-grow Flex-shrink Flex-basis flex=1得应用一个高度自适应的div, ...
前端常见面试题 - JS篇
以下会是JS常见面试题: 面试题将会以系列不定时更新,编写不宜,如有用到,请动动小手关注一下. 1. 简述ES6 1. let: 块级作用域. 2. const: 常量; 块级作用域; 一旦声明, 则 ...
web前端常见面试题
Vue面试题生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted ...
前端常见面试题整理第二版
重点面试题目 1.BFC 的形成条件简称块级格式化上下文. 如何形成的 bfc?当元素是浮动元素.绝对定位的元素,以及是非块级盒子的块级元素如*(inline-block.table-cells.t ...
2021前端常见面试题必考必问：js中非==和非=的区别是什么?js中==和===区别？
js中 !==和 !=的区别是什么? 一.区别: != 会转换成相同类型进行比较,!== 除了比对值还比对类型. 二.各自的解释 1.!= 在表达式两边的数据类型不一致时,会隐式转换为相同数据类型, ...
中级前端常见面试题（附答案），持续更新
文章目录 Q:JS有哪些数据类型? 7种基本类型 1种引用类型 Q:ES6数据结构 Set / Map Set Map Q:call, apply, bind 用法和区别 call() 和 apply ...
web前端常见面试题总结
人生的路上少不了尝试,人人都是打工人,但愿这份面试题可以帮助到你 H5有哪些新特性? 绘画canvas(随时随地绘制2D图形).svg(描述XML中的2D图形)元素语义化标签header.ment. ...

前端常见面试题之----js单线程，微任务宏任务

js单线程，微任务宏任务

前言