返回

前端性能优化 24 条建议（2020）

前端

性能优化是一把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。

本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。

  1. 减少 HTTP 请求

减少 HTTP 请求可以减少与服务器的交互次数，从而提高页面加载速度。减少 HTTP 请求的方法有很多，比如合并 CSS 和 JavaScript 文件、使用 CDN、使用 HTTP/2 等。

  1. 优化图片

优化图片可以减小图片的大小，从而提高页面加载速度。优化图片的方法有很多，比如使用正确格式、优化图片尺寸、使用 CSS Sprites、使用延迟加载等。

  1. 使用 CDN

CDN（内容分发网络）可以将网站的内容分发到全球各地，从而减少用户访问网站的延迟。使用 CDN 可以显著提高网站的性能，尤其是对于拥有大量用户的网站。

  1. 启用 gzip 压缩

gzip 压缩可以减小 HTTP 请求和响应的大小，从而提高页面加载速度。gzip 压缩是一种很简单的优化方法，但它可以显著提高网站的性能。

  1. 使用缓存

缓存可以将网站的内容存储在本地，从而减少用户访问网站时与服务器的交互次数。使用缓存可以显著提高网站的性能，尤其是对于经常访问的网站。

  1. 最小化 CSS 和 JavaScript 文件

最小化 CSS 和 JavaScript 文件可以减小文件的大小，从而提高页面加载速度。最小化 CSS 和 JavaScript 文件的方法有很多，比如使用 CSS 和 JavaScript 压缩工具、删除不必要的代码、使用 CSS Sprites 等。

  1. 延迟加载非关键资源

延迟加载非关键资源可以减少页面加载时的资源占用，从而提高页面加载速度。延迟加载非关键资源的方法有很多，比如使用 JavaScript 延迟加载、使用 CSS 延迟加载等。

  1. 避免重定向

重定向会导致浏览器多次请求同一个资源，从而增加页面加载时间。因此，应尽量避免重定向。

  1. 使用正确的 HTTP 状态码

正确的 HTTP 状态码可以帮助浏览器和服务器更好地处理请求，从而提高网站的性能。比如，对于不存在的资源，应使用 404 状态码；对于临时重定向，应使用 302 状态码；对于永久重定向，应使用 301 状态码。

  1. 启用 HTTPS

HTTPS 可以加密网站的数据传输，从而保护用户的数据安全。启用 HTTPS 可以提高网站的安全性，同时也可以提高网站的性能，因为 HTTPS 可以减少与服务器的交互次数。

  1. 使用 HTTP/2

HTTP/2 是 HTTP 的新版本，它可以提高网站的性能。HTTP/2 使用二进制协议、多路复用和头部压缩等技术来提高网站的性能。

  1. 使用 Service Worker

Service Worker 是一个浏览器 API，它可以拦截网络请求并进行缓存。Service Worker 可以显著提高网站的性能，尤其是对于经常访问的网站。

  1. 使用预加载和预获取

预加载和预获取可以提前加载资源，从而提高页面加载速度。预加载和预获取可以使用 HTML 的 preload 和 prefetch 标签来实现。

  1. 使用代码分割

代码分割可以将 JavaScript 代码分成多个块，然后按需加载。代码分割可以减少页面加载时的资源占用，从而提高页面加载速度。

  1. 使用懒加载

懒加载可以延迟加载图片和视频等资源，直到它们出现在视口中。懒加载可以减少页面加载时的资源占用，从而提高页面加载速度。

  1. 使用 CSS 动画和过渡

CSS 动画和过渡可以使页面更具动感和交互性。然而，CSS 动画和过渡也会增加页面加载时间。因此，应谨慎使用 CSS 动画和过渡。

  1. 避免使用内联样式和脚本

内联样式和脚本会增加 HTML 文档的大小，从而增加页面加载时间。因此，应尽量避免使用内联样式和脚本。

  1. 使用渐进式渲染

渐进式渲染可以将页面分成多个部分，然后按需加载。渐进式渲染可以减少页面加载时的资源占用，从而提高页面加载速度。

  1. 使用性能测试工具

性能测试工具可以帮助您分析网站的性能，并发现性能瓶颈。性能测试工具有很多，比如 Google Chrome DevTools、WebPageTest、YSlow 等。

  1. 持续监测网站性能

网站的性能并不是一成不变的，它可能会随着时间的推移而发生变化。因此，应持续监测网站性能，并及时发现和修复性能问题。

  1. 了解用户的需求

在进行性能优化时，应了解用户的需求。有些性能优化方法可能会影响用户体验，因此在进行性能优化时，应权衡性能和用户体验之间的关系。

  1. 不要过度优化

性能优化是一个渐进的过程，不要过度优化。过度优化可能会导致网站变得复杂和难以维护。

  1. 不断学习和探索

性能优化是一个不断变化的领域，新的性能优化方法和工具不断涌现。因此，应不断学习和探索，以了解最新的性能优化方法和工具。

  1. 寻求专业帮助

如果您在进行性能优化时遇到困难，可以寻求专业帮助。专业的前端开发人员可以帮助您分析网站的性能，并发现和修复性能瓶颈。

参考：