使用 Chrome 开发者工具分析 SAP UI5 应用的 JavaScript 代码执行性能瓶颈试读版
本文目录
- SAP UI5 应用出现性能问题时的两种可能原因
- 使用 Chrome 开发者工具生成 SAP UI5 应用性能统计数据
- Chrome 开发者工具里对 SAP UI5 应用性能数据进行导入和导出
- 如何找到引起 SAP UI5 性能问题的 JavaScript 代码的准确位置
俗话说，工欲善其事，必先利其器。笔者教程之前的文章，曾经介绍过如何使用 Chrome 开发者工具来辅助 SAP UI5 的开发，调试和错误排查：
- SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类
- SAP UI5 应用开发教程之三十七 - 使用 Chrome 开发者工具 Console 面板进行元素审查
- SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息
- SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法
- SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用
本文继续给大家分享，笔者在 SAP 成都研究院担任前端开发工程师时，使用 Chrome 开发者工具对 SAP UI5 应用的 JavaScript 执行代码的性能进行分析的具体步骤和使用经验。
SAP UI5 应用出现性能问题时的两种可能原因
笔者之前的团队在使用 SAP UI5 进行 SAP 标准产品开发时，也负责已发布 SAP UI5 应用的维护。比如客户使用我们的 SAP UI5 应用发现问题时，会通过 customer ticket 的方式，向我们汇报这些故障。自然， SAP UI5 应用的性能问题也是这些 ticket 描述问题的类型之一。
当我收到一个客户发过来的关于 SAP UI5 性能问题抱怨的时候，我一般会首先给问题定性，这个性能问题到底是出在 SAP UI5 前端代码，还是出在后端 OData 服务的执行上？
根据我个人经验，80% 的 SAP UI5 应用性能问题，都出在后端，即 OData 服务在 ABAP 服务器的执行层面上。为了确认我的判断，我会使用事务码 SAT 这些性能监控，测量和分析工具，对 OData 服务的执行性能进行分析：
如果性能问题发生在客户生产系统上，我不便直接操作，那么我会请客户使用 SAT 等工具进行性能数据的搜集，然后我再去使用这些搜集到的数据。
当然，也不能排除性能出现在 SAP UI5 的前端代码中的可能性。比如我遇到过的一个真实案例，一个 SAP UI5 应用运行缓慢，原因是里面一段 JavaScript 解析 Excel 文件的逻辑出现了性能瓶颈。
那么如何使用 Chrome 开发者工具分析 SAP UI5 应用前端的 JavaScript 代码是否存在性能瓶颈呢？这就是本文要分享的内容。