Performance

https://mp.weixin.qq.com/s/ObYpOgoD4kgjOKKaAX9gpQ

关于Performance面板的基础用法介绍，可参考上一篇文章《“Performance面板”一文通，解锁前端性能优化工具基础用法！》。文章中还从一个HTTP请求的四阶段的角度来介绍Performance图的”观看方式”，并重点介绍了worker线程跟主线程的协作关系

本篇文章中，我们将会以一个实际网页 ——VPC列表页为例，介绍Performance抓图及分析的过程，并将上一篇文章中介绍的相关内容串起来，希望每位frontend developer都能掌握用Performance分析页面性能的能力。

PS：这里假设我们的分析目标是：让列表页的主内容区域尽快展示出来，以避免长时间白屏；另外，为求简洁，下文叙述中统一将Performance录制的结果图叫做”性能图”

二、分析前准备
正式分析之前，建议做一些准备工作，能有效提高后续的分析效率。

1. 环境准备
   1）选一个良辰吉日

建议关闭一些应用程序、浏览器页签，尽量让电脑CPU空闲一些，（也建议关掉通信软件，让自己心情好一些）。尽量避免一边开会一边分析，避免分析过程被频繁打断，因为分析过程可能遇到各种奇怪的现象，倘若再被其它事务打断，心态直接崩溃，那么就分析不下去了……

2）选浏览器无痕模式

建议在浏览器无痕模式下录制性能图并进行分析，因为一些特殊的浏览器配置、浏览器插件 都可能影响网页的加载过程，干扰分析结果。

3）选生产环境进行分析

我们可能有多种不同环境：本地代理环境（俗称localhost）、类生产环境、生产环境 等。只有生产环境是最真实贴近用户的，所以建议在生产环境下进行网页性能分析。

但需要注意的是，生产环境部署的代码，跟源码往往有较大形态上的差异（eg：打包工程的混淆、部署时的加工、服务端渲染的处理等）。所以，生产环境的性能图在某些代码细节上可能无法深入研究，此刻，我们还是需要其它环境的性能图进行辅助对比。

2. 代码准备
   1）了解代码结构和加载流程

建议先从源码角度，详细了解待分析页面的结构及加载流程，例如我们讨论的样例—— VPC列表页的结构如下：

页面结构

图片
• 红色框：由基础框架console-ui提供的header、sidebar 实现
• 蓝色框：由业务代码实现，采用angular技术框架，NG App下挂载一个根组件（VpcComponent）
• 绿色框：根组件下分为 导航组件（LeftmenuComponent）和 列表页组件（VpcListComponent）
代码结构

<!-- 根组件 -->

<vpc-component>

    <leftmenu-component><!-- 导航组件 --></leftmenu-component>

    <router-outlet>

        <!-- 内容区-路由渲染点 -->

        <vpc-list-component><!-- 列表页组件 --></vpc-list-component>

    </router-outlet>

</vpc-component>

图片
• 主渲染流程是：NG App启动 => 加载根组件 => 路由渲染 => 加载列表页组件
• angular中每个组件都会经历生命周期：constructor => … => ngOnInit => … => ngAfterViewInit => … （这里只列举一些常用生命周期钩子，完整的说明见 组件生命周期。PS：这一点不理解也不妨碍下文阅读）
2）关键节点加performance.mark

很关键的是：在我们的主渲染流程上一些关键的时间节点加上performance.mark，或者关键时间段加上console.time/timeEnd。这样在性能图的Timings面板上就会显示这些标记，从而帮助我们确认各个执行环节。

例如，针对VPC列表页的主渲染流程，我们在 NG App启动、根组件constructor及ngAfterViewInit、列表页组件constructor及ngAfterViewInit，分别加上performance.mark，则能在Timings面板中看到下图情况：

图片
PS1：Timings面板中的线很细，不仔细观察可能会漏掉。

PS2：为了针对生产环境进行分析，我们可能需要提前在代码中预埋performance.mark，待上线后才能利用的上。

3）录制性能图

在Network面板清空已有记录，在Performance面板多点几下垃圾回收，然后开始录制。录制完成后，将Performance面板的性能图导出成json文件，并将Network面板的网路请求记录导出成har文件，保存在本地以方便后续查看。

三、数据分析
录制好性能图后，建议先分析Network面板中的index.html，大致了解加载了哪些静态资源，然后再投入性能图的分析

1. 分析index.html
   首先分析下Network面板中的index.html，大致了解页面加载了哪些静态资源。 一般源码中的index.html跟浏览器实际执行的index.html往往有很大差别，因为代码(打包)工程会对index.html进行魔改，如果有服务端渲染机制，那么服务渲染时可能还会插入一些样式、脚本。所以，浏览器最终执行的index.html将会是 源码+工程修改+服务端渲染 之后的结果。

例如，针对VPC列表页的html进行分析，会发现其加载了以下资源（按html中从上到下的顺序排列）

图片
我们需要搞清楚浏览器会开几个TCP连接？哪些资源会挤在同一个连接中？因为同一个连接中的资源会互相争抢网络带宽 。

分辨方法是：h2下同一个域名的资源会共用同一个TCP连接，http/1.1下同一个域名可能会开多个TCP连接，资源们按顺序排队。 所以上表中，所有CDN域下的资源共用同一个TCP连接，Server域下只有一个资源，暂时只开一个TCP连接。

PS：说“暂时”是因为，后续可能会有动态加载js、或者发起ajax、fetch请求，可能会增加TCP连接数量。

另外，下载优先级是由浏览器综合分析并自动分配的，我们无法直接指定优先级。并且不同版本浏览器的分配策略各异，但大多数情况下，会遵循如下规则：

• 通过