面试官提问：你对前端网站性能优化有何见解？
前言
过年整整一个礼拜点不到新疆炒米粉，这几天总算能点到新疆炒米粉了🫰🫰🫰，新疆炒米粉就是最好吃的😎😎
年前两次被面试官问到前端的性能优化，由于内容比较多，写篇文章记录一下。
此文将从这些方面进行探讨：
- 资源优化方面
- 渲染优化方面
- 网络请求优化方面
- 缓存优化方面
- 页面加载优化方面
一. 资源优化方面
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 文件。
<!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，告诉浏览器何时应该重新获取文件。Cache-Control: max-age=31536000 Expires: [date]这将使浏览器缓存 CSS 和 JavaScript 文件，直到达到指定的最大年龄（
max-age），或者在指定的到期日期（Expires）之前。
利用版本控制来实现缓存失效：
- 当 CSS 或 JavaScript 文件发生变化时，文件名应该要包含版本号或时间戳，并更新 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请求。
记录用，欢迎大家指正！！
转载自:https://juejin.cn/post/7337227407365406747