使用 Chrome 开发者工具分析 SAP UI5 应用的 JavaScript 代码执行性能瓶颈

简介: 使用 Chrome 开发者工具分析 SAP UI5 应用的 JavaScript 代码执行性能瓶颈

本文继续给大家分享,笔者在 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 服务的执行性能进行分析:


80. 使用事务码 SAT 比较传统的 SELECT SQL 语句和 OPEN / FETCH CURSOR 分块读取 ABAP 数据库表两种方式的性能差异

如果性能问题发生在客户生产系统上,我不便直接操作,那么我会请客户使用 SAT 等工具进行性能数据的搜集,然后我再去使用这些搜集到的数据。


当然,也不能排除性能出现在 SAP UI5 的前端代码中的可能性。比如我遇到过的一个真实案例,一个 SAP UI5 应用运行缓慢,原因是里面一段 JavaScript 解析 Excel 文件的逻辑出现了性能瓶颈。


那么如何使用 Chrome 开发者工具分析 SAP UI5 应用前端的 JavaScript 代码是否存在性能瓶颈呢?这就是本文要分享的内容。



相关文章
|
22天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
7天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
7天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
8 0
|
17天前
|
监控 前端开发 JavaScript
如何在浏览器中使用javaScript进行代码调试
【4月更文挑战第11天】在浏览器中调试JavaScript是前端开发的关键技能。使用开发者工具(可通过F12、右键检查或菜单栏访问),遵循以下步骤:1) 打开Sources标签页查看所有脚本;2) 设置断点在需要暂停的代码行;3) 刷新页面触发断点;4) 利用调试工具如Scopes、Watch、Call Stack等检查代码状态;5) 使用Console辅助调试;6) 利用其他工具如Network、Performance和Memory进行性能分析。确保使用最新工具,保持代码清晰,以提升调试效率。
35 4
|
23天前
|
小程序 开发者
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
|
23天前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
34 0
|
2月前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
75 0
|
4月前
|
Web App开发 JavaScript
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
313 0
|
3月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
156 0
|
3月前
|
Web App开发 前端开发 搜索推荐
Chrome 浏览器中的一个隐藏设置页面
Chrome 浏览器中的一个隐藏设置页面
108 8