关于页面性能优化

性能优化的分类

在页面性能优化方面，通常可以从多个层面进行，以下是一些常见的优化方式：

网络层面

• 压缩资源：对 HTML、CSS、JavaScript 等文件进行压缩，减少文件体积，从而加快网络传输速度。可以使用工具如 Gulp、Webpack 等在构建过程中对资源进行压缩。
• 图片优化：对图片进行压缩，在保证图片质量的前提下，尽量减小图片文件大小。还可以根据不同的设备和屏幕分辨率，提供合适分辨率的图片，如使用响应式图片或者根据设备像素比加载不同的图片资源。此外，采用现代的图片格式，如 WebP，它在相同质量下通常比 JPEG 和 PNG 等格式的文件体积更小。
• 缓存策略：合理设置缓存策略，对不常变化的资源设置较长的缓存时间，使用户再次访问页面时可以直接从缓存中读取，减少网络请求。可以通过设置 HTTP 响应头中的 Cache-Control、Expires 等字段来控制缓存。

代码层面

• 合并脚本和样式表：减少脚本和样式表的数量，将多个小的脚本和样式表合并成一个，减少 HTTP 请求次数。
• 优化 JavaScript 执行：避免在页面加载时执行大量复杂的 JavaScript 代码，将非必要的脚本放在页面底部，或者使用异步加载和延迟加载的方式，确保页面的主要内容能够尽快渲染出来。同时，要注意避免频繁的 DOM 操作，因为 DOM 操作通常比较耗时，可以使用文档片段（DocumentFragment）等方式批量操作 DOM。
• CSS 优化：使用合理的 CSS 选择器，避免使用过于复杂和嵌套过深的选择器，以提高 CSS 渲染效率。同时，将 CSS 放在文档的头部，以便浏览器能够尽早开始解析和渲染样式。

渲染层面

• 首屏优化：对首屏内容进行重点优化，确保首屏所需的资源能够尽快加载和渲染。可以采用骨架屏、懒加载等技术，先展示一个大致的页面结构，然后再逐步加载和填充具体内容。
• 减少重排和重绘：重排（回流）和重绘是浏览器渲染页面时的性能开销，要尽量减少引起重排和重绘的操作。例如，避免频繁地改变元素的样式和布局，尽量一次性修改元素的多个样式属性，使用 CSS 的 transform 和 opacity 属性来实现动画效果，而不是改变 left、top 等属性，因为前者不会触发重排。
• 字体优化：尽量减少使用自定义字体，如果必须使用，要选择合适的字体格式，并进行字体文件的压缩。同时，可以使用字体加载策略，如 font-display: swap，让浏览器在字体加载过程中先使用系统默认字体显示文本，避免文本长时间空白。

其他层面

• CDN 加速：将静态资源部署到内容分发网络（CDN）上，CDN 会根据用户的地理位置，从距离用户最近的服务器节点提供资源，从而加快资源的加载速度。
• 优化服务器响应时间：优化服务器端的代码和数据库查询，减少服务器处理请求的时间，提高响应速度。可以采用缓存技术、数据库索引优化、代码优化等手段来提升服务器性能。

对于这些性能优化，你是怎么判断是否优化，性能指标的判断如何做

对于页面性能优化是否有效的判断，可以通过一系列性能指标来衡量，以下是一些常见的性能指标及判断方法：

加载时间相关指标

• 首次内容绘制（First Contentful Paint，FCP）

  • 指标含义：浏览器首次绘制来自 DOM 的内容的时间点，包括文本、图像、SVG 等，但不包括背景图片等。这是用户首次感知到页面开始加载的时间。
  • 判断标准：一般来说，FCP 应在 1 秒以内，对于性能较好的页面，目标是在 0.8 秒甚至更短时间内完成。如果 FCP 时间过长，用户可能会认为页面加载缓慢，从而产生不良的体验。

• 首次有意义绘制（First Meaningful Paint，FMP）

  • 指标含义：页面首次呈现出对用户有意义内容的时间，通常是首屏主要内容绘制完成的时间。
  • 判断标准：FMP 一般应在 2 秒以内。可以通过可视化工具如 Chrome 开发者工具中的 Performance 面板或 Lighthouse 工具来查看 FMP 时间，若超过 2 秒，可认为首屏加载存在优化空间。

• 页面加载时间（Page Load Time）

  • 指标含义：从用户输入网址或点击链接到页面完全加载完成，即所有资源（包括图片、脚本、样式表等）都已下载并解析，页面处于可交互状态的时间。
  • 判断标准：一般建议页面加载时间不超过 3 秒。可以通过浏览器自带的开发者工具或专业的性能测试工具如 WebPageTest 等来获取页面加载时间。

交互性相关指标

• 可交互时间（Time to Interactive，TTI）

  • 指标含义：页面达到完全可交互状态所需的时间，此时页面的主要资源已加载完成，用户可以与页面进行交互，如点击按钮、输入文本等，且响应较为流畅。
  • 判断标准：TTI 应在 3 秒以内。在 Chrome 开发者工具的 Performance 面板中可以查看 TTI 的具体数值，若超过 3 秒，说明页面在交互响应方面可能存在问题，需要进一步优化。

• 帧率（Frames per Second，FPS）

  • 指标含义：浏览器每秒绘制新帧的数量，反映了页面动画和交互的流畅程度。
  • 判断标准：一般来说，60FPS 是理想状态，代表页面交互非常流畅。若帧率低于 30FPS，用户可能会明显感觉到页面卡顿，动画不流畅。可以通过浏览器开发者工具中的 Performance 面板或专门的帧率监测工具来查看页面的帧率情况。

视觉稳定性相关指标

• 最大内容绘制（Largest Contentful Paint，LCP）

  • 指标含义：视口中最大的内容元素（如图片、文本块等）绘制到屏幕上的时间。
  • 判断标准：LCP 的目标是在 2.5 秒以内。如果 LCP 时间过长，可能会导致用户在页面加载过程中看到部分内容闪烁或跳动，影响视觉体验。

• 累积布局偏移（Cumulative Layout Shift，CLS）

  • 指标含义：测量页面加载过程中发生的所有意外布局偏移的总和，反映了页面视觉稳定性。

  • 判断标准：CLS 应小于 0.1，数值越低表示页面布局越稳定。若 CLS 值较高，说明页面在加载过程中可能存在元素频繁跳动的情况，会让用户感到困惑和不适。

通过对这些性能指标的监测和分析，可以较为全面地判断页面性能优化是否有效，并针对性地找出需要进一步改进的地方。