八股提纲版

仅保留题目与分类，适合自测、查漏补缺。

HTML / CSS

HTML 基础

什么是 HTML 语义化？为什么语义化有利于 SEO 和可访问性？
<!DOCTYPE html> 的作用是什么？什么是标准模式和怪异模式？
meta viewport 的作用是什么？移动端为什么需要设置 viewport？
script 的 async 和 defer 有什么区别？分别适合什么场景？
preload、prefetch、dns-prefetch 分别解决什么问题？

CSS 基础

CSS 盒模型是什么？标准盒模型和 border-box 有什么区别？
什么是 BFC？如何触发 BFC？BFC 能解决哪些布局问题？
什么是层叠上下文？为什么有时 z-index 不生效？
CSS 选择器优先级如何计算？为什么不建议滥用 !important？
CSS 中 px、em、rem、vw、vh 有什么区别？

布局与响应式

Flex 布局的核心概念是什么？主轴和交叉轴如何控制？
Grid 布局和 Flex 布局有什么区别？分别适合什么场景？
如何实现元素水平垂直居中？有哪些常见方案？
什么是响应式布局？常见实现方式有哪些？
响应式布局中，断点应该按设备型号设置，还是按内容变化设置？为什么？
移动端优先和桌面端优先的 CSS 写法有什么区别？
clamp()、min()、max() 在响应式布局中可以解决什么问题？
移动端适配有哪些方案？rem、vw、媒体查询如何选择？

渲染与动画

什么是回流和重绘？它们有什么区别？
哪些 CSS 属性会触发回流？哪些属性更适合做动画？
transition 和 animation 有什么区别？
为什么动画推荐使用 transform 和 opacity？

JavaScript

类型与基础

JavaScript 有哪些数据类型？原始类型和引用类型有什么区别？
typeof、instanceof、Object.prototype.toString.call 有什么区别？
为什么 typeof null 的结果是 "object"？
== 和 === 有什么区别？为什么工程中更推荐 ===？
Object.is 和 === 有什么区别？
var、let、const 有什么区别？
什么是变量提升？什么是暂时性死区？

作用域与对象

什么是作用域和作用域链？
什么是闭包？闭包有哪些应用场景和风险？
什么是原型和原型链？
构造函数的 prototype 和实例的 __proto__ 有什么关系？
this 的绑定规则有哪些？
箭头函数的 this 和普通函数有什么区别？
call、apply、bind 有什么区别？
new 操作符内部做了什么？

异步与执行机制

什么是 Event Loop？浏览器事件循环的执行顺序是什么？
什么是宏任务和微任务？常见宏任务、微任务有哪些？
Promise.then、setTimeout、同步代码的执行顺序如何判断？
Promise 有哪些状态？状态如何流转？
Promise.then 为什么可以链式调用？
Promise.all、Promise.race、Promise.allSettled 有什么区别？
async/await 和 Promise 是什么关系？
await 后面的代码为什么会进入微任务？
如何处理多个异步请求的串行、并行和并发控制？

常见手写

如何手写 Promise.all？
如何实现深拷贝？如何处理循环引用？
如何实现防抖和节流？它们适合什么场景？
如何手写 call、apply、bind？
如何手写 new？
如何实现数组去重、数组扁平化、柯里化？

模块化与内存

CommonJS 和 ESM 有什么区别？
为什么 ESM 更利于 Tree Shaking？
JavaScript 的垃圾回收机制是什么？
常见的内存泄漏场景有哪些？如何排查？

TypeScript

类型系统

TypeScript 的核心价值是什么？
interface 和 type 有什么区别？分别适合什么场景？
any、unknown、never 有什么区别？
为什么更推荐用 unknown 处理外部输入？
什么是类型收窄？常见类型收窄方式有哪些？

泛型与高级类型

什么是泛型？泛型解决什么问题？
keyof、typeof、索引访问类型分别有什么作用？
什么是联合类型和交叉类型？
什么是可辨识联合？适合建模哪些业务状态？
Partial、Required、Readonly、Pick、Omit、Record 如何实现？
infer 的作用是什么？如何实现 ReturnType 和 Awaited？

浏览器原理

页面加载与渲染

从输入 URL 到页面展示，完整过程发生了什么？
浏览器如何解析 HTML、CSS、JavaScript？
什么是 DOM、CSSOM 和渲染树？
CSS 为什么会阻塞渲染？
JavaScript 为什么可能阻塞 HTML 解析？
浏览器的布局、绘制、合成分别做什么？

DOM 与事件

DOM 事件流分为哪几个阶段？
什么是事件捕获和事件冒泡？
什么是事件委托？适合什么场景？
event.target 和 event.currentTarget 有什么区别？

存储与线程

Cookie、localStorage、sessionStorage、IndexedDB 有什么区别？
为什么敏感信息不建议直接放在 localStorage？
什么是 Web Worker？适合解决什么问题？
Web Worker 为什么不能直接操作 DOM？

Vue

Vue 基础

Vue2 和 Vue3 有哪些核心区别？
Vue3 为什么使用 Proxy 替代 Object.defineProperty？
Vue 的响应式原理是什么？
什么是依赖收集 track 和派发更新 trigger？
ref 和 reactive 有什么区别？
为什么 reactive 解构后可能丢失响应式？

Vue 计算与更新

computed 和 watch 有什么区别？
watch 和 watchEffect 有什么区别？
Vue 的 nextTick 有什么作用？为什么 DOM 更新是异步的？
Vue 组件更新流程大致是什么？

Vue 渲染与组件

什么是 虚拟 DOM？Vue 为什么需要虚拟 DOM？
Vue 的 Diff 算法大致如何工作？
key 在列表渲染中有什么作用？
v-if 和 v-show 有什么区别？
keep-alive 的作用和原理是什么？
Vue 组件通信方式有哪些？
props 能否在子组件中直接修改？为什么？
provide/inject 适合什么场景？

Vue 状态管理

Vuex 和 Pinia 有什么区别？
Pinia 为什么更适合 Vue3？
什么时候需要全局状态管理？

React

React 基础

React 的核心思想是什么？
什么是声明式 UI？
什么是虚拟 DOM？虚拟 DOM 一定更快吗？
React 和 Vue 在设计思路上有什么区别？

React 渲染机制

什么是 Fiber？Fiber 解决了什么问题？
React 更新为什么分为 render 阶段和 commit 阶段？
render 阶段和 commit 阶段有什么区别？
React Diff 算法的核心假设是什么？
React 列表中的 key 有什么作用？为什么不建议用 index 作为 key？

Hooks

Hooks 的基本原理是什么？
为什么 Hooks 不能写在条件、循环和嵌套函数中？
useState 的状态更新为什么可能是异步或批处理的？
useEffect 的执行时机是什么？
useEffect 的清理函数什么时候执行？
useEffect 和 useLayoutEffect 有什么区别？
useMemo、useCallback、React.memo 分别解决什么问题？
什么情况下不应该滥用 memo 类优化？

React 组件与状态

什么是受控组件和非受控组件？
React 中为什么不能直接修改 state？
Context 适合什么场景？有什么性能问题？
React 合成事件是什么？和原生事件有什么区别？
React 事件委托机制有什么变化？

网络与安全

HTTP 基础

常见 HTTP 状态码有哪些？分别表示什么？
301 和 302 有什么区别？
401 和 403 有什么区别？
HTTP 常见请求方法有哪些？GET 和 POST 有什么区别？
什么是幂等性？哪些 HTTP 方法通常是幂等的？

HTTP 缓存

什么是强缓存和协商缓存？
Cache-Control 和 Expires 有什么区别？
ETag 和 Last-Modified 有什么区别？
为什么静态资源常使用 hash 文件名加长期缓存？
为什么 HTML 通常不设置长期强缓存？

协议演进

HTTP/1.1、HTTP/2、HTTP/3 有什么区别？
HTTP/2 的多路复用解决了什么问题？
HTTP/3 为什么基于 QUIC？
TCP 和 UDP 有什么区别？
TCP 三次握手和四次挥手的过程是什么？

HTTPS 与 DNS

HTTPS 解决了 HTTP 的哪些安全问题？
TLS 握手大致过程是什么？
为什么 TLS 传输数据主要使用对称加密？
DNS 解析过程是什么？
如何优化 DNS 解析耗时？

跨域与安全

什么是同源策略？
什么是 CORS？服务端需要配置哪些响应头？
什么是 CORS 预检请求？什么时候会触发？
JSONP 为什么可以跨域？它有什么缺点？
什么是 XSS？如何防御 XSS？
什么是 CSRF？如何防御 CSRF？
什么是点击劫持？如何防御？

登录与实时通信

Cookie、Session、Token、JWT 有什么区别？
JWT 的优缺点是什么？如何处理续期和吊销？
WebSocket 和 SSE 有什么区别？
WebSocket 适合什么场景？SSE 适合什么场景？
前端如何处理请求取消和响应竞态？

性能优化

性能指标

FCP、LCP、CLS、INP 分别衡量什么？
如何定位页面首屏慢的问题？
如何判断性能瓶颈在网络、资源、脚本还是渲染？

首屏与资源优化

前端首屏优化有哪些常见手段？
如何减少关键渲染路径上的阻塞资源？
什么是代码分割？按路由拆包和按组件拆包有什么区别？
什么是 Tree Shaking？它依赖什么条件？
图片优化有哪些手段？
首屏图片为什么不一定适合懒加载？

渲染与交互优化

什么是长任务？长任务为什么会影响交互？
如何优化大量 DOM 渲染？
什么是虚拟列表？它的核心原理是什么？
固定高度虚拟列表和动态高度虚拟列表有什么区别？
如何减少 React 或 Vue 中的无效重渲染？
Web Worker 能用于哪些性能优化场景？

内存与监控

前端常见内存泄漏有哪些？
如何使用 Chrome DevTools 排查内存问题？
前端监控通常包括哪些内容？
错误监控、性能监控、接口监控分别采集什么？
一个完整的性能优化闭环应该包含哪些步骤？

工程化

构建工具

Webpack 的构建流程是什么？
Webpack 中 entry、output、loader、plugin、chunk 分别是什么？
Vite 为什么开发环境启动快？
Vite 和 Webpack 有什么区别？如何选型？
Rollup 更适合什么场景？

Loader / Plugin / 编译

Loader 和 Plugin 有什么区别？
Babel 的作用是什么？
preset-env 如何决定转换哪些语法？
SWC 和 Babel 有什么区别？
什么是 Source Map？生产环境使用 Source Map 要注意什么？

包管理与规范

npm、yarn、pnpm 有什么区别？
pnpm 为什么能避免幽灵依赖？
什么是 lockfile？为什么需要提交 lockfile？
ESLint、Prettier、Stylelint 分别解决什么问题？
为什么要把规范接入 pre-commit 和 CI？

Monorepo 与 CI/CD

什么是 Monorepo？有什么优缺点？
pnpm workspace、Turborepo、Nx 分别解决什么问题？
什么是 CI/CD？
前端流水线通常包含哪些步骤？
如何保证前端构建产物可追踪、可回滚？

微前端

什么是微前端？适合什么业务场景？
微前端有哪些常见方案？
微前端如何做路由隔离、样式隔离、状态通信？
微前端如何处理依赖共享和性能问题？

状态管理与架构

状态管理

前端状态可以分为哪几类？
什么状态适合放本地组件？什么状态适合放全局 store？
什么是服务端状态？它和普通全局状态有什么区别？
Redux、Zustand、Pinia 分别适合什么场景？
React Query / SWR 解决了什么问题？

组件与架构

如何设计一个可复用组件？
展示组件和容器组件有什么区别？
基础组件为什么不应该耦合太多业务逻辑？
如何设计前端权限系统？
路由权限、菜单权限、按钮权限、数据权限有什么区别？
为什么前端权限不能代替后端权限？

错误处理

React Error Boundary 能捕获哪些错误？不能捕获哪些错误？
Vue 中如何处理组件错误和全局错误？
前端异常如何上报和聚合？

测试

测试类型

什么是单元测试？适合测试哪些内容？
什么是组件测试？应该关注实现细节还是用户行为？
什么是 E2E 测试？适合覆盖哪些核心链路？
单元测试、组件测试、E2E 测试如何取舍？

测试工具与 Mock

Jest、Vitest、Testing Library 分别适合什么场景？
Testing Library 为什么推荐从用户视角查询元素？
Mock 的作用是什么？
MSW 和直接 mock fetch 有什么区别？

Node.js 与 SSR

Node.js

Node.js 事件循环和浏览器事件循环有什么区别？
process.nextTick 和 Promise 微任务的优先级有什么区别？
Express 和 Koa 有什么区别？
什么是 Koa 的洋葱模型？
Node 中间件适合处理哪些事情？

SSR / SSG

什么是 SSR？SSR 的优缺点是什么？
SSR 的数据预取、状态注水、水合分别是什么？
什么是水合不一致？如何避免？
CSR、SSR、SSG 有什么区别？
什么场景适合 SSR？什么场景适合 SSG？

移动端与小程序

移动端

移动端 1px 问题是什么？如何解决？
什么是安全区域 safe area？如何适配刘海屏和全面屏？
移动端点击延迟是什么？现代浏览器如何处理？
如何处理移动端滚动穿透？
touch 事件和 click 事件有什么区别？

小程序

小程序逻辑层和视图层如何通信？
为什么频繁 setData 会影响性能？
小程序性能优化有哪些常见手段？
小程序和 H5 在运行环境上有什么区别？

手写与算法

JS 手写题

手写 Promise.all。
手写并发控制函数。
手写防抖函数。
手写节流函数。
手写深拷贝，并处理循环引用。
手写发布订阅 EventBus。
手写 LRU 缓存。
手写数组去重。
手写数组扁平化。
手写柯里化函数。
手写 call、apply、bind。
手写 new。

算法题

数组和字符串常见题型有哪些？
哈希表适合解决哪些问题？
栈和队列适合解决哪些问题？
双指针适合解决哪些问题？
滑动窗口适合解决哪些问题？
链表题常见操作有哪些？
二叉树遍历有哪些方式？
如何分析时间复杂度和空间复杂度？

项目深挖

项目介绍

如何介绍一个前端项目？
项目介绍为什么不能只罗列技术栈？
如何讲清楚自己的职责和贡献？
如何证明项目中的技术方案是有效的？

技术选型

如何说明技术选型的理由？
技术选型需要考虑哪些维度？
如何回答“为什么不用另一个方案”？
如何描述方案的收益和代价？

复杂场景

如何封装复杂表格组件？
如何封装复杂表单组件？
如何设计上传组件？
如何设计权限系统？
如何设计前端监控系统？
如何做前端性能治理？

线上问题

线上问题排查的一般流程是什么？
如何定位线上白屏问题？
如何定位接口异常问题？
如何定位性能突然变差的问题？
如何设计回滚和灰度策略？
修复线上问题后如何避免再次发生？

复习优先级

第一优先级

JavaScript 执行机制、闭包、原型链、this、Promise、Event Loop。
Vue / React 响应式、渲染机制、Diff、组件通信、Hooks。
HTTP 缓存、跨域、HTTPS、XSS、CSRF、浏览器渲染。

第二优先级

TypeScript 泛型、高级类型、工具类型。
Webpack / Vite、Tree Shaking、代码分割、Source Map。
性能指标、首屏优化、长列表、内存泄漏、前端监控。

第三优先级

SSR / SSG、微前端、CI/CD、Monorepo、测试体系。
Node.js、小程序、移动端适配、复杂项目复盘。
高频手写题和常见算法题。

常见问题分类汇总in 22 minutes

高频八股合集8 hours ago