2025知乎Web前端蕞全面试八股文攻略

2025知乎Web前端全面面试八股文攻略可围绕以下核心知识点展开，涵盖基础理论、工程化、框架原理及性能优化等高频考点：

• HTML5新特性

  语义化标签（<header>、<section>、<article>等）的作用及SEO优化意义。

  多媒体支持（<audio>、<video>）及兼容性处理方案。

  本地存储（localStorage、sessionStorage、IndexedDB）的差异与使用场景。

• CSS盒模型与布局

  标准盒模型与box-sizing: border-box的区别。

  Flexbox与Grid布局的核心属性及适用场景（如一维布局用Flex，二维布局用Grid）。

  响应式设计实现方式（媒体查询、rem/vw单位、calc()函数）。

• CSS预处理器与后处理器

  Sass/Less的变量、嵌套、混合（Mixin）等特性对比。

  PostCSS的插件机制（如Autoprefixer自动添加浏览器前缀）。

• 作用域与闭包

  词法作用域与动态作用域的区别。

  闭包的原理（函数嵌套+引用外部变量）及常见应用（如模块化、防抖节流）。

• 异步编程

  Promise的链式调用、all/race方法及错误处理。

  Async/Await的语法糖本质（基于Generator函数）及错误捕获（try/catch）。

  事件循环（Event Loop）机制：宏任务（setTimeout、I/O）与微任务（Promise.then）的执行顺序。

• ES6+特性

  箭头函数与普通函数的区别（this绑定、无arguments对象）。

  解构赋值、默认参数、剩余参数的语法。

  Map/Set数据结构与Object的差异（如Map的键可以是任意类型）。

• React

  虚拟DOM：Diff算法的优化策略（同层比较、key的作用）。

  Hooks：useState/useEffect的底层实现（链表结构存储状态）。

  性能优化：React.memo、useCallback、useMemo的适用场景。

• Vue

  响应式原理：Object.defineProperty（Vue2）与Proxy（Vue3）的优缺点。

  编译过程：模板到虚拟DOM的转换（如v-if与v-for的优先级）。

  Composition API：与Options API的对比及代码组织优势。

• 状态管理

  Redux的核心概念（store、action、reducer）及中间件（redux-thunk、redux-saga）。

  Vuex与Pinia的设计差异（Pinia的模块化与类型支持）。

• 模块化规范

  CommonJS（Node.js）与ES Modules（浏览器）的导出/导入语法差异。

  动态导入（import()）的按需加载应用场景。

• 打包工具

  Webpack的Loader与Plugin机制（如babel-loader转译ES6+、HtmlWebpackPlugin生成HTML）。

  Vite的原理（基于ES Modules的开发环境快速启动）。

• 代码规范与测试

  ESLint的规则配置及Prettier的代码格式化。

  Jest的单元测试写法（describe、it、expect断言）。

• 渲染机制

  关键渲染路径（CRP）：HTML解析、CSSOM构建、JavaScript执行、Render Tree合成。

  重绘（Repaint）与回流（Reflow）的触发条件及优化方案（如避免频繁操作DOM）。

• HTTP协议

  HTTP/1.1的队头阻塞问题及HTTP/2的多路复用解决方式。

  HTTPS的加密流程（非对称加密交换密钥、对称加密传输数据）。

  常见状态码（200、304、403、500）的含义。

• 跨域与安全

  CORS的预检请求（OPTIONS）及响应头配置（Access-Control-Allow-Origin）。

  XSS攻击的防御（输入过滤、CSP策略）、CSRF攻击的防御（SameSite Cookie属性）。

• 加载优化

  代码分割（Code Splitting）与动态导入。

  资源压缩（Terser压缩JS、CSSNano压缩CSS）、图片优化（WebP格式）。

• 运行时优化

  懒加载（IntersectionObserver API实现图片懒加载）。

  防抖（debounce）与节流（throttle）的函数封装。

• 基础类型

  原始类型（string、number）与对象类型（interface、type别名）。

  联合类型（|）与交叉类型（&）的区别。

• 高级特性

  泛型（<T>）在函数与组件中的应用。

  装饰器（@语法）的实验性支持及使用场景（如依赖注入）。

• 常见算法

  排序算法（快速排序、归并排序）的时间复杂度分析。

  链表与树的遍历（深度优先、广度优先）。

• 手写代码题

  实现Promise.all、deepClone（处理循环引用）、throttle/debounce函数。

• 项目难点

  描述解决过的复杂问题（如首屏加载慢、跨团队协作冲突）。

  技术选型依据（如为什么选择React而非Vue）。

• 学习能力

  如何跟进新技术（如阅读RFC文档、参与开源项目）。

附：高频面试题示例

1. React Hooks为什么不能在条件语句中调用？

   答：Hooks依赖调用顺序，条件语句会破坏顺序导致状态错乱。

2. Vue3的Composition API解决了什么问题？

   答：解决Options API中逻辑分散的问题，支持代码按功能组织。

3. 如何减少Webpack打包体积？

   答：使用Tree Shaking、动态导入、压缩代码、配置externals引入CDN资源。

建议：结合实际项目经验理解原理，避免死记硬背；关注社区新动态（如React Server Components、Vue3.4新特性）。