前言

过年整整一个礼拜点不到新疆炒米粉，这几天总算能点到新疆炒米粉了🫰🫰🫰，新疆炒米粉就是最好吃的😎😎

年前两次被面试官问到前端的性能优化，由于内容比较多，写篇文章记录一下。

此文将从这些方面进行探讨：

资源优化方面
渲染优化方面
网络请求优化方面
缓存优化方面
页面加载优化方面

一. 资源优化方面

1. 压缩和合并 CSS、JavaScript 文件。

使用专门的压缩工具或构建工具将多个 CSS 和 JavaScript 文件合并成较少数量的文件，减少 HTTP 请求次数。压缩这些文件，通过删除空格、注释和不必要的字符来减小文件大小。

2. 使用适当的图片格式，如WebP、JPEG、SVG。

这三种图片格式压缩效率高、加载速度快、图像质量高、兼容性好，对于提升用户体验比较友好。

3. 压缩图片以减小文件大小。

在进行图片压缩时，可以采用有损压缩 或无损压缩的方式。

（名词解释）

有损压缩：有损压缩是指在压缩图片文件大小的同时，会损失一定的图像质量。这种压缩方式主要应用于照片、图像色彩丰富的场景。常见的有损压缩格式包括JPEG。有损压缩通常能够实现较小的文件大小，但可能会造成图像细节的损失，特别是在高压缩比下，可能出现明显的失真现象。
无损压缩：无损压缩是指在压缩图片文件大小的同时，不会损失图像质量。这种压缩方式主要应用于图标、简单图形和需要保持图像质量的场景。常见的无损压缩格式包括PNG和WebP（无损模式）。无损压缩虽然无法实现像有损压缩那样极致的文件大小，但能够保持图像质量的同时减小文件大小，适用于对图像质量要求较高的场景。

我们要进行图片压缩的话，可以通过使用专业的图片压缩工具或在线压缩网站（网上搜免费图片压缩就行），对图片进行压缩处理。

4. 使用图像懒加载

懒加载（Lazy loading）图片和视频，延迟加载页面中的图片。

5. 少用自定义字体，尽量使用预装字体字体

尽量少用页面中的自定义字体，自定义字体通常需要通过 HTTP 请求来加载，而每个额外的 HTTP 请求都会增加页面加载时间。
尽量考虑使用 Web 安全字体（如 Arial、Helvetica、Times New Roman 等）这些一般会装在大部分设备上的字体作为备用字体，无需额外下载。

6. 如果使用自定义字体，就进行字体子集化减少文件大小

使用字体子集化技术可以减少字体文件大小。字体子集化是指只包含页面上实际使用到的字符，而不是整个字体集。这样可以减少字体文件的大小，并减少下载时间。
可以借助 Font Squirrel、GlyphHanger、FontPrep 等工具，可以很容易地生成字体子集，并且只包含页面上实际使用到的字符，从而减少文件大小。

7. 使用外部文件

将 CSS 和 JavaScript 代码放置在外部文件中，也就是将 CSS 代码保存为.css文件，将 JavaScript 代码保存为.js文件，然后在HTML 中链接外部文件。

在 HTML 页面的<head>标签中，使用<link>标签引入 CSS 文件。
在 HTML 页面的<body>末尾之前，使用<script>标签引入 JavaScript 文件。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 页面内容 -->
    
    <script src="script.js"></script>
</body>
</html>

8. 启用浏览器缓存

如何启用浏览器缓存：

在服务器端配置响应头，以便浏览器可以缓存这些外部文件。
设置适当的缓存控制策略，如Cache-Control和Expires，告诉浏览器何时应该重新获取文件。
http 复制代码
```
Cache-Control: max-age=31536000
Expires: [date]
```
这将使浏览器缓存 CSS 和 JavaScript 文件，直到达到指定的最大年龄（max-age），或者在指定的到期日期（Expires）之前。

利用版本控制来实现缓存失效：

当 CSS 或 JavaScript 文件发生变化时，文件名应该要包含版本号或时间戳，并更新 HTML 中的链接。

html 复制代码

<link rel="stylesheet" href="styles.css?v=2">
<script src="script.js?v=2"></script>

二. 渲染优化方面

9. 减少 DOM 操作

DOM 操作是比较昂贵的，因为它们会触发浏览器的重排和重绘，减少对 DOM 的频繁操作，尽量合并操作，减少重排和重绘次数，从而提高性能。

10. 将 JavaScript 放置在页面底部

将 JavaScript 文件放置在页面底部，使得在加载 JavaScript 文件时不会阻塞页面的渲染。这样可以确保页面内容能够尽快加载并显示给用户，提高首次渲染速度。

11. 避免强制同步布局

强制同步布局是指当获取某些 DOM 属性（如 offsetTop、offsetLeft、clientWidth 等）时，浏览器需要重新计算元素的几何属性，触发重排。尽量避免在 JavaScript 中频繁获取这些属性，或者使用缓存机制减少重复获取的次数，以减少重排操作。

三. 网络请求优化方面

12. 使用 CDN 加速静态资源的加载

CDN是分布式网络服务器的集合，可帮助加速静态资源的加载。将静态资源（如图片、样式表、JavaScript 文件等）托管在 CDN 上，使用户可以从距离更近的服务器获取资源，从而提高加载速度。

13. 使用CSS sprites技术将多个小图标合并成一个图像。

CSS sprites技术是一种将多个小图标或图片合并成一个大图像的方法，然后通过CSS来控制显示大图像的其中一个小图标，以减少HTTP请求次数 ，提高页面加载速度的技术。而这种优化方法适用于很多小图标的场景。

简而言之：

合并图像：将多个小图标或图片合并成一个大图像。
设置背景图 ：将合并后的大图像设置为某个元素的背景图。可以使用CSS的background-image属性来指定背景图像的URL，并设置background-size属性以及width和height属性来控制背景图像的显示大小。
调整背景位置 ：使用CSS的background-position属性来控制背景图像在元素中的位置。通过调整background-position的值，可以指定显示大图像中的哪个小图标。
应用到元素：将背景图像应用到需要显示小图标的元素上。可以通过CSS选择器来选中相应的元素，并将背景图像应用到这些元素上。

这样，我们就能有效减少多个小图标的HTTP请求次数，提高了页面加载速度。这种技术在需要频繁使用小图标的场景下特别有效，比如按钮、导航栏、标签等地方。

四. 缓存优化方面

14. 使用本地存储缓存数据

本地存储是指浏览器提供的一种存储数据的机制，包括 LocalStorage 和 SessionStorage 。
使用 LocalStorage 或 SessionStorage 可以将数据存储在客户端本地，避免重复的网络请求，从而加快页面加载速度。
通常适用于一些静态数据、用户配置信息等，并且要注意存储的数据量不能过大，以免影响页面性能。

五. 页面加载优化

15. 将JavaScript脚本放在页面底部

将 JavaScript 文件引入放在页面底部的</body>标签之前，或者使用defer属性，以减少对页面渲染的阻塞。

16. 使用异步加载

使用异步加载（Async loading）加载不必要立即执行的JavaScript代码。

17. 避免不必要的页面重定向，以减少额外的HTTP请求。

使用相对路径和正确的链接

在页面内部和站点内部链接中，应该尽可能使用相对路径而不是绝对路径或者重定向链接。相对路径能够直接定位资源，避免了不必要的额外请求和重定向。
确保所有链接都指向正确的目标页面，避免出现404错误或者重定向链。

使用301永久重定向：

有时候如果确实需要进行页面重定向，应该使用301永久重定向而不是302临时重定向。301重定向会告诉搜索引擎和浏览器该页面已永久移动到新的 URL，从而减少了重复请求和额外的HTTP请求。

记录用，欢迎大家指正！！

面试官提问：你对前端网站性能优化有何见解？

前言