列举6个常见且实用的Web前端性能优化方法

Posted 2021-10-12 程序员的小傲娇

在如今这个信息爆炸的时代，人们的节奏总是快速的，对于一个网站的耐心毕竟是有限的可怜的，如果网站不进行优化必定会流失相当一部分的客户，带来不必要的损失。那么从Web前端的性能优化上来说有哪些常见、实用的方法呢？下面小千就列举6个常见且实用的Web前端性能优化方法。

1、使用CDN

CDN（内容分发网络）部署在各大运营商机房，当用户通过浏览器请求资源时可以直接反馈给用户，极大的减轻了服务器数据中心的压力。本质上CDN也是一种缓存，如果你的所在地距离某个CDN节点很近，那么网站响应的速度提升也是非常明显的。另外CDN所缓存的资源主要为静态资源，如静态页面、图片、css和js文件等。CDN加速对于一些遍布范围较大的网站来说效果最为明显，使用的话像阿里云CDN产品，其节点多达280多个，覆盖运营商也比较全面。

2、减少外部http协议

网页加载的时间与http请求密不可分，而外部资源的加载的速度则与主机服务提供商服务器架构和分布地点有关。我们可以通过检查自己的网站上多余的图片、css、javascript和一些组件，然后对应的去逐个完善，就可以减少一些http请求。

3、使用预获取

顾名思义预获取就是在真正有需要去请求之前就获取一些必要的数据和资源，以提升用户的浏览体验。预获取主要有三大方式：

1.链接预先获取

2.DNS预先获取

3.预先渲染

根据你想要使用的预先获取形式，你只需在网站 html 中的链接属性上增加 rel=“prefetch”,rel=“dns-prefetch”，或者 rel=“prerender” 标记。

4、压缩HTML、CSS和JavaScript

在编写代码时候会有一些多余的空格，这会占用字节，使用一些压缩工具可以有效解决这个问题。值得注意的是，压缩后的文件，其可读性就会变差，后期想维护就会变得困难了。

5、优化图片

一张高清的图片大概几兆左右，而很多时候我们并不需要这样的画质，一般我们都会选择将其保存为高画质的就可以了，这样会有效减小加载图片带来的压力。像JPEG图片那样包含了时间、地点、相机型号的格式，更不是我们所需要的。

6、Ajax请求方式

POST的请求，是不可以在客户端缓存的，每次请求都需要发送给服务器进行处理，每次都会返回状态码200。（可以在服务器端对数据进行缓存，以便提高处理速度）

GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。所以在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。

以上就是小千整理的6个常见且实用的Web前端性能优化方法。进行Web前端优化似乎需要花费很大的精力，相信这篇应用指南中的一些小技巧能帮你极大改善网站加载速度。网站加载地越快，则用户体验越佳。因此，对Web前端进行优化能使给你和你的用户都带来益处。

本文来自​​千锋教育​​，转载请注明出处。​