浏览器的执行机制

1. 说一下你在工作中解决过的比较困难的问题，说一下自己项目中比较亮点的地方

面试官要看一下你解决问题的能力

2. 你了解浏览器中有事件循环的机制 ？

2.1 为什么js在浏览器中有事件循环的机制？

• js是单线程的
• 非阻塞事件采用 event loop

2.2 你了解事件循环中有两种任务吗？

• 宏任务：整体代码，setTimeout，setInterval，I/O操作

• 微任务：new Promise().then, MutaionObserver

2.3 为什么要引入微任务的概念，只有宏任务可以吗？

• 宏任务：先进先出的原则执行。
• 微任务：有些优先级高的事件要优先执行，没执行完一次就去执行微任务，直到微任务执行完再执行宏任务

2.4 Node中的事件循环和浏览器中的事件循环有什么区别？

宏任务的执行顺序：

1. timers定时器：执行已经安排的 setTimeout 和 setInterval 的回调函数
2. pending callback 待定回调：执行延迟到下一个循环迭代的 I/O 回调
3. idle, prepare: 仅系统内部使用
4. poll: 检索新的 I/O 事件，执行与 I/O 相关的回调
5. check: 执行 setImmediate() 回调函数
6. close callbacks: socket.on(‘close’, () => {})

微任务和宏任务在node的执行顺序：

Node v10及以前：

1. 执行完一个阶段中的所有任务
2. 执行nextTick队列里的内容
3. 执行完微任务队列的内容

Node v10以后：
浏览器的行为和Node统一了

3. 了解的还挺多，来几道题试试吧

1. 第一道题

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')
复制代码

2. 第二道题

console.log("start");

setTimeout(() => {
  console.log("children 2")
  Promise.resolve().then(() => {
    console.log("children 3")
  })
}, 0)

new Promise(function (resolve, reject) {
  console.log("children 4")
  setTimeout(function () {
    console.log("children 5")
    resolve("children 6")
  }, 0)
}).then((res) => {
  console.log("children 7")
  setTimeout(() => {
    console.log(res)
  }, 0)
})

// start
// children 4
// children 2
// children 5
// children 3
// children 7
// children 6
复制代码

3） 第三道题

const p = function () {
  return new Promise((resolve, reject) => {

    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1)
      }, 0)
      //resolve(2)
    })
    p1.then((res) => {
      console.log(res)
    })
    console.log(3)
    resolve(4)
  })
}

p().then((res) => {
  console.log(res)
})

console.log('end')

// 3
// 2
// 4
// end

复制代码