前端性能优化常用手段

一、前端性能优化的定义以及为什么做性能优化

1 前端性能优化的定义

在Web页面整个生命周期中，占用更小的资源，以更快的速度运行。

Web页面生命周期的三个阶段:

加载阶段：指从发出请求到渲染出完整页面的过程
交互阶段：从页面加载完成到用户交互的整个过程
关闭阶段：用户发出关闭指令后页面所做的一些清理操作

2 为什么做性能优化？

性能是系统设计的标尺。

从系统设计层面分析性能的重要性

后端产品的设计目标

后端高并发系统的设计目标：高可用、高性能、高扩展

高并发：指系统能够同时处理多个请求，而不会出现性能下降或者系统崩溃。高并发系统能够有效地管理并发请求，确保每个请求都能得到及时处理。这通常涉及到多线程或多进程处理，以及对资源的合理分配和锁的管理，以避免竞争条件和死锁。
高可用：系统能够持续不间断地运行，即使面临硬件故障、软件故障、网络问题等异常情况也能保持服务。高可用系统通常具备以下特点：
- 冗余：系统采用冗余组件，如多台服务器、多个数据中心等，以确保一部分组件故障时，系统仍然能够继续工作。
- 故障转移：当系统检测到某个组件故障时，能够自动将工作切换到备用组件上，以保持服务不中断。
- 灾难恢复：系统设有灾难恢复计划，能够在严重故障后迅速恢复服务。
高性能：能够在最短的时间内处理大量的请求，同时保持较低的延迟。性能通常与系统的响应时间和吞吐量有关：
- 响应时间：系统对请求作出响应的时间。高性能系统的响应时间短，能够快速返回结果。
- 吞吐量：单位时间内系统能够处理的请求数量。高性能系统具有高吞吐量，能够有效地利用资源处理更多的请求。
高扩展：系统能够适应不断增长的工作负载，通过增加资源来应对更多的请求，而不会导致性能下降或服务质量降低。一个高扩展性的系统可以通过以下方式来实现：
- 水平扩展：也称为横向扩展或扩展出（Scale Out），指的是增加更多的服务器或节点来分担负载。在这种方式下，系统通常使用负载均衡器来分配请求到不同的服务器上。这种扩展方式可以在不改变现有硬件配置的情况下，通过增加更多的机器来提高系统的处理能力。
- 垂直扩展：也称为纵向扩展或扩展上（Scale Up），指的是增强现有服务器的硬件资源，例如增加CPU、内存或存储。这种方式的局限性在于硬件的物理限制，通常不如水平扩展灵活。
- 弹性扩展：系统能够根据实际的负载情况自动增加或减少资源。在云计算环境中，这通常是通过自动化的扩展策略来实现的，例如自动扩展组。
- 无状态设计：为了更好地进行水平扩展，系统应尽可能设计为无状态，这意味着系统不应该依赖于单个服务器的局部状态信息。无状态的设计使得任何请求都可以由任何服务器处理，从而简化了负载均衡和资源管理。
- 服务解耦：将系统拆分为独立的服务器或微服务，这样可以独立地扩展系统的不同部分。例如，如果数据库是瓶颈，可以单独对数据库进行扩展而不影响其他服务。
- 数据分区：对数据库进行分区或分片，将数据分散到不同的服务器上，以提高数据库的读写能力和存储容量。

要实现这些特性，后端系统需要采取一系列的技术和架构策略，例如使用负载均衡、数据库分片、读写分离、缓存策略、消息队列、服务拆分（微服务架构）、监控与自动化运维等。通过这些方法，系统能够提高性能、应对大量并发请求，并保证服务的持续可用性。

前端产品的设计目标

宏观上：在前端架构和产品能力上追求可扩展性
中观：关注易用性、稳定性、前端性能
微观上：注重选取适当的指标系统辅助我们衡量系统状态

从业务价值层面分析性能的重要性

在移动互联网时代，由于网络状态复杂，手机性能，网页无法多开，场景时间碎片化等等原因，抵达率成为影响转化率的一个重要因素。

性能优化是提高抵达率的最为关键的一个手段。

抵达率：搜索 =► 展现 =► 点击 =► 访问 =► 转化 =► 成交
- 如果点击后一个网页打开慢，用户没时间或等不及，他自然会关掉网页，这样页面的抵达率就低，流量的漏斗就卡在点击和访问之间了，当然也就无从谈起后面的订单转化。
- 根据Google的统计数据：移动站点在加载时间超过3秒，53%的用户会放弃访问。
  - 加载时间在1s延长至3s，跳失率增加32%
  - 加载时间在1s延长至5s，跳失率增加90%
  - 加载时间在1s延长至6s，跳失率增加106%
  - 加载时间在1s延长至10s，跳失率增加123%
用户能够正常访问页面，网页的内容才能产生价值。
加载时间越长跳失率越高，页面抵达率越低订单转化率越低。

以成长论：性能优化是前端工程师进阶的必要能力;

以技术论：性能优化是技术演进的源动力;

以价值论：性能优化会影响用户体验、业务跳失率，进而影响业务转化率。

3 性能优化原则

首先，性能优化不能盲目，一定是问题导向的。脱离了问题，盲目的提早优化会增加系统的复杂度，浪费开发人员的时间。
其次，性能优化要遵守「二八原则」。可以用20%的精力解决80%的性能问题。
再次，性能优化要有数据支撑。在优化过程中需要数据验证优化手段是否有效，以及空间是多少。
最后，性能优化的过程是持续的。系统中出现的性能问题通常也会有多个方面的原因，因此在做性能优化的时候要明确目标。

二、前端性能优化的度量与常用检测工具的使用

1 前端性能优化的度量

度量系统

设计一个度量系统至少需要以下环节：

确定指标
- 加载阶段：首屏时间、首字节时间、秒开率
- 交互阶段：刷新率
- 关闭阶段
采集数据
计算与存储
展现与分析

前端性能优化的度量标准

维度：指事物的某种固有特征，或观察思考事物的分类角度。
- 定性维度
- 定量维度
原子指标：指表达业务含义的原子量化属性且不可再分的概念集合。
复合指标：维度+原子指标，原子指标经过四则运算。
度量周期：指标在时间维度上需要统计的前后跨度。

W3C定义的性能指标

DNS解析耗时
TCP连接耗时
SSL安全连接耗时
网络请求耗时（TTFB）
数据传输耗时
DOM解析耗时
资源加载耗时
首包时间
首次渲染时间
首次可交互时间
DOM Ready时间：CSS树和DOM树合并渲染树后，并执行完成同步JavaScript脚本的时间。在时间点之前，包含了DOM树构建的过程、CSS树构建的过程、以及同步JavaScript脚本执行的时间。
页面完全加载时间：所有处理完成，并且页面上的所有资源（图像等）都已下载完毕的时间。此时会出发浏览器的onload事件。

Lighthouse定义的性能指标

FCP（First Contentful Paint，首次内容渲染）
SI（Speed Index，速度指数）
LCP（Largest Contentful Paint，最大内容绘制）
TTI（Time to Interactive，可交互时间）
TBT（Total Blocking Time，总阻塞时间）
CLS（Cumulative Layout Shift，累计布局偏移）

2 常用检测工具

Performance
Lighthouse

三、如何系统性的进行前端性能优化

1 用户的使用环境

网络环境
设备性能

2 站点自身的性能表现

页面加载阶段由渲染进程和网络进程协同完成的

网络性能

网络优化
- 减少关键资源个数（将关键资源转为非关键资源）
  - 给一些外链的js加上async/defer：如果这个js代码里没有DOM操作或CSSOM操作其实可以把它们改成async/defer，将其变成非关键资源。
  - 内联：将js或css改成内联形式，工作中使用不多。
- 减少关键资源的RTT
  - 升级HTTP协议：http2相比http1.1具有二进制传输、GZip、支持多路复用等能力，降低了网络的开销以及延迟。
  - 使用HTTP缓存：通过合理的缓存策略提高强缓存、协商缓存的命中以此达到较少RTT次数和时长的目的
  - 优化接口请求
  - 使用数据缓存
  - DNS预解析
  - 使用CDN
  - 减少关键资源的个数和减少关键资源的大小的搭配
- 降低关键资源大小
  - 代码分隔
  - 压缩
  - 静态资源服务器开启GZip
  - 非首屏元素延迟加载
- 注：能阻塞页面首次渲染的资源称为关键资源。

渲染性能

渲染优化
- 提高单帧的生成速度
  - 合成线程>重绘>重排
    - 合理利用CSS合成动画
    - 避免强制同步布局和布局抖动
      - DOM批处理
      - transform
  - 避免频繁的垃圾回收
    - 尽可能优化存储结构
    - 尽可能避免小颗粒对象的产生
  - 减少JavaScript脚本执行时间
    - 长任务拆分
    - 优化代码执行逻辑
      - 合理的错误处理
      - 串行接口优化
      - 空间换时间
      - 按需加载
      - 图表渲染优化
      - 深入理解框架/业务
    - 耗时的计算任务移出主线程

四、前端性能优化之Performance实战案例

控制面板
概览面板
性能面板
详情面板
- Summary：统计各指标的时间占用
  - Loading：网络请求时间和HTML解析时间
  - Scripting：JS执行时间
  - Rendering：重排时间
  - Painting：重绘时间
  - System：系统占用时间
  - Idle：等待时间
  - Total
- Bottom-Up：事件时长的排序列表，倒序的，可直接查看花费时间最多的活动。
- Call Tree：事件调用的顺序列表，可直接查看导致最多根活动
- Event Log：记录了期间的活动顺序

首先通过概览面板来定位问题的时间节点，然后再使用性能面板分析该时间节点内的性能数据，如果需要看详细的信息需要在详情面板中查看

前端性能优化常用手段#

一、前端性能优化的定义以及为什么做性能优化#

1 前端性能优化的定义#

2 为什么做性能优化？#

从系统设计层面分析性能的重要性#

后端产品的设计目标#

前端产品的设计目标#

从业务价值层面分析性能的重要性#

3 性能优化原则#

二、前端性能优化的度量与常用检测工具的使用#

1 前端性能优化的度量#

度量系统#

前端性能优化的度量标准#

W3C定义的性能指标#

Lighthouse定义的性能指标#

2 常用检测工具#

三、如何系统性的进行前端性能优化#

1 用户的使用环境#

2 站点自身的性能表现#

网络性能#

渲染性能#

四、前端性能优化之Performance实战案例#