[Notes][Project] FE Performance Optimization / 前端性能优化手段

A: Action R: Reason

高优先级

避免使用 iframe

R: 性能表现差，可达性和可用性差，不能被搜索引擎检索。

生产环境压缩 css

R: 提高内容加载速度。 A: 压缩掉注释、空格、换行等，很多打包工具带有相应功能。

非阻塞的 CSS

R：CSS 文件可能会阻止页面加载并延迟页面的渲染。 A: 使用 preload 来提前加载 CSS

<link
  rel="preload"
  href="css/global.min.css"
  as="style"
  onload="this.rel='stylesheet'"
/>

内联首屏或重要 CSS 样式

减少内联样式

将内容与设计分开
增强代码维护性
减少了 HTML 文件大小和加载时间

A: 使用外部样式或者 style 标签样式

分析 css 复杂度

图像资源大小优化

R: 提高响应速度，减少资源开销 A:

使用 CSS 绘制替换图片展示
如果可能，请使用字体而不是图像中编码的文本
使用 SVG
使用工具并指定 85 以下的级别压缩。

https://web.dev/fast/#optimize-your-images

选择合适的图片格式

R: 同上 A：

转化为 webp 等更小的格式
使用 CDN 等

压缩 JS 资源

R: 加快网站的页面加载时间，并明显减轻用户的下载量 A: 注释、空格和换行符都从生产文件中删除（如果使用 HTTP/2 仍然有效）

使用 defer 和 async 来异步加载脚本

使用 HTTPS

R: 提高网站安全

网站体积小于 1500 KB

R: 提高用户体验

网站响应时间尽量小于 3s

R: 留存用户

浏览器在接收数据之前等待的时间 TTFB < 1.3s

减少不必要的 HTTP 请求

尽量保持网站源文件协议一致

避免请求无法访问的文件 (404)

R: 404 请求会降低网站的性能并对用户体验产生负面影响；可能导致搜索引擎抓取不存在的页面并将其编入索引

设置 HTTP 请求缓存

启用压缩 Gzip 或者 Brotli 减少 JS 文件体积大小

中优先级

压缩 HTML 文件大小（注释、空格、换行）

使用 CDN 存储静态资源

R: 减小服务器负载，提高站点性能

如果最终渲染图像尺寸已知，请设置 `<img>` 的宽度和高度属性

R: 提高 DOM 计算效率

避免使用 BASE64 图像

Base64 编码的图像比二进制图像更大，这可能会减慢网站的加载时间。
由于 Base64 编码的图像直接嵌入到 HTML 或 CSS 中，因此它们包含在初始页面加载中，这可能会导致互联网连接速度较慢的用户出现延迟。
Base64 编码的图像不会从浏览器缓存中受益，因为它们是 HTML 或 CSS 的一部分，而不是单独的资源。因此，每次加载页面时，即使用户之前访问过该页面，也会重新下载图像。
Base64 编码的图像与某些旧浏览器版本不兼容。

屏幕外的图片懒加载

R: 提高当前页面的响应时间，然后避免加载用户可能不需要的不必要的图像。

提供响应式图像

R: 比如，小型设备不需要大于其视口的图像。 A:

为您想要定位的设备创建不同的图像尺寸
使用 srcset 和 picture 提供每个图像的多个变体

避免将多个 JavaScript 代码嵌入到您的正文中

R: 将 JavaScript 嵌入代码直接放置在 <body> 中可能会减慢页面速度，因为它是在构建 DOM 时加载的。 A: 在外部文件中或最终在 <head> 或页面末尾（在 </body> 之前）重新组合您的 JavaScript 代码。

及时更新依赖包

检查 JavaScript 文件（以及 CSS）中的性能问题

使用 Service Worker

R：缓存数据或者不影响主进程

Cookie 大小不超过 4096 字节且一个域最好不要超过 20 个 cookies

R: Cookie 在 Web 服务器和浏览器之间的 HTTP 标头中交换。保持 cookie 的大小尽可能小非常重要，以尽量减少对用户响应时间的影响。

低优先级

尽可能多使用 preload

HTTP1.1 尽量将 css 汇聚到一个文件里

移除无效 CSS

使用 WOFF 2.0 网页字体

R： WOFF 2.0 Web 字体压缩格式比 WOFF 1.0 平均增益提高了 30%。 A: 最好使用 WOFF 2.0、WOFF 1.0 和 TTF 作为后备。

使用 preconnect 预连接字体

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

WJ-Yuan / Notes