通俗讲解前端性能优化+项目实战（一）

西红没有市
70 阅读6分钟

一、前端性能优化基础概念

前端性能优化是指通过技术手段和策略提升网页加载速度、响应效率及用户体验的过程。其核心目标包括减少资源消耗、加快页面加载速度、提升交互流畅性

1. 性能优化核心维度

1. FCP（First Contentful Paint，首次内容渲染时间）

  • 定义：页面首次渲染文本、图片等任何内容的时间点，反映初步加载速度。

  • 优化目标：缩短用户感知的“白屏时间”，提升首屏体验。

  • 优化策略：

    • 内联关键CSS，避免阻塞渲染。
    • 异步加载非关键JavaScript（如使用async/defer属性）。
    • 合并与压缩CSS/JavaScript文件。
    • 使用SSR（服务器端渲染）或预渲染技术生成静态HTML。

2. Largest Contentful Paint (LCP)

  • 定义：记录页面中最大文本块或图像元素首次渲染的时间，反映视觉加载速度。

  • 优化策略：

    • 使用现代图像格式（WebP/AVIF）并压缩图片。
    • 优先加载首屏关键资源（如主图、标题）。
    • 使用CDN加速静态文件传输。
    • 避免阻塞渲染的第三方脚本（如广告、统计代码）。
    • 延迟非关键资源加载（如异步加载JavaScript）。

3. First Input Delay (FID)

  • 含义：用户首次与页面交互（如点击按钮）到浏览器实际响应的时间间隔。

  • 优化方向：

    • 减少主线程任务（如拆分长任务、使用Web Worker）。
    • 延迟非关键JS执行（如defer/async）。

4. Cumulative Layout Shift (CLS)

  • 含义：页面加载过程中布局偏移的总分数（由意外元素移动导致，如未设置尺寸的图片、动态插入的广告）。

  • 计算方式：影响分数 × 距离分数（单个元素的偏移量 × 面积占比）。

  • 优化方向：

    • 内联css或及时加载关键css文件
    • 为图片明确的width和height。
    • 避免动态插入内容覆盖已有元素（如使用position: absolute需谨慎）。

5. TBT（Total Blocking Time，总阻塞时间）

  • 定义：衡量主线程被长任务阻塞的总时间，反映页面交互响应能力。

  • 原因：浏览器的渲染程序进程会将您的代码转换为用户可以与之互动的网页。默认情况下，渲染程序进程的主线程通常会处理大多数代码：它会解析 HTML 并构建 DOM，解析 CSS 并应用指定的样式，然后解析、评估和执行 JavaScript。主线程也会处理用户事件。 因此，每当主线程忙于执行其他操作时，您的网页可能不会响应用户互动，从而导致糟糕的体验

  • 优化策略：

    • 将长任务拆分为小任务（如使用setTimeout或requestIdleCallback）。

    • 使用Web Workers处理计算密集型任务。

    • 减少DOM操作频率，使用DocumentFragment或虚拟DOM。

    • 避免同步执行耗时操作（如同步XMLHttpRequest）。

二、前端性能监测工具

1. Lighthouse

  • 核心功能：由Google开发的开源工具，集成在Chrome开发者工具中，可生成包含性能、可访问性、SEO等维度的综合报告。

  • 对FCP/LCP的优化：

    • 提供具体优化建议，如压缩图片、减少阻塞渲染的CSS/JS、启用CDN、设置缓存等。

2(1).png

Lighthouse 报告的“优化建议”部分会列出阻止系统对您网页进行首次绘制的所有网址。目标是通过内嵌关键资源、推迟非关键资源以及移除所有未使用的资源，减少这些呈现阻塞型网址的影响。

2.WebPageTest

  • 核心功能：支持模拟不同地理位置、浏览器和网络条件（如3G/4G）下的页面加载性能。

  • 对FCP/LCP的优化：

    • 通过瀑布图（Waterfall Chart）可视化资源加载顺序，识别阻塞FCP的CSS/JS或延迟LCP的大图。
    • 提供Filmstrip视图，逐帧展示页面渲染过程，直观分析FCP和LCP的时间节点。

4(1).png

5(1).png

6.png

3.PageSpeed Insights

  • 核心功能：Google提供的在线工具，结合实验室数据（Lab Data）和用户数据（Field Data）评估性能。

  • 对FCP/LCP的优化：

    • 显示FCP和LCP的数据（如75%用户加载时间），帮助评估优化效果。
    • 提供机会（Opportunities）和诊断（Diagnostics）板块，例如建议使用WebP格式压缩图片以提升LCP。

7.png

关键渲染路径是指网页开始在浏览器中渲染之前所涉及的步骤。为了渲染网页，浏览器需要 HTML 文档本身以及渲染该文档所需的所有关键资源。

渐进式渲染

Web 本身就是分布式的。与在使用前安装的原生应用不同，浏览器无法依赖于网站是否具有呈现网页所需的所有资源。因此，浏览器非常擅长以渐进的方式呈现网页。原生应用通常有安装阶段和运行阶段。不过，对于网页和 Web 应用，这两个阶段之间的界限要模糊得多，浏览器的设计就是充分考虑了这一点。

浏览器一旦有资源来呈现网页，通常就会开始呈现。因此，选择的关键在于何时呈现：何时太早？

如果浏览器在仅包含一些 HTML 时就尽快呈现（但在没有任何 CSS 或必要的 JavaScript 之前），则网页会暂时看起来损坏，并且在最终呈现时会发生很大变化。与在初始呈现空白屏幕一段时间（直到浏览器拥有初始呈现所需的更多资源，从而提供更好的用户体验）相比，这种体验更差。

另一方面，如果浏览器等待所有资源可用，而不是执行任何顺序渲染，则用户将需要等待很长时间；如果网页在更早的时间点就已可用，则这种等待通常是没有必要的。

浏览器需要知道它应等待的资源数量下限，以避免呈现明显不佳的体验。另一方面，浏览器也不应等待过长时间才向用户显示内容。浏览器在执行初始渲染之前执行的一系列步骤称为关键渲染路径。

了解关键渲染路径有助于提高 Web 性能，因为这样可以确保您不会过度阻塞初始网页渲染。不过，同时请务必不要通过从关键渲染路径中移除初始渲染所需的资源，而导致渲染过早发生。

关键渲染路径

渲染路径包括以下步骤：

  • 从 HTML 构建文档对象模型 (DOM)。
  • 从 CSS 构建 CSS 对象模型 (CSSOM)。
  • 应用会更改 DOM 或 CSSOM 的任何 JavaScript。
  • 从 DOM 和 CSSOM 构建渲染树。
  • 在页面上执行样式和布局操作，以查看哪些元素适合放置在哪里。
  • 绘制内存中元素的像素。
  • 如果像素有重叠，则合成像素。
  • 将所有生成的像素实际绘制到屏幕上。

布局是查找元素几何图形的过程。主线程会遍历 DOM 和计算样式，并创建包含 x、y 坐标和边界框大小等信息的布局树。布局树的结构可能与 DOM 树类似，但它仅包含与网页上显示的内容相关的信息。如果应用了 display: none，则该元素不属于布局树（不过，具有 visibility: hidden 的元素属于布局树）。同样，如果应用了包含 p::before{content:"Hi!"} 等内容的伪元素，即使该元素不在 DOM 中，也会包含在布局树中

avatar
文章
阅读
粉丝