# 性能组成分析

页⾯性能的组成和影响因素⽐较复杂，⽤户设备性能、webview 容器能⼒、⽤户⽹络、后端接⼝等都是影响页⾯性能的因素。回归页⾯

的本质，是内容的呈现。接下来从 “内容呈现” 这个本质出发， 推导出我们在性能上需要关注的环节。

⼴义地来理解页⾯内容，包含：

• 页⾯上视觉呈现的内容 （最终借助 html 元素 、图⽚ 、 等资源来呈现）

• 内容背后可交互的能⼒ （借助 js 资源实现）

内容是由 资源 组成的，⽽在 web 技术下，资源是基于 http 协议，通过⽹络来加载这些资源，然后在浏览器上完成组装和计算，最终以

产品及功能的形式呈现给⽤户。那么性能优化的主要⽅针就是：

• 加快页⾯资源的加载速度

• 加快页⾯资源的呈现速度

页面整体耗时 = 资源加载时间 + 资源呈现时间

不同类型的页⾯资源，背后的技术和对页⾯性能的影响有所不同，为了⽅便对同⼀类资源进⾏同⼀类 优化⽅案的归纳，这⾥将资源分为：

• 静态资源 - js、css、图⽚、字体

• 动态资源 - 如果是 SSR 页⾯，那么就是 html 本⾝，如果是 CSR 页⾯，那么就是数据接⼝

# 加快资源的下载速度

资源的加载速度与⼏个关键因素相关，如下：

围绕这⼏个因素，加快资源的加载速度，有⼏个⽅向：

1. 缩短资源传输距离
2. 减⼩资源开始加载时间
3. 减少资源传输体积
4. 加快⽹络传输速度
5. 加快后端响应速度

# 加快资源的呈现速度

资源下载后，由浏览器呈现给⽤户，呈现的速度受以下因素影响：

• 呈现卡顿时间

• 呈现执⾏时间

• 是否可先呈现部分内容