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

MXMLNDML：

我正在构建一个自定义SAPUI5应用程序，该应用程序由sap.viz.ui5.controls.VizFrame页面标题内容（位于内的sap.suite.ui.commons.ChartContainer）中的七个图表（）和sap.ui.table.Table主要内容区域中的网格表（）组成。图表和表格的数据由OData V2服务提供，并且该应用程序在最新版本（1.81.0）上独立运行。

问题是该应用程序的加载时间长。这需要7到20秒。这对于“更复杂”的应用程序是否常见？我试图找到瓶颈，但是一切看起来都很好。许多网络请求都被缓存（它们占用0毫秒），但是它们之间存在一些延迟，我不知道为什么。此外，尽管我data-sap-async="true"在index.html文件中使用，但控制台中仍存在以下警告：

[不推荐使用]不赞成在主线程上使用同步XMLHttpRequest，因为它对最终用户的体验有不利影响。如需更多帮助，请访问https://xhr.spec.whatwg.org/。[syncXHRFix-dbg.js：211：15]

我的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"
    }
}

我的网络标签的屏幕截图

Boghyon Hoffmann：

As the Network tab shows, there are many modules loading sequentially one by one and many of them even via sync XHR. The most important task is to reduce sync XHRs as much as possible.

I see in the manifest.json that only a small number of libraries are declared. According to the Network tab, however, the app uses controls from other libs which aren't declared in the 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 (e.g. sap.ui.table requires sap.ui.unified).^src You may then add "sap.ui.unified": { lazy: true } if that lib is not directly in use.}
Preload thirdparty modules asynchronously beforehand that are usually loaded via loadSyncXHR.

If you inspect the Initiator column within the Network tab, you can detect more modules that are loaded via sync XHR. Adding those modules to the data-sap-ui-modules should avoid it:
```
<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. The sap/ui/thirdparty/require module by the sap.viz library. Both modules are usually fetched via 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

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. 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. 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. Also the operation mode Client fetches all entities. Consider to lazy-load them instead.

For all aggregation bindings

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

^{关于preliminaryContext：请参阅优化相关绑定。}

对于单个聚合绑定

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

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

UI5工具

在部署应用程序之前，通过以下命令构建应用程序将大大减少应用程序的大小：

ui5 build self-contained -a

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

当前这仅适用于独立应用程序。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-09-15

我来说两句

0 条评论

登录后参与评论

上一篇：如何使用@RequestMapping将自定义HTTP方法/动词添加到Spring-MVC

TOP 榜单

文章