如何找到加载缓慢的 SAPUI5 应用程序的加载瓶颈

Question

I'm building a custom SAPUI5 app which consists of a seven diagrams ( sap.viz.ui5.controls.VizFrame ) in the page's header content (nested inside a sap.suite.ui.commons.ChartContainer ) and a grid table ( sap.ui.table.Table ) in the main content area.我建立一个自定义的应用程序SAPUI5它由七个图（的sap.viz.ui5.controls.VizFrame在页面的页眉内容（嵌套在里面） sap.suite.ui.commons.ChartContainer ）和网格表（ sap.ui.table.Table ）在主要内容区域。 The data for the charts and the table is provided by an OData V2 Service and the app is running stand-alone on the latest version (1.81.0).图表和表格的数据由 OData V2 服务提供，该应用程序在最新版本 (1.81.0) 上独立运行。

The problem is the long loading time of the app.问题是应用程序的加载时间长。 It takes between 7 and 20 seconds.需要 7 到 20 秒。 Is this common for a "more complex" app?这对于“更复杂”的应用程序来说是常见的吗？ I tried to find the bottleneck but everything looks fine.我试图找到瓶颈，但一切看起来都很好。 Many network requests are cached (they take 0ms), however, there is a slight delay in between them and I can't see why.许多网络请求被缓存（它们需要 0 毫秒），但是，它们之间有轻微的延迟，我不明白为什么。 Additionally, there is the following warning in the console, although I'm using the data-sap-async="true" in my index.html file:此外，尽管我在index.html文件中使用了data-sap-async="true" ，但控制台中还有以下警告：

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. [弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它对最终用户的体验有不利影响。 For more help, check https://xhr.spec.whatwg.org/ .如需更多帮助，请查看https://xhr.spec.whatwg.org/ 。 [syncXHRFix-dbg.js:211:15] [syncXHRFix-dbg.js:211:15]

Code snippets of my index.html and manifest.json我的 index.html 和 manifest.json 的代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Loading - Customer Fact Sheet</title>
        <script id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_fiori_3"
            data-sap-ui-resourceroots='{"com.schott.fiori.customerfactsheet.customerfactsheet-fiori3": "./"}'
            data-sap-ui-compatVersion="edge"
            data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
            data-sap-ui-async="true"
            data-sap-ui-frameOptions="trusted">
        </script>
        <link href="https://www.schott.com/static/assets/gfx/favicon/SCHOTT_16.png" rel="shortcut icon" type="image/png" />
    </head>
    <body class="sapUiBody">
        <div data-sap-ui-component data-name="com.schott.fiori.customerfactsheet.customerfactsheet-fiori3" data-id="container" data-settings='{"id" : "customerfactsheet-fiori3"}'></div>
    </body>
</html>

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "com.schott.fiori.customerfactsheet.customerfactsheet-fiori3",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.0"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "servicecatalog.connectivityComponentForManifest",
            "version": "0.0.0"
        },
        "dataSources": {
            "YODATA_SD_CFS_MATRIX_SRV": {
                "uri": "/sap/opu/odata/sap/YODATA_SD_CFS_MATRIX_SRV/",
                "type": "OData",
                "settings": {
                    "localUri": "localService/metadata.xml"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "rootView": {
            "viewName": "com.schott.fiori.customerfactsheet.customerfactsheet-fiori3.view.Main",
            "type": "XML",
            "async": true,
            "id": "Main"
        },
        "dependencies": {
            "minUI5Version": "1.65.6",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": false
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "com.schott.fiori.customerfactsheet.customerfactsheet-fiori3.i18n.i18n"
                }
            },
            "": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Client",
                    "defaultBindingMode": "OneWay",
                    "defaultCountMode": "Request"
                },
                "dataSource": "YODATA_SD_CFS_MATRIX_SRV",
                "preload": true
            }
        },
        "resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "com.schott.fiori.customerfactsheet.customerfactsheet-fiori3.view",
                "controlAggregation": "pages",
                "controlId": "app",
                "clearControlAggregation": false
            },
            "routes": [{
                "name": "RouteMain",
                "pattern": "RouteMain",
                "target": ["TargetMain"]
            }],
            "targets": {
                "TargetMain": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewId": "Main",
                    "viewName": "Main"
                }
            }
        }
    },
    "sap.platform.hcp": {
        "uri": "webapp",
        "_version": "1.1.0"
    }
}

Screenshots of my network tab我的网络选项卡的屏幕截图

Answer 1

As the Network tab shows, there are many modules loading sequentially one by one and many of them even via sync XHR.正如“网络”选项卡所示，有许多模块一个接一个地依次加载，其中许多甚至通过同步 XHR 加载。 The most important task is to reduce sync XHRs as much as possible.最重要的任务是尽可能减少同步 XHR。

I see in the manifest.json that only a small number of libraries are declared.我在manifest.json看到只声明了少量库。 According to the Network tab, however, the app uses controls from other libs which aren't declared in the dependencies .但是，根据 Network 选项卡，该应用程序使用来自其他库中的控件，这些控件未在dependencies声明。
So it should be:所以应该是：
```
 "sap.ui5": { "dependencies": { "libs": { "sap.ui.core": {}, "sap.m": {}, "sap.ui.table": {}, "sap.f": {}, "sap.ui.unified": {}, "sap.ui.layout": {}, "sap.viz": {}, "sap.suite.ui.commons": {} },
```
^{Some libs are required by other libs transitively (eg sap.ui.table requires sap.ui.unified ).}^{一些库被其他库传递需要（例如sap.ui.table需要sap.ui.unified ）。} ^{^src You may then add "sap.ui.unified": { lazy: true } if that lib is not directly in use.} ^{^src然后您可以添加"sap.ui.unified": { lazy: true }如果该库未直接使用。}
Preload thirdparty modules asynchronously beforehand that are usually loaded via loadSyncXHR .预先异步预加载通常通过loadSyncXHR加载的第三方模块。
If you inspect the Initiator column within the Network tab, you can detect more modules that are loaded via sync XHR.如果您检查 Network 选项卡中的Initiator列，您可以检测到更多通过同步 XHR 加载的模块。 Adding those modules to the data-sap-ui-modules should avoid it:将这些模块添加到data-sap-ui-modules应该避免它：
```
 <script id="sap-ui-bootstrap" data-sap-ui-modules="sap/ui/thirdparty/datajs,sap/ui/thirdparty/require" ...>
```
^{The sap/ui/thirdparty/datajs is required by v2.ODataModel .} ^{v2.ODataModel需要sap/ui/thirdparty/datajs v2.ODataModel sap/ui/thirdparty/datajs 。} ^{The sap/ui/thirdparty/require module by the sap.viz library.} ^{sap.viz库的sap/ui/thirdparty/require sap.viz sap/ui/thirdparty/require模块。} ^{Both modules are usually fetched via loadSyncXHR .}^{这两个模块通常通过loadSyncXHR获取。} ^{The above snippet fixes it.}^{上面的代码片段修复了它。} ^{You might find more such modules.}^{您可能会发现更多此类模块。}

Overall, the above points should should already improve the initial loading time noticeably.总的来说，以上几点应该已经显着改善了初始加载时间。 For more performance guidelines, go through the Performance Checklist .如需更多性能指南，请查看性能检查表。

Other things to consider其他需要考虑的事项

I18n 18n

In order to reduce the number of requests consider to drop the i18n-support altogether if the app targets only a certain group of people speaking the same language.为了减少请求数量，如果应用程序仅针对使用相同语言的特定人群，请考虑完全放弃 i18n 支持。 Multiple requests for i18n text bundles are not only costly in size but also blocking other requests while loading as they're also loaded via sync XHRs by default.对 i18n 文本包的多个请求不仅大小昂贵，而且在加载时会阻塞其他请求，因为默认情况下它们也是通过同步 XHR 加载的。 There is a way to load them asynchronously and also specifying which locales the app supports, but that's for another topic.有一种方法，可以异步和同时指定其语言环境中的应用支持，但那是另一个话题加载它们。

OData Model数据模型

Consider to set the count mode to None if not required since $count calculations tend to be costly in the backend.如果不需要，考虑将计数模式设置为None ，因为$count计算在后端往往成本很高。 Also the operation mode Client fetches all entities.此外，操作模式Client获取所有实体。 Consider to lazy-load them instead.考虑延迟加载它们。

For all aggregation bindings对于所有聚合绑定

"": {
  "dataSource": "MyV2Source",
  "settings": {
    "defaultOperationMode": "Default",
    "defaultCountMode": "None",
    "defaultBindingMode": "TwoWay",
    "preliminaryContext": true
  },
  "preload": true
},

^{About preliminaryContext : see Optimizing Dependent Bindings .}^{关于preliminaryContext ：请参阅优化依赖绑定。}

For a single aggregation binding对于单个聚合绑定

items: { // e.g.
  path: '/MySet',
  parameters: {
    countMode: 'None',
    operationMode: 'Client' | 'Default' | 'Server' (see API ref)
  }
}

^{API reference: https://openui5.hana.ondemand.com/api/sap.ui.model.odata.v2.ODataListBinding} ^{API参考： https : //openui5.hana.ondemand.com/api/sap.ui.model.odata.v2.ODataListBinding}

UI5 tooling UI5工具

Before deploying the app, building the app via the following command should reduce the application size drastically:在部署应用程序之前，通过以下命令构建应用程序应该会大大减少应用程序的大小：

ui5 build self-contained -a

^{From https://github.com/SAP/openui5-sample-app#option-2-self-contained-build}^{来自https://github.com/SAP/openui5-sample-app#option-2-self-contained-build}

This is currently applicable to stand-alone apps only.这目前仅适用于独立应用程序。

如何找到加载缓慢的 SAPUI5 应用程序的加载瓶颈

问题描述

Code snippets of my index.html and manifest.json我的 index.html 和 manifest.json 的代码片段

Screenshots of my network tab我的网络选项卡的屏幕截图

1 个解决方案

解决方案1
6 已采纳 2020-09-10 18:15:34

Other things to consider其他需要考虑的事项

I18n 18n

OData Model数据模型

For all aggregation bindings对于所有聚合绑定

For a single aggregation binding对于单个聚合绑定

UI5 tooling UI5工具

如何找到加载缓慢的 SAPUI5 应用程序的加载瓶颈

问题描述

Code snippets of my index.html and manifest.json我的 index.html 和 manifest.json 的代码片段

Screenshots of my network tab我的网络选项卡的屏幕截图

1 个解决方案

解决方案1 6 已采纳 2020-09-10 18:15:34

Other things to consider其他需要考虑的事项

I18n 18n

OData Model数据模型

For all aggregation bindings对于所有聚合绑定

For a single aggregation binding对于单个聚合绑定

UI5 tooling UI5工具

解决方案1
6 已采纳 2020-09-10 18:15:34