2464 字

7 分钟

前端性能优化完全指南

2026-02-27

Frontend

/

Performance

/

Optimization

/

JavaScript

前端性能优化完全指南#

在当今快节奏的数字世界中，网站性能对用户体验和业务成功至关重要。研究表明，页面加载时间每增加一秒，转化率可能下降多达7%。本文将深入探讨前端性能优化的各种技术和最佳实践，帮助你构建更快、更流畅的用户体验。

1. 加载性能优化#

1.1 资源压缩#

JavaScript压缩： 使用工具如Terser、UglifyJS等压缩JavaScript文件，移除空格、注释和未使用的代码。

CSS压缩： 使用工具如CSSNano、CleanCSS等压缩CSS文件。

HTML压缩： 使用工具如HTMLMinifier压缩HTML文件。

1.2 资源合并#

合并JavaScript文件： 将多个小的JavaScript文件合并为一个，减少HTTP请求数。

合并CSS文件： 将多个小的CSS文件合并为一个。

1.3 图片优化#

选择合适的图片格式：

JPEG：适用于照片和复杂图像
PNG：适用于需要透明度的图像
WebP：现代格式，提供更好的压缩率
SVG：适用于图标和简单图形

图片压缩： 使用工具如TinyPNG、Squoosh等压缩图片。

响应式图片： 使用srcset和sizes属性提供不同分辨率的图片。

1
<img
2
  srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
3
  sizes="(max-width: 600px) 320px, (max-width: 900px) 480px, 800px"
4
  src="image-800w.jpg"
5
  alt="Description"
6
>

懒加载： 延迟加载不在视口中的图片。

1
<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazyload" alt="Description">
2

3
<script>
4
  document.addEventListener("DOMContentLoaded", function() {
5
    const lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
6

7
    if ("IntersectionObserver" in window) {
8
      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
9
        entries.forEach(function(entry) {
10
          if (entry.isIntersecting) {
11
            let lazyImage = entry.target;
12
            lazyImage.src = lazyImage.dataset.src;
13
            lazyImage.classList.remove("lazyload");
14
            lazyImageObserver.unobserve(lazyImage);
15
          }
16
        });
17
      });
18

19
      lazyImages.forEach(function(lazyImage) {
20
        lazyImageObserver.observe(lazyImage);
21
      });
22
    }
23
  });
24
</script>

1.4 字体优化#

使用字体子集： 只包含网站实际使用的字符。

字体预加载： 使用preload提示浏览器提前加载字体。

1
<link rel="preload" href="fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

字体显示策略： 使用font-display属性控制字体加载行为。

1
@font-face {
2
  font-family: 'MyFont';
3
  src: url('my-font.woff2') format('woff2');
4
  font-display: swap; /* 推荐：使用系统字体直到自定义字体加载完成 */
5
}

1.5 缓存策略#

HTTP缓存： 使用Cache-Control和ETag头控制浏览器缓存。

1
Cache-Control: public, max-age=31536000

Service Worker缓存： 使用Service Worker实现离线缓存和更精细的缓存控制。

1.6 内容分发网络 (CDN)#

使用CDN分发静态资源，减少服务器负载和网络延迟。

2. 运行时性能优化#

2.1 JavaScript优化#

减少DOM操作： DOM操作是昂贵的，应尽量减少。

使用事件委托： 将事件监听器添加到父元素，而不是每个子元素。

1
// 不好的做法
2
const buttons = document.querySelectorAll('button');
3
buttons.forEach(button => {
4
  button.addEventListener('click', () => {
5
    console.log('Button clicked');
6
  });
7
});
8

9
// 好的做法
10
const container = document.querySelector('.container');
11
container.addEventListener('click', (e) => {
12
  if (e.target.tagName === 'BUTTON') {
13
    console.log('Button clicked');
14
  }
15
});

使用requestAnimationFrame： 对于动画，使用requestAnimationFrame而不是setTimeout或setInterval。

1
function animate() {
2
  // 动画代码
3
  requestAnimationFrame(animate);
4
}
5
animate();

避免阻塞渲染： 长时间运行的JavaScript会阻塞浏览器渲染，应使用Web Workers处理复杂计算。

1
// 创建Web Worker
2
const worker = new Worker('worker.js');
3

4
// 发送消息给Worker
5
worker.postMessage({ data: largeDataSet });
6

7
// 接收Worker的消息
8
worker.onmessage = function(e) {
9
  console.log('Result:', e.data);
10
};

2.2 CSS优化#

避免使用复杂的选择器： 简单的选择器执行更快。

避免使用@import： @import会阻塞CSS解析。

使用CSS动画： CSS动画通常比JavaScript动画性能更好。

避免重排和重绘：

重排：DOM元素的位置或大小发生变化
重绘：DOM元素的外观发生变化，但位置和大小不变

优化重排：

批量修改DOM
使用DocumentFragment
使用transform和opacity进行动画（它们触发合成层）

2.3 渲染优化#

关键渲染路径优化：

减少关键资源的数量
减少关键资源的大小
优化关键资源的加载顺序

使用CSS Grid和Flexbox： 现代布局技术比传统布局技术性能更好。

避免使用CSS表达式： CSS表达式在IE中性能很差。

使用will-change： 提示浏览器元素即将发生变化。

1
.element {
2
  will-change: transform;
3
}

3. 代码优化#

3.1 JavaScript代码优化#

使用const和let： 避免使用var，减少作用域问题。

使用箭头函数： 箭头函数更简洁，没有自己的this。

使用模板字面量： 模板字面量更简洁，支持多行字符串。

使用解构赋值： 解构赋值更简洁，减少代码量。

使用展开运算符： 展开运算符更简洁，减少代码量。

使用Map和Set： 对于频繁查找的场景，Map和Set比对象和数组性能更好。

使用Promise和async/await： 异步代码更简洁，更易读。

3.2 CSS代码优化#

使用CSS变量： CSS变量更灵活，减少代码重复。

使用BEM命名约定： BEM（Block, Element, Modifier）命名约定使CSS更模块化，更易维护。

避免使用!important： !important会破坏CSS的层叠规则，使调试变得困难。

使用简写属性： 简写属性更简洁，减少代码量。

3.3 HTML代码优化#

使用语义化HTML： 语义化HTML更易读，对SEO更友好。

减少HTML嵌套： 过深的HTML嵌套会影响性能。

*使用data-属性： 用于存储自定义数据，避免使用非标准属性。

避免使用内联样式： 内联样式会增加HTML大小，难以维护。

避免使用内联脚本： 内联脚本会阻塞HTML解析，应使用外部脚本。

4. 框架和库的优化#

4.1 React优化#

使用React.memo： 缓存组件渲染结果。

1
const MyComponent = React.memo(function MyComponent(props) {
2
  // 组件代码
3
});

使用useMemo： 缓存计算结果。

1
const expensiveValue = useMemo(() => {
2
  // 复杂计算
3
  return computeExpensiveValue(a, b);
4
}, [a, b]);

使用useCallback： 缓存函数引用。

1
const handleClick = useCallback(() => {
2
  // 处理点击事件
3
}, [dependencies]);

使用虚拟列表： 对于长列表，使用虚拟列表只渲染可见的项。

代码分割： 使用React.lazy和Suspense实现代码分割。

1
const LazyComponent = React.lazy(() => import('./LazyComponent'));
2

3
function MyComponent() {
4
  return (
5
    <div>
6
      <Suspense fallback={<div>Loading...</div>}>
7
        <LazyComponent />
8
      </Suspense>
9
    </div>
10
  );
11
}

4.2 Vue优化#

使用v-once： 只渲染元素一次。

1
<div v-once>{{ message }}</div>

使用v-memo： 缓存模板片段。

1
<div v-memo="[value]">{{ value }}</div>

使用计算属性： 缓存计算结果。

1
computed: {
2
  fullName() {
3
    return this.firstName + ' ' + this.lastName;
4
  }
5
}

使用watchEffect： 自动追踪依赖。

1
watchEffect(() => {
2
  console.log(this.count);
3
});

代码分割： 使用动态导入实现代码分割。

1
const LazyComponent = () => import('./LazyComponent.vue');

4.3 Angular优化#

使用OnPush变更检测策略： 只在输入属性变化时检测变更。

1
@Component({
2
  selector: 'my-component',
3
  template: '<div>{{ value }}</div>',
4
  changeDetection: ChangeDetectionStrategy.OnPush
5
})
6
export class MyComponent {
7
  @Input() value: string;
8
}

使用AsyncPipe： 自动订阅和取消订阅 observables。

1
<div>{{ data$ | async }}</div>

使用NgForTrackBy： 提高列表渲染性能。

1
<div *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</div>

1
trackByFn(index: number, item: any): number {
2
  return item.id;
3
}

代码分割： 使用懒加载模块实现代码分割。

1
const routes: Routes = [
2
  {
3
    path: 'lazy',
4
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
5
  }
6
];

5. 性能监控和分析#

5.1 性能监控工具#

Lighthouse： Google开发的性能评估工具，提供综合的性能报告。

WebPageTest： 提供详细的性能测试报告，包括加载时间、资源大小等。

Chrome DevTools： 提供实时的性能分析工具。

New Relic： 提供实时的性能监控和告警。

Datadog： 提供实时的性能监控和告警。

5.2 核心Web指标#

Largest Contentful Paint (LCP)： 最大内容绘制时间，目标值小于2.5秒。

First Input Delay (FID)： 首次输入延迟，目标值小于100毫秒。

Cumulative Layout Shift (CLS)： 累积布局偏移，目标值小于0.1。

Interaction to Next Paint (INP)： 交互到下一次绘制的时间，目标值小于200毫秒（未来将取代FID）。

5.3 性能分析技巧#

使用Performance API： 编程方式分析性能。

1
performance.mark('start');
2
// 执行操作
3
performance.mark('end');
4
performance.measure('operation', 'start', 'end');
5
const measures = performance.getEntriesByName('operation');
6
console.log(measures[0].duration);

使用Memory API： 分析内存使用情况。

1
console.log(performance.memory);

使用Network API： 分析网络请求。

1
const observer = new PerformanceObserver((list) => {
2
  list.getEntries().forEach((entry) => {
3
    console.log(entry.name, entry.duration);
4
  });
5
});
6
observer.observe({ entryTypes: ['resource'] });

6. 最佳实践#

6.1 加载顺序优化#

CSS在头部： CSS应放在<head>中，确保页面尽快渲染。

JavaScript在底部： JavaScript应放在</body>之前，避免阻塞HTML解析。

使用defer和async：

defer：延迟执行JavaScript，直到HTML解析完成。
async：异步加载JavaScript，加载完成后立即执行。

1
<script defer src="script.js"></script>
2
<script async src="script.js"></script>

6.2 资源优先级#

使用preload： 提前加载关键资源。

1
<link rel="preload" href="style.css" as="style">
2
<link rel="preload" href="script.js" as="script">

使用prefetch： 预加载可能需要的资源。

1
<link rel="prefetch" href="next-page.css">
2
<link rel="prefetch" href="next-page.js">

使用preconnect： 提前建立与域名的连接。

1
<link rel="preconnect" href="https://api.example.com">

6.3 响应式设计#

使用媒体查询： 适配不同屏幕尺寸。

使用相对单位： 使用rem、em、%等相对单位，避免使用固定单位。

使用viewport元标签： 控制页面在移动设备上的显示。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

6.4 可访问性#

使用alt属性： 为图片添加alt属性。

使用ARIA属性： 为非语义化元素添加ARIA属性。

使用键盘导航： 确保所有功能都可以通过键盘访问。

使用适当的颜色对比度： 确保文本和背景的对比度足够高。

7. 常见错误和解决方案#

7.1 过多的HTTP请求#

问题： 页面包含过多的HTTP请求，导致加载缓慢。

解决方案：

合并CSS和JavaScript文件
使用CSS Sprites
使用字体图标
使用数据URI

7.2 过大的资源#

问题： 资源文件过大，导致加载缓慢。

解决方案：

压缩CSS、JavaScript和HTML文件
压缩图片
使用适当的图片格式
使用代码分割

7.3 阻塞渲染的资源#

问题： 资源阻塞页面渲染，导致空白屏幕时间过长。

解决方案：

将CSS放在头部
将JavaScript放在底部
使用defer和async
内联关键CSS

7.4 内存泄漏#

问题： 内存泄漏导致页面性能逐渐下降。

解决方案：

及时清理事件监听器
及时清理定时器
及时清理DOM引用
使用WeakMap和WeakSet

7.5 过多的重排和重绘#

问题： 过多的重排和重绘导致页面卡顿。

解决方案：

批量修改DOM
使用DocumentFragment
使用transform和opacity进行动画
使用CSS will-change

8. 总结#

前端性能优化是一个持续的过程，需要我们不断地学习和实践。通过本文介绍的各种技术和最佳实践，你可以：

提高页面加载速度
提高页面运行速度
提高用户体验
提高搜索引擎排名
减少服务器负载

希望本文对你有所帮助，祝你编码愉快！

9. 参考资料#

前端性能优化完全指南

https://sakumonet.top/posts/frontend-performance-optimization/

作者

SakuMonet

发布于

2026-02-27

许可协议

Unlicensed

部分信息可能已经过时

Astro静态站点生成器深度解析

Mizuki主题使用完全指南

私のブログ

前端性能优化完全指南#

1. 加载性能优化#

1.1 资源压缩#

1.2 资源合并#

1.3 图片优化#

1.4 字体优化#

1.5 缓存策略#

1.6 内容分发网络 (CDN)#

2. 运行时性能优化#

2.1 JavaScript优化#

2.2 CSS优化#

2.3 渲染优化#

3. 代码优化#

3.1 JavaScript代码优化#

3.2 CSS代码优化#

3.3 HTML代码优化#

4. 框架和库的优化#

4.1 React优化#

4.2 Vue优化#

4.3 Angular优化#

5. 性能监控和分析#

5.1 性能监控工具#

5.2 核心Web指标#

5.3 性能分析技巧#

6. 最佳实践#

6.1 加载顺序优化#

6.2 资源优先级#

6.3 响应式设计#

6.4 可访问性#

7. 常见错误和解决方案#

7.1 过多的HTTP请求#

7.2 过大的资源#

7.3 阻塞渲染的资源#

7.4 内存泄漏#

7.5 过多的重排和重绘#

8. 总结#

9. 参考资料#