--- theme: nico highlight: a11y-dark --- # 前言过年整整一个礼拜点不到新疆炒米粉，这几天总算能点到新疆炒米粉了🫰🫰🫰，新疆炒米粉就是最好吃的😎😎 ![微信图片_20240219224207.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/387f9f8566454a828b6deaa442724026~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1676&h=1175&s=291996&e=jpg&b=854311) 年前两次被面试官问到前端的性能优化，由于内容比较多，写篇文章记录一下。此文将从这些方面进行探讨： - 资源优化方面 - 渲染优化方面 - 网络请求优化方面 - 缓存优化方面 - 页面加载优化方面 # 一. **资源优化方面** ## 1. 压缩和合并 CSS、JavaScript 文件。使用专门的压缩工具或构建工具将多个 CSS 和 JavaScript 文件合并成较少数量的文件，减少 HTTP 请求次数。压缩这些文件，通过删除空格、注释和不必要的字符来减小文件大小。 ## 2. 使用适当的图片格式，如WebP、JPEG、SVG。这三种图片格式压缩效率高、加载速度快、图像质量高、兼容性好，对于提升用户体验比较友好。 ## 3. 压缩图片以减小文件大小。在进行图片压缩时，可以采用**有损压缩**或**无损压缩**的方式。 **（名词解释）** 1. **有损压缩**：有损压缩是指在压缩图片文件大小的同时，会损失一定的图像质量。这种压缩方式主要应用于照片、图像色彩丰富的场景。常见的有损压缩格式包括JPEG。有损压缩通常能够实现较小的文件大小，但可能会造成图像细节的损失，特别是在高压缩比下，可能出现明显的失真现象。 1. **无损压缩**：无损压缩是指在压缩图片文件大小的同时，不会损失图像质量。这种压缩方式主要应用于图标、简单图形和需要保持图像质量的场景。常见的无损压缩格式包括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 页面的``标签中，使用``标签引入 CSS 文件。 - 在 HTML 页面的``末尾之前，使用` ``` ## 8. 启用浏览器缓存 **如何启用浏览器缓存：** - 在服务器端配置响应头，以便浏览器可以缓存这些外部文件。 - 设置适当的缓存控制策略，如`Cache-Control`和`Expires`，告诉浏览器何时应该重新获取文件。 ```http Cache-Control: max-age=31536000 Expires: [date] ``` 这将使浏览器缓存 CSS 和 JavaScript 文件，直到达到指定的最大年龄（`max-age`），或者在指定的到期日期（`Expires`）之前。 **利用版本控制来实现缓存失效：** - 当 CSS 或 JavaScript 文件发生变化时，文件名应该要包含版本号或时间戳，并更新 HTML 中的链接。 ```html ``` # 二. **渲染优化方面** ## 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请求次数**，提高页面加载速度的技术。***而这种优化方法适用于很多小图标的场景。*** 简而言之： 1. **合并图像**：将多个小图标或图片合并成一个大图像。 1. **设置背景图**：将合并后的大图像设置为某个元素的背景图。可以使用CSS的`background-image`属性来指定背景图像的URL，并设置`background-size`属性以及`width`和`height`属性来控制背景图像的显示大小。 1. **调整背景位置**：使用CSS的`background-position`属性来控制背景图像在元素中的位置。通过调整`background-position`的值，可以指定显示大图像中的哪个小图标。 1. **应用到元素**：将背景图像应用到需要显示小图标的元素上。可以通过CSS选择器来选中相应的元素，并将背景图像应用到这些元素上。这样，我们就能有效减少多个小图标的HTTP请求次数，提高了页面加载速度。这种技术在需要频繁使用小图标的场景下特别有效，比如按钮、导航栏、标签等地方。 # 四. **缓存优化方面** ## 14. 使用本地存储缓存数据 - 本地存储是指浏览器提供的一种存储数据的机制，包括 **LocalStorage** 和 **SessionStorage** 。 - 使用 **LocalStorage** 或 **SessionStorage** 可以将数据存储在客户端本地，**避免重复的网络请求**，从而加快页面加载速度。 - 通常适用于一些静态数据、用户配置信息等，并且要注意存储的数据量不能过大，以免影响页面性能。 # 五. 页面加载优化 ## 15. 将JavaScript脚本放在页面底部 - 将 JavaScript 文件引入放在页面底部的``标签之前，或者使用`defer`属性，以减少对页面渲染的阻塞。 ## 16. 使用异步加载 - 使用异步加载（Async loading）加载不必要立即执行的JavaScript代码。 ## 17. 避免不必要的页面重定向，以减少额外的HTTP请求。 **使用相对路径和正确的链接** - 在页面内部和站点内部链接中，应该尽可能使用相对路径而不是绝对路径或者重定向链接。相对路径能够直接定位资源，避免了不必要的额外请求和重定向。 - 确保所有链接都指向正确的目标页面，避免出现404错误或者重定向链。 **使用301永久重定向**： - 有时候如果确实需要进行页面重定向，应该使用301永久重定向而不是302临时重定向。301重定向会告诉搜索引擎和浏览器该页面已永久移动到新的 URL，从而减少了重复请求和额外的HTTP请求。记录用，欢迎大家指正！！