前端八股精选

来自：小麦

网络

  1. 对比 HTTP1、HTTP2 和 HTTP3 的差异
  2. 对比 HTTP 和 HTTPS 的差异
  3. 对比 WebSocket 和 SSE 的差异
  4. 对比长连接和短连接
  5. 缓存问题：强缓存、协商缓存、Cache-Control、ETag 的区别？
  6. 跨域问题：同源策略、跨域概念、CORS 头、跨域场景和对应解法
  7. 安全问题：XSS vs CSRF vs Clickjacking
  8. 说几个常见的请求头和响应头？
  9. 状态码  301、302、304、307 的区别？
  10. 什么是预检请求（OPTIONS）？何时出现？
  11. Cookie 各属性的作用？
  12. 什么是 JWT 以及它的作用？
  13. 如何取消一个请求？

浏览器 / HTML / DOM

  1. 浏览器的渲染流程？
  2. 浏览器的多进程架构包含什么？
  3. 浏览器本地存储方案有哪些？各方案有什么区别？
  4. 对比重排、重绘/回流的区别？如何减少重绘/回流？
  5. <script> 中 defer、async 属性的区别？
  6. <link> 中 dns-prefetch、preconnect、preload、prefetch 的区别？
  7. <meta> 的常见作用？
  8. 如何与 <iframe> 中的页面通信？
  9. 对比 window.onload 和 DOMContentLoaded 两个事件的区别？
  10. window.requestIdleCallback 的作用？
  11. window.requestAnimationFrame 的作用？
  12. 如何自定义事件？
  13. 事件机制，捕获、冒泡、委托、passive 参数是什么？
  14. V8 垃圾回收（GC）机制？新生代、老生代、Minor GC 和 Major GC 的区别？
  15. 什么是 CSP？有什么用？
  16. 如何监控和上报 JS 错误？

CSS

  1. 解释盒模型
  2. 选择器的优先级
  3. display 属性值和作用？
  4. flexbox 弹性布局怎么写？
  5. 水平垂直居中的 N 种写法？
  6. 双栏、三栏布局的写法？
  7. 响应式布局怎么写？
  8. 动画和过渡分别怎么写？
  9. transform、transition、translate 的区别？
  10. 如何触发硬件加速？
  11. px、em、rem、vw/vh 的区别
  12. 伪元素和伪类的区别？
  13. line-height 的作用？
  14. 颜色主题如何实现？
  15. 说几个 CSS-in-JS 方案？

JavaScript

  1. 列举原始类型和引用类型？
  2. 怎么判断是数组？
  3. 什么是事件循环？
  4. Node.js 和浏览器事件循环的区别？
  5. 对比 call、apply 和 bind
  6. 隐式类型转换的几种场景？
  7. 宏任务和微任务的区别？
  8. 怎么实现深、浅拷贝？
  9. 同步和异步的区别？
  10. Promise 的三种状态？
  11. setTimeout、setImmediate、Promise.resolve、process.nextTick 的时序问题？
  12. Promise.all、Promise.race、Promise.allSettled、Promise.any 的差异？
  13. Promise 如何实现并发？
  14. async/await 的用法和异常处理？
  15. 解释迭代器和生成器？
  16. 如何控制并发？

Vue

  1. 生命周期？
  2. 对比 created 和 mounted
  3. 对比 Proxy 和 Object.defineProperty
  4. 对比 Composition API 和 Options API
  5. 对比 Computed 和 Watch
  6. 对比 v-if、v-show、v-html、v-model
  7. $nextTick 的原理？
  8. keep-alive 的作用？
  9. 组件间的通信方式有哪些？
  10. hash 路由和 history 路由的区别？
  11. router 和 location 跳转的区别？

React

  1. 什么是虚拟 DOM？它的好处和坏处？
  2. 对比受控组件和非受控组件？
  3. key 属性的作用是什么？
  4. React 事件和原生事件的差异？
  5. useState 的 setter 是同步还是异步的？为什么？
  6. 对比 useMemo 和 useCallback
  7. 简述 React 组件的渲染流程？
  8. 如何优化 React 组件的渲染性能？
  9. 列举 React 中跨组件通信的方法？
  10. 如何实现双向数据流？
  11. 对比 SSR 和 CSR 的优劣？

优化

  1. 首屏白屏优化方法？
  2. 图片加载优化方法？
  3. 性能指标有哪些？区别是什么？
  4. 如何排查页面卡顿问题？
  5. 列举常见的性能分析工具。
  6. 性能分析中的火焰图怎么看？
  7. 长列表虚拟滚动实现原理？
  8. 模块按需加载怎么做？
  9. SEO 优化方法？

工程化

  1. CJS 和 ESM 的差异？
  2. 什么是 Tree-Shaking？
  3. Vite 的打包策略？相比 Webpack 的改进？
  4. 模块热更新原理？
  5. 什么是 CI/CD？
  6. 解释语义化版本？
  7. 对比 git merge 和 git rebase
  8. 对比 git reset、git revert 和 git checkout
  9. 对比 npm、yarn 和 pnpm 的特点
  10. 列举 npm 常用命令
  11. lock 文件的作用？
  12. 如何优化打包性能？
  13. 什么是 AST？有什么应用？