前端性能优化

一、性能指标和测量工具

1.核心 Web 指标

(1)LCP：最大内容绘制，测量加载性能。

(2)FID：首次输入延迟，测量交互性能。

(3)CLS：累计布局偏移，测量视觉稳定性。

2.常用工具

(1)chrome DevTools Performance 面板：用于分析运行时性能，查看帧率(FPS)、CPU 使用情况和渲染过程。

(2)Lighthouse：Google 的一个开源自动化工具，可以对网页进行性能、无障碍、最佳实践和 SEO 评估。

(3)PageSpeed Insights：一个在线工具，可以根据 Lighthouse 的数据，给出你的网站在移动端和桌面端的性能分数及优化建议。

二、资源优化(图像、字体等)

1.资源文件是导致网站加载缓慢的主要原因之一。

2.图像优化

(1)选择合适的格式：对于照片，使用 JPEG；对于图标和透明图像，使用 PNG 和 SVG。

(2)压缩图像：使用 WebP 或 AVIF 等现代格式，它们在提供更高质量的同时，文件大小更小。

(3)响应式图片：使用 <picture> 标签或  srcset 属性，根据用户设备和视口大小提供不同尺寸的图片。

(4)懒加载：对于不在首屏的图片，使用  loading="lazy" 属性，让浏览器只在需要时才加载它们。

3.字体优化

(1)自定义字体：只加载你需要的字体格式，如 WOFF2。

(2)减小文件大小：使用工具对字体文件进行子集化，移除不用的字形。

(3)预加载：使用 <link rel="preload"> 标签，提前加载关键字体，避免页面闪烁。

三、代码优化

1.JavaScript优化

(1)压缩和混淆：使用打包工具(如 Webpack、Vite) 压缩代码，减小文件体积。

(2)按需加载：将代码分割成多个小块，只在需要时才加载。

(3)移除不必要的代码：使用 Tree Shaking 移除未被使用的代码。

2.CSS 优化

(1)压缩：移除多余的空格、注释等。

(2)减少嵌套：避免过深的 CSS 嵌套，这会增加浏览器的计算开销

三、渲染性能优化

1.渲染性能优化

(1)减少重排和重绘

• 重排：当元素的尺寸、位置发生变化时，浏览器需要重新计算并布局页面。
• 重绘：当元素的颜色、背景等不影响布局的属性发生变化时，浏览器需要重新绘制。
• 避免方法：尽量使用 CSS trasnform和 opacity 来代替修改 top 、left 或 width、height 等属性，因为它们不会触发重排。

(2)善用事件节流和防抖

• 对于高频事件（如 scroll、resize），使用节流限制函数执行的频率。
• 对于需要等待用户输入停止后再执行的事件（如搜索框），使用防抖延迟函数执行。

2.网络性能优化

(1)CDN(内容分发网络)：使用 CDN 可以将静态资源缓存到全球各地的服务器上，用户可以从离他们最近的节点获取资源，从而加快加载速度。

(2)浏览器缓存：合理设置 HTTP 缓存头（如 Cache-Control），让浏览器缓存静态资源，下次访问时无需再次下载。

(3)HTTP/2：HTTP/2 协议支持多路复用，允许在一个连接上同时发送多个请求，减少了网络延迟。

3.实践项目：优化现有项目

(1)使用 Lighthouse 评估：在 ChromeDevTools 中运行 Lighthouse，获取项目性能分数。

(2)实施一个优化点

• 图像优化：找到项目中的一个图片，使用在线工具（如 TinyPNG）进行压缩。
• 懒加载：为不在首屏的图片添加 loading="lazy" 属性。
• 代码优化：如果项目中有很多 JS 库，可以尝试使用按需加载或 Tree Shaking。

(3)重新评估：再次运行 Lighthouse，观察性能分数是否有提升。