Browser面试题

1. 说一下浏览器渲染机制

1.解析HTML生成DOM树
2.解析CSS生成CSSOM规则树
3.将DOM树和CSSOM规则树合并在一起生成渲染树
4.遍历渲染树开始布局，计算每个节点的位置大小信息
5.将渲染树的每个节点绘制到屏幕

2. 说一下浏览器事件环

• JS是单线程的，JS中的代码都是串行的, 前面没有执行完毕后面不能执行

• 执行顺序

  1. 程序运行会从上至下依次执行所有的同步代码

  2. 在执行的过程中如果遇到异步代码会将异步代码放到事件循环中

  3. 当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件

  4. 一旦满足条件就执行满足条件的异步代码

• 宏任务和微任务

• 在JS的异步代码中又区分"宏任务(MacroTask)"和"微任务(MicroTask)"
• 宏任务: 宏/大的意思, 可以理解为比较费时比较慢的任务
• 微任务: 微/小的意思, 可以理解为相对没那么费时没那么慢的任务

• 常见的宏任务和微任务

  • MacroTask: setTimeout, setInterval, setImmediate（IE独有）...
  • MicroTask: Promise, MutationObserver ,process.nextTick（node独有) ...

注意点: 所有的宏任务和微任务都会放到自己的执行队列中, 也就是有一个宏任务队列和一个微任务队列 所有放到队列中的任务都采用"先进先出原则", 也就是多个任务同时满足条件, 那么会先执行先放进去的

• 完整执行顺序

  1.从上至下执行所有同步代码

  2.在执行过程中遇到宏任务就放到宏任务队列中,遇到微任务就放到微任务队列中

  3.当所有同步代码执行完毕之后, 就执行微任务队列中满足需求所有回调

  4.当微任务队列所有满足需求回调执行完毕之后, 就执行宏任务队列中满足需求所有回调

注意点: 每执行完一个宏任务都会立刻检查微任务队列有没有被清空, 如果没有就立刻清空