国庆黄金周开始的前一天，9月30日，我所在的开发团队收到了一个关于 Angular 应用的服务器端渲染(Server Side Render，简称为 SSR）的客户 incident，让我有机会学习如何使用 Chrome 开发者工具来分析 Web 应用的性能问题。
Jerry 之前曾经写过一篇关于 Chrome 开发者工具的文章：Jerry和您聊聊Chrome开发者工具，本文算是该文的后续。
本来我是想用 Angular 应用为例来介绍工具的用法，但考虑到本公众号一万多读者里面，绝大多数前端开发朋友们，使用的还是 SAP UI5，因此最后还是选择了基于 SAP UI5 应用来介绍使用 Chrome Dev Tools 进行 Web 应用性能分析的使用步骤。
本文提及的 SAP UI5 应用，指通过 FreeStyle 方式开发的 SAP UI5 应用。通过 Fiori Elements 开发的 SAP UI5，不在本文讨论之列。
根据我以往的工作经验，如果一个 SAP UI5 应用出现了性能问题，很多时候性能瓶颈都出在该应用消费的后台 API，比如 OData 服务或者其他 AJAX 调用。
同 Angular 相比，SAP UI5 框架为应用开发人员屏蔽了 Web 前端开发中的很多底层细节，比如 DOM 操作，CSS 的编辑，数据双向绑定和事件注册等逻辑，均使用 UI5 封装之后的方式来完成。因此一个 SAP UI5 应用，纯粹的前端代码里，由于应用人员编码失误导致性能问题的概率相对 Angular 要低得多。
因此，为了演示 Chrome 开发者工具进行 SAP UI5 性能分析的使用方法，我在自己的 SAP UI5 脚手架应用里，故意编写了一些会引起性能问题的前端代码，然后通过 Chrome 开发者工具，把这些导致性能问题的代码进行定位。
我这个 SAP UI5 脚手架应用可以通过如下 url 访问：
https://wangzixi-diablo.github.io/ui5-toolset/webapp/index.html
我期望的结果是，能够使用 Chrome 开发者工具，对该 SAP UI5 应用进行性能分析，通过工具的帮助，将性能问题快速定位到这个 heavyFunction 函数。
其实使用 Chrome 开发者工具的 Performance 面板对 Web 应用进行性能分析，使用方式和 SAP ABAP 数据库性能分析工具 ST05 非常类似，即开启跟踪模式，在该模式下运行数据库事务(Web 应用)，然后关闭跟踪模式，然后分析 ST05 (Chrome 开发者工具) 输出的跟踪结果。
首先打开一个 Chrome 隐身窗口，这是为了排除 Chrome 安装的其他扩展对性能分析可能造成的影响。
打开 Chrome 开发者工具，选择 Performance 标签页，打开设置选项，Network 选择成 Slow 3G，CPU 选择成六倍速降低：6x slowdown.
然后点击 Record 图标，开启性能跟踪模式：
我们在代码编辑器里编写的 HTML 代码，在从服务器端被加载到浏览器并被解析，到呈现在最终用户眼前，需经历上图所示的几个步骤：执行 HTML 页面里的 JavaScript 代码，构建 DOM 树，将文本格式的 CSS，转换成浏览器可以理解的数据结构，计算元素样式，生成渲染树，遍历渲染树，计算渲染树中每一个节点的大小和位置，创建待绘制列表，最终进行绘制(Paint)和合成(Composite).
而 Web 应用在使用过程中，由于用户与页面交互，导致 JavaScript 代码执行，可能会使得页面元素的大小及位置等属性发生改变，从而触发浏览器重新计算布局，最终重新渲染页面。我们称浏览器这种行为叫做回流(reflow)，即我们在上图 Chrome 开发者工具里观测到的警告信息：
Forced reflow is a likely performance bottleneck.
回到我们的例子，受到回流操作影响的元素总数为 10087，触发回流操作的代码：ResizeHandler-dbg.js.
Resize 检测逻辑也很简单，比较 DOM 元素新旧 width 和 height 是否相同。若不相同，则如下图红色矩形框内代码所示，触发 resize 事件。
获取 DOM 元素新的宽度的代码正好位于 170 行，这行代码访问了元素属性 offsetWidth.
按照这篇文档的记录，下列属性或方法被 JavaScript 调用时，会迫使浏览器以同步的方式重新计算样式，触发布局操作即回流。
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
总结
本文介绍的使用 Chrome 开发者工具来分析 Web 应用性能问题的步骤，只是该工具使用技巧的冰山一角。后续有机会，Jerry 会继续把我在日常工作中学到的东西分享出来。
如果遇到 SAP UI5 应用出现性能问题，优先排查性能瓶颈是否由后台 API 造成。对于 SAP UI5 应用的前端实现来说，因为 UI5 已经为应用开发人员做出了良好的封装，因此绝大部分情形，应用开发人员无需手动操纵 DOM 元素和 CSS 样式，所以也不大可能出现类似本文 heavyFunction 函数里模拟的极端情况。
无论如果，如果你怀疑你的 SAP UI5 应用的前端也可能有性能问题，此时无需胡乱猜测，用本文介绍的步骤一试便知分晓。
感谢阅读。
Jerry 的 SAP UI5 专题
在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用
答网友提问：使用 SAP Fiori Tools 创建的 Fiori Elements 应用，如何进行二次开发？
本地开发好的 SAP Fiori Elements 应用，如何部署到 ABAP 服务器上
深入掌握 SAP Fiori Elements 工作原理的前提条件：理解 Smart Field
深入理解 SAP Fiori Elements 工作原理系列之二：如何给 SAP Fiori Elements 应用添加自定义按钮
SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
SAP Fiori Elements List Report Smart Table 列项目宽度计算的奥妙
作为一名 ABAP 资深顾问，下一步可以选择哪一门 SAP 技术作为主攻方向？
SAP UI5应用开发人员了解UI5框架代码的意义
SAP UI5 module懒加载机制
SAP UI5 控件渲染机制
HTML原生事件 VS SAP UI5 Semantic事件
SAP UI5控件元数据的元数据实现
SAP UI5控件的实例数据修改和读取逻辑
SAP UI5控件数据绑定的实现原理
SAP UI5控件数据绑定的三种模式：One Way, Two Way和OneTime实现原理比较
谈谈 SAP UI5 的视图控件 ID，以及其和 Angular 视图的异同
对 SAP UI5 一无所知的新手，从哪些材料开始学习比较好？
SAP UI5 OData谣言粉碎机：极短时间内发送两个Odata request,前一个会自动被cancel掉吗？
SAP UI 搜索分页技术
如何在 SAP UI5 应用中集成第三方库 ：一个在移动设备上查看 Web 应用打印调试信息的小技巧
基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行项目的添加和删除实现
纪念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步骤和工作原理介绍
本地修改远端 SAP UI5 框架文件的一个小技巧
一个详尽的面向 SAP UI5 初学者的教程 - 如何在 SAP UI5 中绘制图表 Chart
