前端性能优化及技巧

前端性能优化旨在提高网页的用户体验，缩短网页的加载时间，减少资源的请求和使用。下面是前端性能优化的一些技巧和方法：

1. 减少HTTP请求

在页面中引入的CSS、JavaScript、图片等资源，每个资源都需要向服务器发送一次请求，因此每个请求都会消耗时间，增加页面的加载时间。减少HTTP请求是一种有效的提高性能的方法。

• 将多个CSS文件合并为一个文件，在HTML页面中只引入一个CSS文件。
• 将多个JavaScript文件合并为一个文件，在HTML页面中只引入一个JavaScript文件。
• 将多个小图片合并为一张图片，并使用CSS的background-image属性来引用它，或者使用CSS spriting来实现。

2. 压缩文件大小

压缩CSS、JavaScript等文件大小是提高网站性能的另一种方法。因为压缩后的文件，文件大小变小，传输时间就变得更短了。

• 压缩CSS文件：使用CSS压缩工具来压缩CSS文件，例如CSSnano。
• 压缩JavaScript文件：使用JavaScript压缩工具来压缩JavaScript文件，例如UglifyJS或Terser。

3. 使用CDN

使用CDN（内容分发网络）可以加速页面的加载速度，减少页面的下载时间。因为CDN会缓存页面的静态资源，当用户访问该资源时，CDN会将资源返回给用户，减少了用户向原始服务器请求资源的时间。

例如，在引入jQuery库时，可以使用https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js 这样的链接，而不是使用自己网站上的jQuery文件。

4. 使用缓存

使用缓存可以减少服务器的负载，加快页面的加载速度。例如，可以设置HTTP响应头Cache-Control或Expires，让浏览器缓存静态资源。在下次请求相同URL时，浏览器会直接从本地缓存中获取资源，而不是请求服务器。

5. 延迟加载

延迟加载是指在页面滚动到第一屏时，才加载下面的图片或其他资源。这样可以减少页面一开始的请求量，提高页面的加载速度。可以使用一些工具或库实现延迟加载，例如jQuery的LazyLoad插件。

示例1

比如现在我们在引用了一个体积较大的CSS文件，并且这个CSS文件只在某个页面中引用到，为了减少HTTP请求，我们可以将这个CSS文件合并到一个大的CSS文件中，然后只在包含这个页面的HTML文件中引用该CSS文件即可。

在终端中使用cat命令，或者使用编辑器将这两个文件合并，例如：

cat file1.css file2.css >> merged.css

然后在HTML页面中只引用这个名为merged.css的CSS文件即可。

示例2

在加载图片时，可以使用CSS Sprites来减少HTTP请求。CSS Sprites是将多张小图片合并为一张大图片，在使用background-image属性显示图片时，只需要使用背景图片的某一部分，可以减少HTTP请求次数。

.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url('icon-sprite.png');
}

.icon-1 {
  background-position: 0 0;
}

.icon-2 {
  background-position: -30px 0;
}

.icon-3 {
  background-position: -60px 0;
}

在上面的例子中，icon-sprite.png图片包含了三个小图标，使用类名.icon-1到.icon-3分别显示三个小图标，这样就只需要加载一个大图片，而不需要一个一个加载小图片。