Appearance
浏览器与工程化
浏览器题考的是：渲染原理、性能优化、安全；工程化题考的是：构建工具、模块化、CI/CD。
Q1: 浏览器的渲染过程？ 「🟡 中级」
考察点：从 HTML 到像素的完整链路。
参考答案：
- 解析 HTML → 构建 DOM 树。
- 解析 CSS → 构建 CSSOM 树。
- 合并 DOM + CSSOM → 构建渲染树（Render Tree，只包含可见元素）。
- 布局（Layout）：计算每个节点的几何信息（位置、尺寸）。
- 绘制（Paint）：把节点绘制成像素。
- 合成（Composite）：分层合成，GPU 加速（transform/opacity 走合成层）。
追问延伸：
<script>标签会阻塞 DOM 解析吗？（会，用 defer/async 解决）- 重排（reflow）和重绘（repaint）的区别？
Q2: 前端性能优化有哪些手段？ 「🟡 中级」
考察点：性能优化的系统性思维。
参考答案：
- 加载优化：代码分割、懒加载、预加载（
<link rel="preload">）、CDN、Gzip/Brotli 压缩、HTTP/2 多路复用。 - 渲染优化：减少重排重绘、使用 CSS transform/opacity（走合成层）、虚拟列表、防抖节流。
- 资源优化：图片压缩、WebP/AVIF、字体子集化、Tree Shaking。
- 缓存策略：强缓存 + 协商缓存、Service Worker 离线缓存。
- 监控：Lighthouse、Web Vitals（LCP、FID、CLS）。
追问延伸：
- LCP、FID、CLS 分别是什么？
- 怎么检测页面的性能瓶颈？
Q3: XSS 和 CSRF 是什么？怎么防御？ 「🟡 中级」
考察点：前端安全的基础。
参考答案：
- XSS（跨站脚本攻击）：注入恶意脚本到页面。类型：存储型、反射型、DOM 型。防御：输入过滤、输出转义、CSP（内容安全策略）、HttpOnly Cookie。
- CSRF（跨站请求伪造）：诱导用户发起非预期请求。防御：CSRF Token、SameSite Cookie、检查 Referer/Origin。
追问延伸：
- CSP 是怎么工作的？
- 为什么 CSRF 不能跨域读取响应？
Q4: Webpack 和 Vite 的区别？ 「🟡 中级」
考察点：构建工具的演进。
参考答案：
- Webpack：基于 bundle，开发时也要打包所有模块，启动慢；生态成熟，插件丰富。
- Vite：开发时利用浏览器原生 ES Module，按需编译，启动极快；生产环境用 Rollup 打包。
- 优势对比：Vite 开发体验更好（HMR 快）；Webpack 配置灵活、兼容性更好。
追问延伸：
- Vite 为什么开发时不需要打包？
- Webpack 的 Loader 和 Plugin 有什么区别？
Q5: 什么是 Tree Shaking？ 「🟡 中级」
考察点：打包优化的核心概念。
参考答案：
- Tree Shaking 是打包工具移除未使用代码（dead code elimination）的过程。
- 前提：使用 ES Module（
import/export），因为 ESM 是静态分析的，打包工具能确定哪些导出没被使用。 - 配置：生产模式默认开启；确保代码无副作用（
sideEffects: falsein package.json）。
追问延伸：
- CommonJS 为什么不支持 Tree Shaking？
- 怎么确保自己的库能被 Tree Shake？
Q6: 前端 CI/CD 一般怎么做？ 「🟡 中级」
考察点：工程化与自动化意识。
参考答案：
- CI（持续集成）：代码提交后自动触发：lint → 单元测试 → 构建 → 产物上传。
- CD（持续部署）：产物部署到测试/生产环境（Nginx、CDN、OSS）。
- 工具：GitHub Actions、GitLab CI、Jenkins。
- 最佳实践：提交前本地 pre-commit hook（husky + lint-staged）、PR 触发 CI、合并后自动部署。
追问延伸：
- 怎么实现灰度发布？
- 前端回滚怎么做？
Q7: 什么是 Monorepo？ 「🔴 高级」
考察点：大型前端项目的组织方式。
参考答案：
- Monorepo：把多个项目/包放在同一个仓库中管理，共享依赖和工具链。
- 优势：代码复用方便、统一规范、原子提交（跨包修改）。
- 工具：pnpm workspace、Turborepo、Nx、Lerna。
- 挑战：构建缓存、依赖管理、CI 优化。
追问延伸：
- pnpm 的 workspace 怎么配置？
- Turborepo 的缓存机制是什么？