前端项目性能优化方案有哪些

本文分享自天翼云开发者社区《前端项目性能优化方案有哪些》，作者:王****祺

一、加载优化（减少 http 请求数）

常用的减少 HTTP 请求的方法有以下几种：

1.合并图片：当页面图片较多时，可以将相似的图片合并为一张大图，从而减少 HTTP 请求次数。对于不经常变化的图片，使用精灵图或雪碧图进行合并，可以充分利用浏览器缓存提升性能。

2.合并压缩 CSS 样式表和 JS 脚本：将相似或通用的 CSS 和 JS 文件进行合并，压缩后减少 HTTP 连接数。这种方法可以减少资源文件的大小，从而提升网页加载速度。

3.去掉不必要的请求：在代码编写或系统升级之后，可能会有一些无效的链接残留在页面中，应该及时清理这些无效链接，以减少 HTTP 请求的次数。

4.首屏加载优化：优化首屏的加载，使得页面能够快速显示，可以提高用户对页面速度的感知。这一点非常重要，因为用户对首屏的体验印象会直接影响到页面的整体评价。

5.充分利用缓存：将静态资源放在服务器端，并设置合适的缓存策略，可以减少向服务器发送的请求数，节省网络资源。对于长期不变的静态资源，建议开启长缓存，使得浏览器能够更好地缓存这些资源文件，进一步加速页面加载速度

6.预加载：对于大型资源页面，可以先使用 Loading 进行资源预加载，资源加载完成后再显示页面。这不仅可以提前缓存资源，还可以完美展现 Loading 界面。需要注意的是，过长的加载时间可能会影响用户的体验。

7.异步加载第三方资源：第三方资源的加载时间不可控，可能会影响页面的加载速度，因此建议使用异步加载的方式，使得第三方资源不会影响主页面的加载速度。

二、图片优化

优化图片的方法如下：

1.使用 PNG 格式的图片：相对于其他图片格式，PNG 格式的图片体积较小，可以使用压缩工具对其进行优化。在上线之前，应该对图片进行一定的压缩和优化。

2.延迟加载图片：使用延迟加载技术，也称为赖加载，在代码中进行图片的延迟加载，可以有效地提高页面的加载速度。

3.避免空 src 属性：应该避免在 img、iframe 等标签中使用空的 src 属性，因为空的 src 属性会重新加载当前页面，影响页面速度和效率。

4.避免使用 DataURL：在加载图片时，尽量避免使用 DataURL 格式的图像。因为 DataURL 图像没有使用图像压缩算法，文件会变得很大，并且需要解码后再渲染图片，加载速度变慢，耗时长。

三、使用 CDN

内容分发网络，即 CDN，可将内容从中心媒体服务器分发到边缘服务器的网络架构。使用 CDN 有许多好处，例如低网络延迟和丢包率，负载分配，带宽节省和网站性能提升，用户能够就近获取所需内容，避免网络拥塞，从而提高了用户对网站的访问响应速度。

但是，如果网站的安全性对你来说非常重要，那么不应该使用公共 CDN。在从 CDN 远程请求文件时，你的访问来源信息也会被发送过去，一些远程的 JavaScript 文件可能被修改用来收集用户或系统信息。此外，当你使用 https 协议时，可用的 CDN 就更加有限了。

四、开启 Gzip（代码压缩）

Gzip 是一种数据压缩技术，在前端生产环境中可用于压缩 js、css、图片等文件。通过减小数据传输量，Gzip 可有效缩短传输时间，减轻服务器的网络带宽压力，同时提升了前端性能。

五、样式表和 JS 文件的优化

1.头部内联的样式和脚本可能会阻塞页面的渲染。为避免这种情况，通常我们可以使用 link 标签将 CSS 样式表文件放置在页面头部进行引入，以确保尽早地完成下载。

2.对于 JS 脚本文件，通常会将其放置在页面尾部，同时使用异步加载方式，以最/大程度地减少样式和脚本对页面渲染的阻塞。

六、减少不必要的 Cookie

Cookie 存储在客户端，伴随着 HTTP 请求在浏览器和服务器之间传递，由于 cookie 在访问对应域名下的资源时都会通过 HTTP 请求发送到服务器，从而会影响加载速度，所以尽量减少不必要的 Cookie。

七、脚本优化

1.如果需要实现复杂的动画效果，建议使用绝对定位，使其脱离文档流，避免对 DOM 元素进行循环操作。此外，使用 transform:translate 代替 position left、right 等属性可尽量减少回流和重绘带来的性能损失。

2.为了减少脚本对并发下载的影响，建议将脚本放置在页面底部进行加载。

3.为了减少每次计算缓存.length 的性能开销，可以使用一个变量保存其值。

4.为了减少内存消耗和 DOM 操作，建议尽量使用事件委托。将事件监听器设置在父节点上，利用冒泡原理来设置每个子节点。

5.为了提高选择器的速度，建议尽量使用 id 选择器，因为其具有唯/一性、灵活性和优先级高的特点。

八、前端代码结构的优化

1.为了加速页面渲染，我们需要设置 HTML 的 viewport。

2.DOM 结点过多会降低页面的渲染性能，因此应尽量减少 DOM 结点的数量。

3.CSS3 动画比 setTimeout 更加高效，应尽可能地使用 requestAnimationFrame 动画。

4.高频事件（如 scroll、touchmove）应该进行优化，使用函数防抖和函数节流等技术来限制它们的执行频率。

5.避免过度使用 WEB 字体，因为它们需要下载、解析和重绘，这会影响页面的性能。

6.统一的文件命名规则和分类方式可以帮助我们更容易地维护项目中的文件。

九、SEO 优化

1.在编写标题时，应避免过长，关注核心关键词和网站主题相关内容。

2.页面描述是对整个页面的综合说明，其作用和重要性仅次于页面标题。建议描述文字尽量吸引人，加入公司品牌和电话联系方式，并包括目标关键词。

3.对关键词进行优化，有助于用户在搜索时准确地找到所需的内容和网站，同时也有助于更多的有需要的人发现和访问网站。

4.对于大型网站来说，尽可能精简网站代码是非常重要的，因为这可以节省百度蜘蛛的爬行时间。