wend看源码-APISJON-CFANZ编程社区

前端性能优化是提升用户体验的重要环节，优化的目标是减少页面加载时间、提高交互响应速度、降低资源消耗。以下从 加载性能优化、渲染性能优化 和 交互性能优化 三个维度详细说明：

一、加载性能优化

目标是减少页面首次加载时间，提升页面的加载速度。

1. 资源优化

压缩文件：
- 使用工具（如 Webpack、Rollup）对 JavaScript、CSS 进行压缩。
- 使用 image compression 工具（如 TinyPNG）优化图片资源。
- 使用 Gzip 或 Brotli 压缩服务器响应内容。
代码分割：
- 使用动态加载和按需加载，减少首次加载的 JavaScript 文件大小：
```
import('module').then(module => module.default());
```
移除未使用的代码（Tree Shaking）：
- 确保代码没有无用的 import，通过工具自动清理未使用代码。

2. 减少 HTTP 请求数

合并文件： 合并 CSS 和 JavaScript 文件。
使用图片精灵（Sprites）： 将多个小图片合并成一张，减少 HTTP 请求。
使用字体图标： 替代小型图标图片，减少图片请求。

3. 优化图片加载

懒加载： 图片仅在进入视口时加载：
```
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" />
```
或使用 IntersectionObserver 优化懒加载。
使用现代图片格式：
- 使用 WebP 格式替代传统格式（JPEG/PNG）。
- 利用 <picture> 标签提供多种格式：
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="example">
</picture>
```

4. 使用 CDN

CDN 加速：
- 使用 CDN 提供的公共资源库（如 jQuery、Font Awesome）。
- 将静态资源部署到 CDN 节点，缩短传输路径。

5. 缓存策略

设置 HTTP 缓存：
- 使用强缓存（Cache-Control）和协商缓存（ETag）。
Service Worker：
- 使用 Service Worker 实现更高级的离线缓存。
```
navigator.serviceWorker.register('/sw.js');
```

6. DNS 预解析

通过 dns-prefetch 提前解析域名，减少 DNS 解析时间：

<link rel="dns-prefetch" href="//example.com">

二、渲染性能优化

目标是减少浏览器的渲染时间，提高页面的绘制效率。

1. 减少重排与重绘

避免频繁操作 DOM：
- 使用 DocumentFragment 或虚拟 DOM 批量更新。
减少 CSS 的复杂性：
- 避免使用 CSS 表达式（如 calc()）。
- 避免使用性能较差的选择器（如后代选择器 div span）。
避免 layout thrashing（布局抖动）：
- 在获取 DOM 元素的 offsetHeight 等布局属性后，避免立即修改它们的样式。

2. 启用 GPU 加速

硬件加速：
- 对动画使用 CSS 属性（如 transform 和 opacity），避免修改 top、left。
```
.box {
  transform: translate3d(0, 0, 0);
}
```

3. 优化动画和过渡

CSS 动画优于 JavaScript 动画：
- 使用 requestAnimationFrame 优化动画帧率。
降低动画复杂度：
- 减少需要重新布局的动画效果。

4. 减少第三方脚本的影响

延迟加载或异步加载第三方脚本：
```
<script src="script.js" async></script>
```
使用 iframe 隔离第三方内容。

三、交互性能优化

目标是提升用户在页面上的操作响应速度和流畅度。

1. 减少主线程阻塞

避免长任务：
- 使用 Web Workers 将复杂计算从主线程移出。
```
const worker = new Worker('worker.js');
worker.postMessage(data);
```
使用性能工具：
- 使用 Chrome DevTools 分析长时间任务，优化其执行效率。

2. 懒加载非关键资源

对非关键资源（如图片、视频等）延迟加载。
对非首屏的 JavaScript 代码延迟加载：
```
<script src="script.js" defer></script>
```

3. 预加载与预渲染

预加载资源：

<link rel="preload" href="style.css" as="style">

预渲染页面：

<link rel="prerender" href="next-page.html">

4. 减少输入延迟

防抖与节流：

对频繁触发的事件（如滚动、输入）使用防抖或节流技术：

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}