面试题：前端
前端工程师岗位相关的基础、框架、浏览器、性能和工程化面试准备。
TypeScript 在前端项目里解决什么问题，type 和 interface 如何取舍？
TypeScript 通过静态类型帮助前端项目约束数据结构、组件 props、接口返回和重构边界；type 和 interface 都能描述对象形状，取舍重点在扩展方式、组合能力和团队约定。
如何手写防抖和节流？
防抖是在连续触发结束后只执行最后一次，适合搜索输入、窗口尺寸稳定后计算；节流是在固定时间窗口内最多执行一次，适合滚动、拖拽、频繁上报这类持续触发场景。
SemVer 的 major、minor、patch 分别表示什么风险？
SemVer 用 major、minor、patch 表达版本变更风险：patch 通常是兼容修复，minor 通常是兼容新增能力，major 表示可能有破坏性变更。实际升级时还要结合 changelog、依赖类型和测试覆盖判断风险。
Vite 和 Webpack 的开发服务器启动方式有什么核心差异？
Vite 开发服务器利用浏览器原生 ESM 按需加载源码，启动时不需要先把整个应用打包；Webpack dev server 通常先构建依赖图并产出内存中的 bundle，再提供给浏览器。
Tree Shaking 生效需要哪些条件，为什么有时没有摇掉无用代码？
Tree Shaking 依赖静态可分析的 ES Module、无副作用标记和构建工具的压缩删除能力；如果模块有副作用、使用 CommonJS、动态访问或包配置不正确，无用代码就可能保留下来。
Babel、SWC、esbuild 分别解决什么问题？
Babel、SWC、esbuild 都能处理前端代码转换，但定位不同：Babel 生态和语法插件最成熟，SWC 用 Rust 提供高速转译，esbuild 用 Go 提供极快的转译和打包基础能力。
前端项目如何设计 ESLint、Prettier、Stylelint 和 Git hooks？
ESLint 管代码质量和潜在错误，Prettier 管格式，Stylelint 管样式规则，Git hooks 用来在提交前执行低成本检查；它们应该职责分明，而不是互相抢同一类规则。
如何设计环境变量，避免把密钥打进前端产物？
前端环境变量要区分构建期变量、运行时配置和服务端私密配置。凡是会进入浏览器 bundle 的变量都不能放密钥，密钥只能留在服务端或受控代理层。
代码分割、路由懒加载和组件懒加载分别适合什么场景？
代码分割是把 bundle 拆成多个按需加载的资源；路由懒加载适合页面级分包，组件懒加载适合重组件、低频组件和首屏不需要的功能模块。
npm、pnpm、yarn 的依赖安装模型有什么差异？
npm、pnpm、yarn 都是 JavaScript 包管理器，差异主要在依赖树布局、安装速度、磁盘复用、workspace 支持、lockfile 行为和对幽灵依赖的约束程度。