准备去面前端岗？无论是中级还是高级，这几类问题几乎逢面必到：有的考 JS 机制，有的看性能优化，还有的看你如何组织代码与协作落地。
下面我把最常见的 7 题拆开讲：怎么答、答到哪、答出深度——不仅能过面试，更能反哺你的日常开发。
1) 🍪 Cookies vs localStorage vs sessionStorage
怎么说：
- Cookie：主要用于浏览器与服务器通信（如会话标识）。大小约 4KB，每个请求都会携带（除非
SameSite/Path/Domain限制）。适合短小关键数据与服务端判断。 - localStorage：纯客户端持久化，容量通常 5–10MB，除非手动清理否则不失效。不随请求发送。
- sessionStorage：同 localStorage 的键值 API，但只在当前 Tab 会话有效；Tab 关闭即清空。
💡加分点（落地场景）：
- 主题偏好/引导完成状态 → localStorage。
- 多步骤表单的临时草稿 → sessionStorage。
- 跨路由保持登录态（含 HttpOnly、Secure、SameSite） → Cookie（因此登录态更安全，然而需要服务端配合，并且要兼顾 CSRF 策略）。
2) React 性能如何优化？
怎么说：
- 代码分割：
React.lazy + Suspense/ 路由级分包，配合 Webpack tree-shaking 与 bundle 分析。 - 避免无意义渲染：
React.memo、useMemo、useCallback，但注意不要过度 memo 化；因此要以测量为准。 - 资源与首屏：图片懒加载、
IntersectionObserver、压缩 / WebP / AVIF、HTTP/2、CDN。 - 主线程负担：把重计算挪到 Web Worker；列表虚拟化；去掉同步阻塞。
- 数据策略：合理缓存（SWR/React Query），减少瀑布流式请求；并且在 SSR/流式渲染中优先上屏关键块。
💡加分点（成绩单）： 讲你如何把 TTI/LCP/FID 优化到某个数值；因此能促进转化，进而带来业务价值。
3) 如何防止 XSS？
怎么说：
- 默认不信任任何输入：渲染前转义特殊字符（
< > " ' &）。 - 别滥用
dangerouslySetInnerHTML；必须用时，配合 DOMPurify 等做严格白名单。 - 拒绝
eval/动态拼脚本；限制内联事件。 - CSP（内容安全策略）：
script-src 'self' ...+nonce/hash，从源头阻断恶意脚本执行。 - 框架层保护：React 默认会对插值做转义（然而这并不覆盖你显式插入的 HTML；因此仍需显式清洗）。
💡加分点： 结合一次真实富文本评论/活动页的治理案例：先定位注入点，再落 CSP，最后加输入清洗与监控告警。
前端×AI 实战笔记：CSS 动效 / React Hooks / Vue / LLM / Python。案例为主，持续更新；
4) 大型项目如何保证代码质量？
怎么说：
- 规范即工具：ESLint + Prettier（保存即格式化），在 CI 中强制校验。
- 类型系统：全量或增量引入 TypeScript，因此能提前暴露边界问题；并且提升协作可读性。
- 提交门禁：
husky + lint-staged预提交校验，commit message 规范（如 Conventional Commits）。 - 结构化：按 feature/领域划分目录；UI/业务逻辑/数据层分离。
- UI 一致性：Storybook/Chromatic 做组件回归与可视化快照。
💡加分点： 提到ADR（架构决策记录）与代码所有权机制；因此能减少“谁来维护”的扯皮。
5) 可扩展前端如何设计？
怎么说：
- 自顶向下拆分：遵循原子/组合思想，按功能域组织（如
features/orders/*）。 - 状态治理：从 局部 state / useReducer / Context 起步；复杂跨域数据再上 Redux/Zustand/Jotai；并且利用数据层抽象（API client、常量、hooks）。
- 可演进加载：路由级懒加载、按需拆包；对低端设备启用自适应加载策略。
- 边界与契约：公共组件/工具库独立包管理；因此升级/回滚更可控。
💡加分点： 讲一次真实的 SPA/多角色控制台落地：为何这么分层、如何演进、如何监控。
6) 解释浏览器渲染流水线
怎么说：
- 解析：HTML → DOM，CSS → CSSOM，合成 Render Tree。
- 布局：计算几何与位置（Layout/Reflow）。
- 绘制：把样式绘成位图（Paint）。
- 合成：图层（Compositing）在合成线程合成到屏幕。
- 避免抖动：批量读写 DOM（如
requestAnimationFrame）、缓存测量结果；因为Reflow 代价高于 Repaint，所以要减少强制同步布局（如读取offsetHeight后立刻写样式）。
💡加分点： 说明你如何用 Performance/Timeline、Rendering 面板定位合成层、长任务（Long Task）与样式计算瓶颈。
7) 解释 JavaScript 事件循环（Event Loop）
怎么说：
- JS 单线程，事件循环负责调用栈与回调队列的调度。
- 执行顺序：同步任务 → 微任务（microtask：Promise then/queueMicrotask） → 宏任务（macrotask：setTimeout、MessageChannel 等）。
async/await是 Promise 的语法糖：await之后的继续执行会排进微任务队列。- 一旦阻塞主线程（重计算/同步 XHR）就会卡 UI。
💡加分点（实战）： 举一个竞态/顺序问题的修复：先确认时序，再把依赖改为 await/Promise.allSettled，最后补上超时与取消。
结尾：别背答案，要讲“为什么”
好的面试并不只看“标准答案”。面试官想看你如何思考、如何取舍、如何把复杂讲清。 建议你把上面 7 题按下面这样练习：
- 先写出你自己的“一句话版本”；
- 再补两条“权衡”与一段“实战经历”；
- 最后准备一份“指标成绩单”（如 LCP/FID/错误率/发布频率），因此你的回答更可度量、并且更有说服力。
如果这份清单对你有帮助，转给也在准备面试的同学；你碰过的高频题，也欢迎补充到清单里。祝你面试顺利！
交流
首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答
本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
