网上一篇篇面经知识点太过散乱，有的又过于落后，所以我诞生了想要自己总结一份高频考点的想法。 这份清单将随着笔者的面试进程持续修改完善，并且将在后面一系列的文章展开讲解。
前端八股知识点可以分为：
-
html+css+javascript/typesctipt
-
webpack/vite相关的工程化知识
-
计算机网络，浏览器原理
-
Vue/React框架相关
-
性能优化
-
代码托管平台，提交与部署，CI/CD
这是一份自查表，当你看到关键词可以想起对应的知识点，那么恭喜你的八股部分已经无懈可击了！
前端手撕题：juejin.cn/post/735607…
前端输入输出：juejin.cn/post/695904…
计网与浏览器原理： juejin.cn/post/735130…
React:juejin.cn/post/743993…
前端面试大纲（完整版）
一、HTML
基础知识
- HTML5新特性和新标签
- 语义化标签的使用和意义
- DOCTYPE的作用
- meta标签的使用
- 行内元素、块级元素、空元素
- src和href的区别
- script标签的defer和async
- iframe的优缺点
表单相关
- 表单元素类型
- 表单验证（required、pattern等）
- input的type类型
- label标签的作用
HTML5 API
- localStorage和sessionStorage
- IndexedDB
- WebSocket
- Geolocation
- Canvas和SVG
- Drag and Drop API
- History API
- File API
- Web Worker
- Service Worker
其他
- SEO优化
- 无障碍访问（ARIA）
- 页面可见性API
二、CSS
基础
- CSS选择器及优先级
- 继承属性和非继承属性
- 盒模型（标准盒模型、IE盒模型）
- box-sizing属性
- display属性值
- position定位方式
- z-index层叠上下文
- BFC（块级格式化上下文）
- IFC（行内格式化上下文）
布局
- 浮动和清除浮动
- Flexbox布局
- Grid布局
- 多列布局
- 水平垂直居中方法
- 圣杯布局和双飞翼布局
- 两栏布局、三栏布局
响应式设计
- 媒体查询
- rem、em、vw、vh单位
- 移动端适配方案
- 1px问题解决方案
- 响应式图片
CSS3特性
- 过渡（transition）
- 动画（animation）
- 变换（transform）
- 渐变（gradient）
- 阴影（box-shadow、text-shadow）
- 圆角（border-radius）
- 滤镜（filter）
- 混合模式（mix-blend-mode）
预处理器
- Sass/Less/Stylus
- CSS Modules
- CSS-in-JS
性能优化
- CSS加载性能优化
- 减少重排和重绘
- will-change属性
- contain属性
- GPU加速
其他
- CSS变量（自定义属性）
- 伪类和伪元素
- 选择器性能
- CSS架构方法论（BEM、OOCSS等）
三、JavaScript基础
数据类型
- 基本数据类型和引用数据类型
- 类型判断（typeof、instanceof、Object.prototype.toString）
- 类型转换（显式、隐式）
- null和undefined的区别
- Symbol类型
- BigInt类型
变量和作用域
- var、let、const的区别
- 作用域和作用域链
- 词法作用域
- 暂时性死区
- 变量提升和函数提升
闭包
- 闭包的概念和原理
- 闭包的应用场景
- 闭包的内存问题
this指向
- this的几种绑定规则
- call、apply、bind的区别和实现
- 箭头函数的this
- 严格模式下的this
原型和继承
- 原型和原型链
- constructor属性
- instanceof原理
- new操作符的执行过程
- 继承的多种方式（原型链、构造函数、组合、寄生组合等）
- ES6 class语法
对象和数组
- 对象的创建方式
- 对象的属性描述符
- Object的常用方法
- 数组的常用方法
- 类数组对象
- 数组去重、扁平化
- 深拷贝和浅拷贝
函数
- 函数声明和函数表达式
- 立即执行函数（IIFE）
- 高阶函数
- 纯函数
- 函数柯里化
- 函数节流和防抖
- 递归和尾递归优化
ES6+新特性
- 箭头函数
- 解构赋值
- 模板字符串
- 扩展运算符和剩余参数
- 默认参数
- Set和Map
- WeakSet和WeakMap
- Proxy和Reflect
- 迭代器和生成器
- 装饰器（提案）
- 可选链（?.）
- 空值合并运算符（??）
四、JavaScript进阶
异步编程
- 同步和异步的区别
- 回调函数
- Promise原理和使用
- Promise.all、Promise.race等方法
- async/await
- Generator函数
- 错误处理（try-catch）
事件循环
- 执行栈和任务队列
- 宏任务和微任务
- Node.js的事件循环
- requestAnimationFrame
- requestIdleCallback
模块化
- CommonJS规范
- AMD和CMD规范
- ES6 Module
- 模块化的优点
- 循环引用问题
正则表达式
- 正则语法
- 常用正则表达式
- 正则方法（test、exec、match等）
- 贪婪匹配和非贪婪匹配
错误处理
- Error对象
- try-catch-finally
- throw语句
- 自定义错误
- 错误监控
内存管理
- 垃圾回收机制
- 引用计数和标记清除
- 内存泄漏常见场景
- 如何避免内存泄漏
五、DOM和BOM
DOM操作
- DOM树结构
- 节点类型
- 节点选择（getElementById、querySelector等）
- 节点创建、插入、删除
- 节点属性操作
- 节点遍历
- 文档片段（DocumentFragment）
- MutationObserver
事件机制
- 事件流（捕获、目标、冒泡）
- 事件对象
- 事件监听和移除
- 事件委托
- 自定义事件
- 阻止默认行为和阻止冒泡
- passive事件监听
BOM
- window对象
- location对象
- navigator对象
- history对象
- screen对象
- 定时器（setTimeout、setInterval）
- 页面生命周期
六、网络与HTTP
HTTP协议
- HTTP状态码
- HTTP方法（GET、POST、PUT、DELETE等）
- HTTP版本（HTTP/1.0、HTTP/1.1、HTTP/2、HTTP/3）
- HTTPS原理
- SSL/TLS握手过程
- HTTP请求和响应结构
- HTTP头部字段
网络请求
- XMLHttpRequest
- Fetch API
- Axios等第三方库
- 请求拦截和响应拦截
- 超时处理
- 取消请求
跨域
- 同源策略
- CORS跨域
- JSONP原理
- postMessage
- nginx反向代理
- WebSocket跨域
缓存
- 强缓存（Expires、Cache-Control）
- 协商缓存（Last-Modified、ETag）
- 缓存策略
- Service Worker缓存
- LocalStorage缓存
网络安全
- XSS攻击和防御
- CSRF攻击和防御
- SQL注入
- 点击劫持
- 内容安全策略（CSP）
- HTTPS中间人攻击
- 密码加密存储
七、前端框架 - React
基础
- JSX语法
- 组件（函数组件、类组件）
- Props和State
- 生命周期方法
- 事件处理
- 条件渲染和列表渲染
- 表单处理
- 受控组件和非受控组件
Hooks
- useState
- useEffect
- useContext
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- 自定义Hooks
高级特性
- Context API
- Refs转发
- 高阶组件（HOC）
- Render Props
- Portals
- Fragments
- 错误边界
- Suspense和lazy
- Concurrent模式
原理
- 虚拟DOM和Diff算法
- Fiber架构
- 调和（Reconciliation）
- 合成事件
- setState原理
- Hooks原理
生态
- React Router
- Redux/MobX/Zustand状态管理
- Redux中间件（redux-thunk、redux-saga）
- React Query/SWR数据请求
- Styled-components/Emotion
- Next.js服务端渲染
八、前端框架 - Vue
基础
- 模板语法
- 指令（v-if、v-for、v-bind、v-on等）
- 计算属性和侦听器
- Class和Style绑定
- 条件渲染和列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
组件
- 组件注册
- Props
- 自定义事件
- 插槽（Slots）
- 动态组件和异步组件
- 组件通信方式
- provide/inject
- Teleport
Vue 3特性
- Composition API
- setup函数
- ref和reactive
- computed和watch
- 生命周期钩子
- toRefs和toRef
- 自定义指令
- 自定义插件
原理
- 响应式原理（Vue 2的Object.defineProperty、Vue 3的Proxy）
- 虚拟DOM和Diff算法
- 模板编译
- nextTick原理
- keep-alive原理
生态
- Vue Router
- Vuex/Pinia状态管理
- Nuxt.js服务端渲染
- Vite构建工具
- Element Plus/Ant Design Vue组件库
九、工程化
构建工具
-
Webpack配置
- entry、output、loader、plugin
- 代码分割
- Tree Shaking
- HMR热更新
- 性能优化
-
Vite原理和配置
-
Rollup
-
Parcel
-
esbuild
包管理
- npm/yarn/pnpm
- package.json配置
- 依赖版本管理
- npm scripts
- 私有包管理
- Monorepo
代码规范
- ESLint配置
- Prettier配置
- Stylelint
- commitlint
- husky和lint-staged
- editorconfig
版本控制
- Git基本操作
- Git工作流（Git Flow、GitHub Flow）
- 分支管理策略
- 代码冲突解决
- Git Hooks
CI/CD
- 持续集成流程
- GitHub Actions
- Jenkins
- 自动化测试
- 自动化部署
测试
- 单元测试（Jest、Vitest）
- 组件测试（React Testing Library、Vue Test Utils）
- E2E测试（Cypress、Playwright）
- 测试覆盖率
- TDD和BDD
十、性能优化
加载性能
- 减少HTTP请求
- 资源压缩（gzip、brotli）
- 代码分割和懒加载
- 预加载（preload）和预获取（prefetch）
- 图片优化（格式选择、懒加载、响应式图片）
- 字体优化
- CDN加速
- DNS预解析
- HTTP/2和HTTP/3
- 首屏优化
渲染性能
- 减少重排和重绘
- 使用transform和opacity
- 虚拟滚动和虚拟列表
- 防抖和节流
- requestAnimationFrame
- Web Worker
- 图片懒加载和骨架屏
- 长列表优化
代码优化
- 避免内存泄漏
- 事件委托
- 减少闭包使用
- 避免全局变量污染
- 代码分割
- Tree Shaking
- Scope Hoisting
- 路由懒加载
监控和分析
- Performance API
- Lighthouse
- Chrome DevTools
- Web Vitals（LCP、FID、CLS）
- 错误监控
- 性能监控平台（Sentry等）
十一、浏览器原理
渲染机制
- 浏览器架构（多进程）
- 渲染流程（解析HTML、构建DOM树、CSSOM树、渲染树、布局、绘制、合成）
- 关键渲染路径
- 重排（回流）和重绘
- 图层和合成层
- 渲染优化
JavaScript引擎
- V8引擎工作原理
- JIT编译
- 隐藏类和内联缓存
- 垃圾回收
浏览器存储
- Cookie
- LocalStorage
- SessionStorage
- IndexedDB
- Cache API
- 存储限制和清理策略
浏览器安全
- 同源策略
- CSP内容安全策略
- X-Frame-Options
- 沙箱机制
- 浏览器指纹
十二、移动端开发
基础适配
- viewport设置
- rem、vw适配方案
- flexible方案
- 1px问题
- 安全区域适配（刘海屏）
移动端特性
- 触摸事件（touchstart、touchmove、touchend）
- 手势识别
- 300ms延迟问题
- 点击穿透
- 滚动穿透
- 软键盘问题
性能优化
- 首屏加载优化
- 图片懒加载
- 骨架屏
- PWA
- App Shell
- 离线缓存
兼容性
- iOS和Android差异
- 浏览器兼容性
- 降级方案
十四、Node.js
基础
- 模块系统
- 全局对象
- 文件系统操作
- 路径处理
- Buffer
- Stream
Web框架
- Express
- Koa
- Nest.js
- 中间件机制
- 路由处理
数据库
- MySQL
- MongoDB
- Redis
- ORM（Sequelize、TypeORM）
其他
- 进程和线程
- 集群
- PM2进程管理
- 日志处理
- 错误处理
十五、TypeScript
基础
- 基本类型
- 接口（Interface）
- 类型别名（Type）
- 联合类型和交叉类型
- 类型断言
- 字面量类型
- 枚举
高级类型
- 泛型
- 映射类型
- 条件类型
- 工具类型（Partial、Required、Pick、Omit等）
- infer关键字
- 类型守卫
- 索引类型
实践
- tsconfig.json配置
- 类型声明文件（.d.ts）
- 装饰器
- 命名空间和模块
- 与JavaScript库集成
十六、设计模式和架构
设计模式
- 单例模式
- 工厂模式
- 观察者模式
- 发布订阅模式
- 策略模式
- 代理模式
- 装饰器模式
- 适配器模式
- 外观模式
- 中介者模式
架构设计
- MVC、MVP、MVVM
- 组件化和模块化
- 微前端架构
- 单页应用（SPA）和多页应用（MPA）
- 服务端渲染（SSR）和静态生成（SSG）
- BFF（Backend For Frontend）
- Serverless
代码质量
- 代码整洁之道
- SOLID原则
- DRY原则
- KISS原则
- 代码重构
- 技术债务管理
