前端进阶之路

主题

前端性能优化面试 ​

性能指标 ​

核心 Web 指标 (Core Web Vitals) ​

指标全称目标值含义
LCPLargest Contentful Paint≤ 2.5s最大内容绘制
FIDFirst Input Delay≤ 100ms首次输入延迟
CLSCumulative Layout Shift≤ 0.1累积布局偏移
TTFBTime to First Byte≤ 600ms首字节时间
FCPFirst Contentful Paint≤ 1.8s首次内容绘制
TTITime to Interactive≤ 3.8s可交互时间

加载优化 ​

1. 资源压缩 ​

  • Gzip / Brotli 压缩
  • 代码压缩（Terser、ESBuild）
  • 图片压缩（WebP、AVIF）
  • 资源合并

2. 缓存策略 ​

  • HTTP 缓存（强缓存 + 协商缓存）
  • Service Worker 缓存
  • 本地存储（LocalStorage、IndexedDB）

3. 懒加载 ​

  • 图片懒加载（Intersection Observer）
  • 路由懒加载
  • 组件懒加载（React.lazy、Vue defineAsyncComponent）
  • 虚拟列表

4. 预加载 ​

  • preload：预加载当前页面关键资源
  • prefetch：预加载后续页面可能用到的资源
  • preconnect：提前建立连接

渲染优化 ​

1. 减少重排重绘 ​

  • 批量修改 DOM（DocumentFragment、innerHTML）
  • 使用 transform 和 opacity 做动画
  • 避免频繁读取会触发重排的属性
  • 使用 will-change 提示浏览器优化

2. CSS 优化 ​

  • 选择器优化（避免过深嵌套）
  • 提取关键 CSS（Critical CSS）
  • 使用 CSS containment

3. JavaScript 优化 ​

  • 避免长任务（>50ms）
  • 使用 requestIdleCallback 执行非紧急任务
  • 防抖节流
  • Web Worker 处理复杂计算

网络优化 ​

1. HTTP/2 和 HTTP/3 ​

  • 多路复用
  • 头部压缩
  • 服务器推送（HTTP/2）
  • 基于 QUIC（HTTP/3）

2. CDN ​

  • 静态资源 CDN 加速
  • 边缘计算
  • 智能调度

3. DNS 优化 ​

  • DNS 预解析（dns-prefetch）
  • 减少 DNS 查询次数

面试高频题 ​

1. 如何优化首屏加载速度？ ​

  1. 服务端渲染（SSR）或静态生成（SSG）
  2. 关键资源预加载
  3. 非关键资源延迟加载
  4. 图片优化（格式、尺寸、懒加载）
  5. 代码分割
  6. 骨架屏/Loading 占位

2. 如何优化长列表性能？ ​

  1. 虚拟列表（react-window、vue-virtual-scroller）
  2. 分页加载
  3. 无限滚动 + 数据回收
  4. 减少 DOM 节点数量

3. 什么是回流（Reflow）和重绘（Repaint）？ ​

  • 回流：元素尺寸、位置发生变化，需要重新计算布局
  • 重绘：元素外观发生变化，但不影响布局

触发回流的操作：

  • 修改元素尺寸（width、height、padding、margin）
  • 修改元素位置（top、left、right、bottom）
  • 修改内容（文字数量、图片大小）
  • 添加/删除可见 DOM 元素
  • 修改浏览器窗口大小

4. 极端性能优化场景？ ​

大文件上传优化 ​

  • 分片上传（Chunk Upload）
  • 断点续传
  • 并发控制
  • 秒传（MD5 校验）
  • 进度展示

大数据量渲染 ​

  • 虚拟滚动
  • 数据分页
  • Canvas 渲染替代 DOM
  • Web Worker 数据处理