美团面试问题分享+js事件循环机制（执行机制）详解

为什么要有跨域

jsonp如何获取到数据

怎样做到浏览器兼容

不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同 解决方案： css 里增加通配符

* { margin: 0; padding: 0; }

setTimeout后面加0是什么意思，为什么不能省略掉？

js事件循环机制（执行机制）（字节，美团都有问到这个 一大串代码 问输出顺序）

答：任务进入执行找，会被分为同步任务和异步任务，接着同步任务进入主线程，异步任务进入事件队列。当主线程内的任务执行完毕为空，会去事件队列中读取对应的函数，进入主线程执行。上述过程会不断重复，也就是常说的Event Loop(事件循环)。一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。任务队列又分为macro-task（宏任务）与micro-task（微任务）。

macro-task大概包括：

• script(整体代码)
• setTimeout
• setInterval
• setImmediate
• I/O
• UI render

micro-task大概包括:

• process.nextTick
• Promise
• Async/Await(实际就是promise)

首先执行宏任务，然后执行该宏任务产生的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环

我们来分析一段较复杂的代码，看看你是否真的掌握了js的执行机制：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})复制代码

第一轮事件循环流程分析如下：

• 整体script作为第一个宏任务进入主线程，遇到console.log，输出1。
• 遇到setTimeout，其回调函数被分发到宏任务Event Queue中。我们暂且记为setTimeout1。
• 遇到process.nextTick()，其回调函数被分发到微任务Event Queue中。我们记为process1。
• 遇到Promise，new Promise直接执行，输出7。then被分发到微任务Event Queue中。我们记为then1。
• 又遇到了setTimeout，其回调函数被分发到宏任务Event Queue中，我们记为setTimeout2。

宏任务Event Queue	微任务Event Queue
setTimeout1	process1
setTimeout2	then1

• 上表是第一轮事件循环宏任务结束时各Event Queue的情况，此时已经输出了1和7。
• 我们发现了process1和then1两个微任务。
• 执行process1,输出6。
• 执行then1，输出8。

好了，第一轮事件循环正式结束，这一轮的结果是输出1，7，6，8。那么第二轮时间循环从setTimeout1宏任务开始：

• 首先输出2。接下来遇到了process.nextTick()，同样将其分发到微任务Event Queue中，记为process2。new Promise立即执行输出4，then也分发到微任务Event Queue中，记为then2。

宏任务Event Queue	微任务Event Queue
setTimeout2	process2
	then2

• 第二轮事件循环宏任务结束，我们发现有process2和then2两个微任务可以执行。
• 输出3。
• 输出5。
• 第二轮事件循环结束，第二轮输出2，4，3，5。
• 第三轮事件循环开始，此时只剩setTimeout2了，执行。
• 直接输出9。
• 将process.nextTick()分发到微任务Event Queue中。记为process3。
• 直接执行new Promise，输出11。
• 将then分发到微任务Event Queue中，记为then3。

宏任务Event Queue	微任务Event Queue
	process3
	then3

• 第三轮事件循环宏任务执行结束，执行两个微任务process3和then3。
• 输出10。
• 输出12。
• 第三轮事件循环结束，第三轮输出9，11，10，12。

整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。 (请注意，node环境下的事件监听依赖libuv与前端环境不完全相同，输出顺序可能会有误差)

再来一题

setTimeout(function() {
  console.log('timeout1');
},200)
async function async1(){
  console.log('async1 start')
  await async2()
  console.log('async1 end')
 }
async function async2(){
  console.log('async2')
 }
 async1();
 
new Promise(function (resolve) {
  console.log('111');     
  resolve();  
  new Promise(function(resolve){
   console.log('222')
   setTimeout(function(){
   console.log('333') 
  })
   resolve()
  }).then(function(){
   console.log('444')
   setTimeout(function(){
   console.log('555') 
   })
  })          
 }).then(function (resolve) {    
  console.log('666')        
 setTimeout(function(){
   console.log('777') 
   },200)
 });
 
setTimeout(function(){
 console.log('timeout2')
},100)

先执行微任务，再执行宏任务，async比promise先执行，await比then先执行，setTimeout有时延的按照时延的大小来执行。最终执行结果为：async1 start ，async2, 111, 222， async1 end， 444, 666, 333， 555,timeout2, timeout1, 777

async function async1() {
    console.log( 'async1 start')
    await async2()
    console.log( 'async1 end')
  }
  
async function async2() {
    console.log( 'async2')
  }
  
console.log( 'script start')

setTimeout( function() {
	console.log( 'setTimeout')
  }, 0)
  
 async1();  

 new Promise( function( resolve ) {
   console.log( 'promise1')
 	resolve();
  } ).then( function() {
    console.log( 'promise2')
  } )
  console.log( 'script end' )

输出结果为：script start，async1 start，async2，promise1，script end，async1 end，promise2，setTimeout