前端八股文 MOC

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

从哪里开始

1. browser-url-to-page-interview-question
2. event-loop-interview-question
3. browser-cache-types-304-memory-disk
4. service-worker-and-cache-api
5. cross-origin-and-cors-interview-question
6. vite-vs-webpack-speed-interview-question

浏览器与 HTML

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

CSS 与 UX

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

JavaScript 高频题

• javascript-closure-interview-question - 闭包是什么，有什么应用和问题
• javascript-prototype-chain-interview-question - 原型链是什么，new 做了什么
• event-loop-interview-question - Event Loop、宏任务和微任务怎么理解
• equality-operators-interview-question - == 和 === 的区别
• call-apply-bind-interview-question - call、apply、bind 的区别
• debounce-vs-throttle-interview-question - 防抖和节流的区别
• virtual-dom-interview-question - 虚拟 DOM 是什么，有什么用
• key-attribute-interview-question - 为什么列表渲染一定要加 key
• curry-interview-question - 函数柯里化是什么，怎么实现和应用

网络与安全

• http-vs-https-interview-question - HTTP 和 HTTPS 的区别
• get-vs-post-interview-question - GET 和 POST 的区别
• cross-origin-and-cors-interview-question - 跨域是什么，CORS 预检请求是什么
• cookie-session-token-jwt-interview-question - Cookie、Session、Token、JWT 的区别
• Cookie 和 LocalStorage 的区别 - Cookie 和 LocalStorage 的区别
• xss-vs-csrf-interview-question - XSS 和 CSRF 的区别
• login-flow-interview-question - 如果设计一个登录功能，前后端链路怎么讲
• websocket-heartbeat-interview-question - WebSocket 心跳机制是什么，为什么重要
• 实时通信选型对比 - SSE/WebSocket/轮询怎么选

Vue 高频题

• React 状态模型 vs Vue3 响应式模型 - Vue3 响应式和 React state 模型差在哪
• vue-computed-vs-watch-interview-question - computed 和 watch 的区别
• vue-ref-vs-reactive-interview-question - ref 和 reactive 怎么选
• vue-v-if-vs-v-show-interview-question - v-if 和 v-show 的区别
• vue-next-tick-interview-question - nextTick 是什么，什么时候用
• vue-composition-api-vs-options-api-interview-question - Composition API 和 Options API 的区别
• vue-script-setup-interview-question - Vue 里 script setup 有什么好处
• vue-script-setup-macros-interview-question - defineProps、defineEmits、defineModel 怎么理解
• vue-script-setup-advanced-macros-interview-question - withDefaults、defineExpose、defineSlots 怎么理解
• vue-define-model-interview-question - defineModel 和 v-model、props/emit 是什么关系
• vue-define-model-vs-props-and-emit-selection-interview-question - Vue 里什么时候用 defineModel，什么时候用 props/emit
• vue-watch-vs-watch-effect-interview-question - watch 和 watchEffect 的区别
• vue-provide-inject-interview-question - provide 和 inject 适合什么场景
• vue-component-communication-selection-interview-question - props、emit、slot、provide/inject、Pinia 怎么选
• vue-slot-interview-question - slot 适合什么场景，和 props 有什么区别
• vue-v-model-interview-question - v-model 的本质是什么
• pinia-vs-provide-inject-interview-question - Pinia 和 provide/inject 有什么区别
• vue-communication-comparison-interview-question - props、emit、slot、v-model、provide/inject、Pinia 的区别

React 高频题

• React 状态模型 vs Vue3 响应式模型 - React state snapshot 和 Vue3 响应式有什么差别
• class-vs-function-component-interview-question - class component 和 function component 的区别
• React Hooks 原理深挖
• react-use-effect-vs-use-layout-effect-interview-question - useEffect 和 useLayoutEffect 的区别
• react-memo-use-memo-use-callback-interview-question - React.memo、useMemo、useCallback 的区别
• react-state-update-sync-vs-async-interview-question - 状态更新是同步还是异步
• react-controlled-vs-uncontrolled-components-interview-question - 受控组件和非受控组件的区别
• react-context-replace-state-management-interview-question - Context 能不能替代状态管理
• react-use-ref-interview-question - useRef 有什么用，和 state 有什么区别
• react-rerender-interview-question - React 为什么会重渲染，怎么判断有没有优化价值
• react-memo-when-to-use-interview-question - React.memo 什么时候值得用
• react-use-callback-overuse-interview-question - 为什么不要滥用 useCallback
• react-prop-identity-interview-question - 为什么对象/函数作为 props 会影响 React.memo
• react-parent-child-rerender-interview-question - 父组件更新为什么会带动子组件重渲染
• react-state-lifting-vs-state-colocation-interview-question - React 里状态应该上提还是下沉
• react-list-performance-optimization-interview-question - React 里长列表性能优化一般怎么做
• react-form-performance-interview-question - React 表单性能优化一般怎么做
• react-hydration-mismatch-interview-question - React 里 hydration mismatch 是什么，为什么会出现
• react-use-effect-run-on-server-interview-question - React 里 useEffect 会在服务端执行吗
• react-use-layout-effect-run-on-server-interview-question - React 里 useLayoutEffect 会在服务端执行吗
• react-server-vs-client-components-interview-question - React 服务端组件和客户端组件有什么区别
• react-ssr-data-fetching-interview-question - React SSR 里数据一般放在哪个阶段获取
• react-server-render-vs-client-request-boundary-interview-question - React 里哪些内容适合服务端直出，哪些适合客户端再请求
• react-ssr-architecture-boundaries-interview-question - React SSR 里服务端组件、客户端组件和数据获取该怎么分工
• react-ssr-vs-hydration-vs-server-components-interview-question - React 里 SSR、hydration 和服务端组件有什么区别

工程化与性能

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

AI Web 工程师专项

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

项目与行为题

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

相关 MOC

• frontend-basics-moc
• frontend-engineering-moc
• vue-moc
• react-moc
• interview-cs-fundamentals-moc

备考资源

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

Related notes

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