前端八股文 MOC

前端面试高频题的导航入口，按浏览器、CSS、JavaScript、网络、框架和工程化组织常见八股题。

#frontend #moc #growing

前端八股文 MOC

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

统一题库入口

前端与 AI 前端面试题库 — 全量可折叠题卡、题源、30 秒回答与连续追问；
技术面试回答框架；
题源、置信度与答案依据。

本 MOC 继续负责导航长期知识；题目的来源、口述答案和训练优先级由独立题库负责。

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

从哪里开始

浏览器与 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 做了什么
浏览器如何协调 task、microtask 与渲染 - 建立 task、microtask checkpoint 与 rendering opportunity 的正式模型
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 行为题结构 - 项目难点、行为题和追问怎么讲得有闭环

备考资源

[private note] - 同花顺 AI 前端笔试+面试准备
[private note] - 亿格云前端面试准备
[private note] - 多益网络前端笔试面试准备
[private note] - 微步在线前端面试准备
[private note] - 北京跃瀚科技前端笔试面试准备
[private note] - 泰隆银行前端春招准备
[private note] - 帆软前端笔试面试准备
[private note] - 顺丰前端面试准备
[private note] - 招商银行前端笔试面试准备
[private note]
[private note]
[private note]
[private note]
[private note] - 银行与科技企业前端面试对比
前端笔试训练平台对比 - 笔试/选择题训练平台对比与推荐
牛客 - 公司真题与专项练习平台
bfe-dev - BFE.dev（bigfrontend.dev）前端面试刷题平台

前端八股文 MOC

前端八股文 MOC

知识总览

统一题库入口

从哪里开始

浏览器与 HTML

CSS 与 UX

JavaScript 高频题

网络与安全

Vue 高频题

React 高频题

工程化与性能

AI Web 工程师专项

项目与行为题

相关 MOC

备考资源

键盘导航

前端八股文 MOC

知识总览

统一题库入口

从哪里开始

浏览器与 HTML

CSS 与 UX

JavaScript 高频题

网络与安全

Vue 高频题

React 高频题

工程化与性能

AI Web 工程师专项

项目与行为题

相关 MOC

备考资源

Related notes