2022最新前端面试，已斩获字节、拼多多等大厂offer，过年准备起来吧（下）

上篇链接

笔者在2021年末到2022年初面了阿里、百度、字节跳动、微软、拼多多、B站等大厂。这个下篇主要再和大家总结一下性能、前端新趋势、项目方面的面试题～

优化相关

优化相关主要分为两类：优化开发体验和项目性能优化

优化开发体验

• 加快打包速度
  • 开发环境可以尝试esmodule的打包形式，可以使用vite或者esbuild-loader
  • webpack的话可以使用cache-loader、happyPack、noParse等
• 完善devops流程
• 使用低代码平台构建管理平台页面
• 利用微前端的技术无关性，新项目使用新技术来构建

项目性能优化

工欲善其事，必先利其器，在讨论如何性能优化之前，先看一下如何收集关于性能的数据

• 打包产物的话，可以根据webpack-bundle-analyze之类的打包分析工具进行分析
• 网站的性能概要可以通过lighthouse查看
• 运行时一些关键时间的监控例如DNS查询耗时、白屏时间等可以使用Performance Api来计算
• 比较具体的性能卡点通过Chrome Performance火焰图分析

开始性能优化的前提是要熟知两道经典题目『事件循环机制』和『从浏览器输入地址到呈现出网页的过程』，事件循环机制可以让你知道为什么要对一些高计算任务进行分片、以及为什么分片是使用setTimeout而不是Promise，而浏览器输入地址更是一道非常全面的问题，牵扯到缓存、DNS、HTTP、重排重绘合成等方面，之后我们的具体性能优化也是会随着这个来讲（浏览器输入地址这道题写在了上篇，如果有需要可以进行阅读～）

事件循环

• js代码执行是单线程，浏览器有单独的事件触发线程来提供宏任务队列收集定时器、异步请求、浏览器事件中的callback
  • 本身的script标签也是一个宏事件，在宏任务执行的过程中，Promise、queueMicrotask中的callback会加入到微任务队列中，在当前宏任务主流程执行完后执行所有微任务（微任务太多会使浏览器卡死）
  • 执行requestAnimationFrame（在下次重绘之前调用）
  • 如