怎么回答问题 #

技术性答题要点 #

如：什么是 xx / 谈谈你对 xx 的理解 / 为什么使用 xx /

• 概念：概念性的知识要用精炼的语言解释清楚
• 核心：框架/方案等需要讲出核心原理或思路
• 用途：说技术的用途和应用场景（实践/方案）
• 对比：列出优缺点和其他方案对比（相同点/不同点）
• 引申：牵扯到自己擅长的知识点

概核用比引 谐音记忆：改革用笔引

答题要点根据具体问题调整，回答问题要有重点，有层次。

例题 #

1.什么是闭包

• 概念：当函数可以访问并记住所在的词法作用域时，就产生了闭包，即使函数在当前词法作用域之外执行。闭包和作用域链相关（函数内部是可以读取外部作用域的变量的，但是从函数外部不可以之间读取内部的局部变量的）；函数内部定义一个函数使用了局部变量并返回和被引用，这个局部变量会始终保存在内存中。
• 用途：一般用于私有化变量，缓存数据，比如防抖节流函数等
• 实践：早期 IE 由于 GC 使用的引用计数算法，会有循环引用问题造成内存泄漏。现代浏览器使用标记清除法不会有这个问题。
• 引申：内存泄漏和 GC 机制

2.为什么使用 Vite，和 Webpack 有什么区别

• 核心思想：Vite 自身定义为下一代的前端工具链，利用浏览器原生 ES 模块的支持，实现开发阶段的 Dev Server，进行模块的按需加载，而不是先整体打包再进行加载。对第三方依赖使用 ESbuild 预构建（速度快），生产模式使用 rollup 进行打包（有生态），
• 实践：第三方依赖的 common-js 转 ESM 可能会有问题
• 对比：vite 有开箱即用的语法支持 scss 等，基于 ESM esbuild 冷启动速度快，开发体验好，兼容性不如 webpack，webapck5 用 cache 提高了二次启动的速度，使用 rust / go 等原生语言（并行计算），进行构建提高效率的趋势，势不可挡 esbuild（Bundler/Compiler） swc（Bundler/Compiler ） turbopack rspack
• 引申：构建工具的功能，模块的加载和兼容，编译高级语法和兼容浏览器，产物的打包和压缩，开发服务器。在前端工程化中的地位。

3.说一下你对前端工程化的理解

• 概念：前端工程化是一个体系，以项目迭代过程中的前端开发为主要服务对象，涉及开发、构建、部署等环境，通过一系列和工具和规范，目标是提高效率、规范和性能。
• 实践：脚手架（init/cli/linter/pack），CICD

4.怎么做性能优化

• 概念：性能优化首先要有度量体系，从输入 URL 到页面显示角度分析，依赖 performance api，分为加载过程和渲染过程
• 方案：
  • 网络请求和静态资源优化
  • 构建优化
  • 代码优化
• 引申：性能监控