性能指南

性能入门

官方文档：developer.mozilla.org/zh-CN/docs/…

性能优化

性能优化包括：启动性能优化、HTML 性能优化、CSS 性能优化、JS 性能优化。

1 启动性能优化

启动性能优化就是提升首页的加载速度，包括减小体积、异步加载、网速提升、感官优化

1.1 减小体积

减小体积是指减小首屏或首页的文件体积，包含以下方式：

第一种，文件压缩，通过 Webpack 等打包工具直接压缩 JS、CSS、HTML 文件的体积。

第二种，gzip 压缩，通过 gzip 等压缩工具将 Web 文件压缩成 gzip 格式，从而减小体积。注意： gzip 压缩需要浏览器支持；可以在 Web 服务器（比如：nginx）中开启 gzip 压缩。

第三种，Tree shaking，通过 Webpack 等打包工具移除 JS 中未引用的代码，从而避免下载无用的 js 文件

第四种，按需加载，在首页中只加载必需的模块，比如：首页中不使用的工具类、公共组件不要放在首页中

第五种，路由懒加载，通过动态加载（inport()）的方式只加载当前路由页面需要的文件，而不是加载路由库引用的所有路由页面。

第六种，图片懒加载，通过图片的 lazyload 属性只加载在屏幕可见的图片，从而减小首屏的文件体积

第七中，图片格式，使用 svg、WebP、AVIF、JPEG2000 这类体积更小的图片

1.2 异步加载

异步加载是并行下载多个文件。注意： 同一个域名最多开启 6 个并行下载任务。

异步加载包含以下方式：

第一种，代码分割，通过 Webpack 等打包工具将大的 js 文件分离成多个小的 js 文件、将 CSS 样式单独输出，从而通过并行加载提高下载速度。注意： 不要分离成太小的文件，因为太小的文件的实际加载时间可能少于 TCP 连接的时间。

第二种，延迟脚本，将不影响首屏渲染的脚本设为 async 或 defer ，从而将 HTML 解析与脚本加载进行分离，提高 HTML 解析的速度。

第三种，DNS 预获取，提前解析跨域的域名的 IP，将域名解析与文件下载进行分离，从而通过并行加载提高下载速度。

1.3 网速提升

网速提升是提高服务器的带宽，从而提升下载速度，包含以下方式：

第一种，CDN 托管，通过 CDN 托管静态资源，从而提高静态资源的下载速度

1.4 感官体验

感官体验就是优化用户等待期间的感受，包含以下几种方式：

第一种，启动页面

第二种，进度条，让用户感知页面加载的进度

2 HTML 性能优化

HTML 性能优化包含以下方面：

第一点，指定图片尺寸，防止图片加载导致的页面重排

第二点，图片响应式，防止小屏浏览器加载大图，从而导致性能损失

3 CSS 性能优化

CSS 性能优化包含以下方面：

第一点，媒体查询，不符合媒体查询条件的样式不会阻塞 HTML 的渲染

第二点，will-change 属性，用于告诉浏览器需要修改的属性，从而让浏览器提前进行相关的优化来提升性能。

第三点， font-display 属性，用于在字体文件加载之前显示默认样式，而不是让用户看到白屏，从而优化感官体验。

第四点，contain 属性，用于将元素从 Dom 中独立，从而实现局部的重绘，而不是整个页面的重绘

4 JS 性能优化

JS 性能优化包含以下方面：

第一点，数据缓存，对于长期不变的数据可以进行缓存，从而避免后续的数据请求

第二点，动画优化，使用 requestAnimationFrame() 设置 JS 动画，而不是定时器。注意： 优先使用 CSS 动画，除非 CSS 动画不能满足需求，才使用 JS 动画。

第三点，递归优化，能用循环替代的地方不要使用递归，因为递归很吃内存。

性能检查

性能检查有两种方式：网站检查、API 检查。

网站检查就是使用专业网站检查工具对整个网站进行性能检查，比如：WebPageTest

API 检查就是使用浏览器提供的 performance API 进行自定义的性能检查。