前端性能优化系统知识

目录

1. 了解网页的生命周期

2. 如何进行web性能优化思路

3. 优化方案思路

4.  Web 性能指标（基于用户体验）

5、Core Web Vitals 与 Web Vitals

6、性能测试工具

---

1. 了解网页的生命周期

 

        网站页面的生命周期，通俗地讲就是从我们在浏览器的地址栏中输入一个 URL 后，到整个页面渲染出来的过程。整个过程包括域名解析，建立 TCP 连接，前后端通过 HTTP 进行会话，压缩与解压缩，以及前端的关键渲染路径等，把这些阶段拆解开来看，不仅能容易地获得优化性能的启发，而且也能为今后的前端工程师之路构建出完整的知识框架，网站页面加载的生命周期如下图所示。

2. 如何进行web性能优化思路

（1）首先需要了解性能指标 - 多快才算快？

（2）使用专业的工具可量化地评估出网站或应用的性能表现；

（3）然后立足于网站页面响应的生命周期，分析出造成较差性能表现的原因；

（4）最后进行技术改造、可行性分析等具体的优化实施。

（5）迭代优化

3. 优化方案思路

• 从发出请求到收到响应的优化，比如 DNS 查询、HTTP 长连接、HTTP 2、HTTP 压缩、HTTP 缓存等。
• 关键渲染路径优化，比如是否存在不必要的重绘和回流。
• 加载过程的优化，比如延迟加载，是否有不需要在首屏展示的非关键信息，占用了页面加载的时间。
• 资源优化，比如图片、视频等，不同的格式类型会有不同的使用场景，在使用的过程中是否恰当。
• 构建优化，比如压缩合并、基于 webpack 构建优化方案等。

4.  Web 性能指标（基于用户体验）

（1）First Contentful Paint（FCP）

FCP（First Contentful Paint）首次内容绘制，浏览器首次绘制来自 DOM 的内容的时间，内容必须是文本、图片（包含背景图）、非白色的 canvas 或 SVG，也包括带有正在加载中的 Web 字体的文本。

这是用户第一次开始看到页面内容，但仅仅有内容，并不意味着它是有用的内容（例如 Header、导航栏等），也不意味着有用户要消费的内容。

速度指标

优化方案

https://web.dev/fcp/#how-to-improve-fcp

 

（2）Largest Contentful Paint（LCP）

LCP（Largest Contentful Paint）最大内容绘制，可视区域中最大的内容元素呈现 到屏幕上的时间，用以估算页面的主要内容对用户可见时间。

 

LCP考虑哪些元素

• <img> 元素
• <image>元素内的<svg>元素
• <video> 元素
• 通过 url() 函数加载背景图片的元素
• 包含文本节点或其他内联文本元素子级的块级元素。

为了提供良好的用户体验，网站应力争使用 2.5 秒或更短的“最大内容绘画” 。为确保您达到大多数用户的这一目标，衡量移动设备和台式机设备的页面加载量的第75个百分位数是一个很好的衡量标准。

示例