前端八股文 MOC

这张地图服务的是“面试回答能力”，不是完整知识正文。每个题目页都尽量只回答一个高频问法，并链接回相关知识笔记。

从哪里开始

1. 浏览器输入 URL 后发生了什么
2. Event Loop、宏任务和微任务怎么理解
3. browser-cache-types-304-memory-disk
4. service-worker-and-cache-api
5. 跨域是什么，CORS 预检请求是什么
6. 为什么说 Vite 比 Webpack 快

浏览器与 HTML

• 浏览器输入 URL 后发生了什么 - 浏览器输入 URL 后发生了什么
• browser-cache-types-304-memory-disk - 浏览器缓存分类与 304 / memory cache / disk cache
• 回流和重绘有什么区别 - 回流和重绘有什么区别
• src 和 href 的区别 - src 和 href 的区别
• defer 和 async 的区别 - defer 和 async 的区别
• 事件冒泡、事件捕获和事件委托怎么理解 - 事件冒泡、捕获和委托怎么理解
• 懒加载是什么，前端里一般怎么做 - 懒加载是什么，前端里一般怎么做
• 什么是虚拟列表，为什么它能优化长列表性能 - 什么是虚拟列表，为什么它能优化长列表性能
• preload、prefetch、preconnect 和 dns-prefetch 的区别 - preload、prefetch、preconnect 和 dns-prefetch 的区别
• 浏览器客户端存储 - 浏览器客户端存储
• Service Worker 与 Cache API - 可编程缓存与离线能力

CSS 与 UX

• BFC 是什么，有什么作用 - BFC 是什么，有什么作用
• display none、visibility hidden 和 opacity 0 的区别 - 三种隐藏方式的区别
• CSS 居中布局 - 居中布局怎么做，怎么按场景选
• Flex 和 Grid 的区别 - Flex 和 Grid 的区别
• rem、em 和 px 的区别 - rem、em 和 px 的区别
• css-position - position 几种定位方式的区别
• CSS 里的高斯模糊怎么用 - CSS 里的高斯模糊怎么用
• Fitts 定律和尼尔森十大交互原则在前端的应用 - Fitts 定律和尼尔森十大交互原则在前端的应用

JavaScript 高频题

• 闭包是什么，有什么应用和问题 - 闭包是什么，有什么应用和问题
• 原型链是什么，new 做了什么 - 原型链是什么，new 做了什么
• Event Loop、宏任务和微任务怎么理解 - Event Loop、宏任务和微任务怎么理解
• JavaScript 里 == 和 === 的区别 - == 和 === 的区别
• call、apply 和 bind 的区别 - call、apply、bind 的区别
• 防抖和节流的区别 - 防抖和节流的区别
• 虚拟 DOM 是什么，有什么用 - 虚拟 DOM 是什么，有什么用
• 为什么列表渲染一定要加 key - 为什么列表渲染一定要加 key
• 函数柯里化是什么，怎么实现和应用 - 函数柯里化是什么，怎么实现和应用

网络与安全

• HTTP 和 HTTPS 的区别 - HTTP 和 HTTPS 的区别
• GET 和 POST 的区别 - GET 和 POST 的区别
• 跨域是什么，CORS 预检请求是什么 - 跨域是什么，CORS 预检请求是什么
• Cookie、Session、Token、JWT 的区别 - Cookie、Session、Token、JWT 的区别
• Cookie 和 LocalStorage 的区别 - Cookie 和 LocalStorage 的区别
• XSS 和 CSRF 的区别 - XSS 和 CSRF 的区别
• 如果设计一个登录功能，前后端链路怎么讲 - 如果设计一个登录功能，前后端链路怎么讲
• WebSocket 心跳机制是什么，为什么重要 - WebSocket 心跳机制是什么，为什么重要
• 实时通信选型对比 - SSE/WebSocket/轮询怎么选

Vue 高频题

• React 状态模型 vs Vue3 响应式模型 - Vue3 响应式和 React state 模型差在哪
• Vue 里 computed 和 watch 的区别 - computed 和 watch 的区别
• Vue 里 ref 和 reactive 怎么选 - ref 和 reactive 怎么选
• Vue 里 v-if 和 v-show 的区别 - v-if 和 v-show 的区别
• Vue 里 nextTick 是什么，什么时候用 - nextTick 是什么，什么时候用
• Vue Composition API 和 Options API 的区别 - Composition API 和 Options API 的区别
• Vue 里 script setup 有什么好处 - Vue 里 script setup 有什么好处
• defineProps、defineEmits、defineModel 怎么理解 - defineProps、defineEmits、defineModel 怎么理解
• withDefaults、defineExpose、defineSlots 怎么理解 - withDefaults、defineExpose、defineSlots 怎么理解
• defineModel 和 v-model、props/emit 是什么关系 - defineModel 和 v-model、props/emit 是什么关系
• Vue 里什么时候用 defineModel，什么时候用 props/emit - Vue 里什么时候用 defineModel，什么时候用 props/emit
• Vue 里 watch 和 watchEffect 的区别 - watch 和 watchEffect 的区别
• Vue 里 provide 和 inject 适合什么场景 - provide 和 inject 适合什么场景
• Vue 里 props emit slot provide inject Pinia 应该怎么选 - props、emit、slot、provide/inject、Pinia 怎么选
• Vue 里 slot 适合什么场景，和 props 有什么区别 - slot 适合什么场景，和 props 有什么区别
• Vue 里 v-model 的本质是什么 - v-model 的本质是什么
• Pinia 和 provide inject 有什么区别，什么时候该用哪个 - Pinia 和 provide/inject 有什么区别
• Vue 里 props emit slot v-model provide inject Pinia 的区别 - props、emit、slot、v-model、provide/inject、Pinia 的区别

React 高频题

• React 状态模型 vs Vue3 响应式模型 - React state snapshot 和 Vue3 响应式有什么差别
• class component 和 function component 的区别 - class component 和 function component 的区别
• React Hooks 原理深挖
• React 里 useEffect 和 useLayoutEffect 的区别 - useEffect 和 useLayoutEffect 的区别
• React.memo、useMemo、useCallback 的区别 - React.memo、useMemo、useCallback 的区别
• React 里 setState useState 更新是同步还是异步 - 状态更新是同步还是异步
• React 里受控组件和非受控组件的区别 - 受控组件和非受控组件的区别
• React Context 能不能替代状态管理 - Context 能不能替代状态管理
• React 里 useRef 有什么用，和 state 有什么区别 - useRef 有什么用，和 state 有什么区别
• React 为什么会重渲染，怎么判断有没有优化价值 - React 为什么会重渲染，怎么判断有没有优化价值
• React.memo 什么时候值得用，什么时候不值得用 - React.memo 什么时候值得用
• 为什么不要滥用 useCallback - 为什么不要滥用 useCallback
• 为什么对象函数作为 props 会影响 React.memo - 为什么对象/函数作为 props 会影响 React.memo
• React 里父组件更新为什么会带动子组件重渲染 - 父组件更新为什么会带动子组件重渲染
• React 里状态应该上提还是下沉 - React 里状态应该上提还是下沉
• React 里长列表性能优化一般怎么做 - React 里长列表性能优化一般怎么做
• React 表单性能优化一般怎么做 - React 表单性能优化一般怎么做
• React 里 hydration mismatch 是什么，为什么会出现 - React 里 hydration mismatch 是什么，为什么会出现
• React 里 useEffect 会在服务端执行吗 - React 里 useEffect 会在服务端执行吗
• React 里 useLayoutEffect 会在服务端执行吗 - React 里 useLayoutEffect 会在服务端执行吗
• React 服务端组件和客户端组件有什么区别 - React 服务端组件和客户端组件有什么区别
• React SSR 里数据一般放在哪个阶段获取 - React SSR 里数据一般放在哪个阶段获取
• React 里哪些内容适合服务端直出，哪些适合客户端再请求 - React 里哪些内容适合服务端直出，哪些适合客户端再请求
• React SSR 里服务端组件、客户端组件和数据获取该怎么分工 - React SSR 里服务端组件、客户端组件和数据获取该怎么分工
• React 里 SSR、hydration 和服务端组件有什么区别 - React 里 SSR、hydration 和服务端组件有什么区别

工程化与性能

• 为什么说 Vite 比 Webpack 快 - 为什么说 Vite 比 Webpack 快
• Webpack 里 Loader 和 Plugin 的区别 - Loader 和 Plugin 的区别
• Webpack 打包流程怎么理解 - Webpack 打包流程怎么理解
• 前端交互状态统一处理 - loading、空态、失败态、超时和重复提交怎么统一设计
• 前端列表页状态处理 - 首次加载、刷新、空态、翻页和请求竞态怎么拆
• 前端表单提交状态处理 - 校验、提交中、防重复和失败恢复怎么设计
• 前端性能优化一般从哪些方面做 - 前端性能优化一般从哪些方面做
• 首屏优化一般怎么做 - 首屏优化一般怎么做
• CSR、SSR 和 SSG 有什么区别 - CSR、SSR 和 SSG 有什么区别
• Hydration 是什么，为什么 SSR 页面还需要它 - Hydration 是什么，为什么 SSR 页面还需要它
• 怎么理解首次可见和可交互时间的区别 - 怎么理解首次可见和可交互时间的区别
• large-file-upload-overview - 大文件上传怎么做，哈希有什么用（参考 大文件传输系统设计）
• 怎么学习底层原理 - 怎么学习底层原理

AI Web 工程师专项

• 你怎么理解 AI 前端工程师 - 你怎么理解 AI 前端工程师
• frontend-leaning-fullstack-ai-agent-engineer - 全栈偏前端的 AI Agent 岗位画像
• Cursor 和传统 IDE 有什么区别 - Cursor 和传统 IDE 有什么区别
• AI 生成代码有哪些风险，怎么兜底 - AI 生成代码有哪些风险，怎么兜底
• AI 更适合哪些前端任务 - AI 更适合哪些前端任务
• 你怎么理解 AICR - 你怎么理解 AICR
• MCP 是什么，有什么价值 - MCP 是什么，有什么价值
• skills-in-ai - Skills 是什么，为什么重要
• Agent 在前端研发里是什么 - Agent 在前端研发里是什么
• AI 场景里 SSE 和 WebSocket 怎么选 - AI 场景里 SSE 和 WebSocket 怎么选
• AI 对话流式输出前端怎么做 - AI 对话流式输出前端怎么做
• AI 结果不稳定时前端怎么做体验设计 - AI 结果不稳定时前端怎么做体验设计
• 什么是 AI 工程资产，为什么它能提升团队效率 - 什么是 AI 工程资产，为什么它能提升团队效率
• 物料库和组件库有什么区别 - 物料库和组件库有什么区别
• AI 对话产品前端性能怎么优化 - AI 对话产品前端性能怎么优化
• Function Calling 参数校验与重试机制 - Agent 工具调用参数校验、repair 与兜底
• SSE 流式输出的暂停与中断 - 流式对话中暂停/取消的状态同步
• 多模型 LLM Provider 抽象层 - 多模型统一管理与路由
• AI 助手首字延迟优化 - 首字延迟全链路排查
• LLM Token 成本优化策略 - 模型路由与缓存降本
• TypeScript 高级类型 - 条件类型、函数重载、可辨识联合

项目与行为题

• STAR 行为题结构 - 项目难点、行为题和追问怎么讲得有闭环

相关 MOC

• frontend-basics-moc
• 前端工程化 MOC
• Vue MOC
• react-moc
• 计算机基础面试 MOC

备考资源

• [[tonghuashunxiaozhao]] - 同花顺 AI 前端笔试+面试准备
• [[yigexiaozhao]] - 亿格云前端面试准备
• [[duoyixiaozhao]] - 多益网络前端笔试面试准备
• [[weibuxiaozhao]] - 微步在线前端面试准备
• [[yuehanxiaozhao]] - 北京跃瀚科技前端笔试面试准备
• [[tailongxiaozhao]] - 泰隆银行前端春招准备
• [[fanruanxiaozhao]] - 帆软前端笔试面试准备
• [[shunfengxiaozhao]] - 顺丰前端面试准备
• [[cmbxiaozhao]] - 招商银行前端笔试面试准备
• [[cmcc-jinhua-web-xiaozhao|中国移动浙江金华系统开发工程师（Web端）春招复试准备]]
• [[ruilian-jishu-xiaozhao-web-qianduan-kaifa-gongchengshi|睿联技术 Web 前端开发工程师校招笔试面试准备]]
• [[ningmeng-weiqu-xiaozhao-web-qianduan-kaifa-gongchengshi|柠檬微趣 Web 前端开发工程师校招笔试面试准备]]
• [[bochu-dianzi-xiaozhao-qianduan-kaifa-gongchengshi-j10388|柏楚电子前端开发工程师 J10388 校招笔试面试准备]]
• [[bank-tech-interview-comparison]] - 银行与科技企业前端面试对比
• 前端笔试训练平台对比 - 笔试/选择题训练平台对比与推荐
• 牛客 - 公司真题与专项练习平台
• bfe-dev - BFE.dev（bigfrontend.dev）前端面试刷题平台

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC