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

问题描述 投票：0回答：1

我正在构建一个自定义 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"
    }
}

我的网络选项卡的屏幕截图

javascript xmlhttprequest sapui5
1个回答
6
投票

如“网络”选项卡所示，有许多模块按顺序一一加载，其中许多模块甚至通过同步 XHR 加载。最重要的任务是避免使用同步 XHR。

  • 确保没有调试模式、

    sap-ui-debug
    、
    sap-ui-xx-componentPreload
    或
    sap-ui-xx-libraryPreloadFiles
    处于不必要的活动状态。

  • 确保异步模块加载处于活动状态：

  • 我在

    manifest.json
    中看到只声明了少量的库。然而，根据“网络”选项卡，该应用程序使用其他库中未在 
    dependencies
    中声明的控件。解决方法请参考如何避免将 UI5 控件加载为单个模块？。

  • 对于独立应用程序：预先异步预加载第三方模块，这些模块通常通过

    loadSyncXHR

    加载。

    如果您检查“网络”选项卡中的“启动器”列，您可以检测到通过同步 XHR 加载的更多模块。将这些模块添加到

    data-sap-ui-modules 应该可以避免它： 

    <script id="sap-ui-bootstrap"
   data-sap-ui-modules="sap/ui/thirdparty/datajs,sap/ui/thirdparty/require"
   ...>


    sap/ui/thirdparty/datajs
     是v2.ODataModel
     所必需的。 
    sap/ui/thirdparty/require
     库的 
    sap.viz
     模块。这两个模块通常都是通过 
    loadSyncXHR
     获取的。上面的代码片段修复了它。您可能会找到更多这样的模块。
    


    总的来说，上述几点应该已经显着改善了初始加载时间。如需更多性能指南，请浏览
    • 性能检查表
。


其他需要考虑的事项


I18n


为了减少请求数量，请考虑完全放弃 i18n 支持 
if
 该应用程序仅针对使用相同语言的特定人群。对 i18n 文本包的多个请求成本高昂，如果配置不正确，可能会导致同步 XHR。有 
is 一种异步加载 i18n 资源并指定应用程序支持的区域设置的方法，但这是另一个主题了。
O数据模型



如果不是真的需要，请考虑将计数模式设置为 
None
    ，因为 
  • $count
     计算在后端往往成本高昂。
    

    操作模式
    Client
    • 获取所有实体。利用
  • 延迟加载应用程序内容
    和
    $filter请求。

    通过将 
    preload: true
    •  添加到 
  • /sap.ui5/models/<model name>/
     部分来尽早请求 $元数据和注释。

    "": {
  "dataSource": "MyV2Source",
  "settings": {
    "defaultBindingMode": "TwoWay",
    "preliminaryContext": true,
    "...": "..."
  },
  "preload": true
}

    

    UI5工具
    • 

通过 UI5 Tooling
 构建应用程序包，这可以减少服务器请求的数量，如果是独立构建，还可以减少应用程序的大小。

    




      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.