Question

我正在使用 SAPUI5 version: 1.56.13，它是具有 Cordova 且仅具有 Android 平台的混合应用程序。

我想知道是否有一种方法可以在用户执行其他操作（例如查看其他页面）时预加载视图（在后台/异步模式下），以便当用户想要导航到该预加载视图，就性能而言，它将更快。

第一次，用户导航到该视图大约需要 30秒才能显示该视图。

第二次需要大约 5秒来打开它。

我在用户处于其他视图时尝试过：

实例化背景视图。

sap.ui.view({
    viewName: "myViewFolder.MyView",
    controller: sap.ui.controller("myControllerFolder.MyController"),
    type: sap.ui.core.mvc.ViewType.XML,
    async: true
}).loaded().then(function(oView) {
    // I save the reference on app context so use it later (now is there just for testing).
    appScope.__myView = oView;
});

调用服务以检索视图模型的数据并设置模型的数据。

getDataFromService(this, oData => { 
    let oModel = this.getOwnerComponent().getModel(Constants.MY_DATA_MODEL)
    oModel.setData(oData);
});

通过attachInit方法初始化视图：

new sap.ui.xmlview({viewName:"myViewFolder.MyView"}).placeAt("content");

导航至视图：
```
appScope.getRouter().navTo("MyView")
```

我看到只有当我处于导航步骤时，该视图才会在应用程序记录以下内容时开始渲染：

Log-dbg.js：414 2019-07-11 12：36：45.609300在克隆操作期间，发现模板既未标记为'templateShareable：true'也未标记为'templateShareable：false'。框架不会破坏模板。这可能会导致错误（例如重复的ID）或内存泄漏（该模板用于对象'__list4'的聚合'项目'）。有关更多信息，请参见``聚合绑定''下的文档。 -

这表示视图正在渲染，因为它在列表中有一些带有自定义元素的列表，可以根据模型生成视图。

简报：

上下文： Cordova ，具有 SAPUI5 （XML和JS）和 Android 平台。
目标：在后台预加载一个视图，以便当用户需要导航到该视图时，该视图已经被加载，因此导航时间会更少（性能改进）。
相关信息：视图加载很慢，因为列表中包含带有自定义元素的列表。大多数情况下，视图是动态生成的，是由列表内的列表生成的。

Answer 1

我以前使用过Cordova和Openui5，我可以将初始加载时间控制在3秒以内，并且单个页面的加载在初始加载之后几乎是即时的。

以下是我做的一些事情，它们极大地提高了我的表现：

不要使用CDN，而是下载移动运行时并在Cordova中提供服务。如果加载页面需要30秒，则很可能有99％的时间是从SAP CDN下载文件的网络时间。
使用预加载文件。如果您的应用程序在显示页面之前正在下载每个模块，那么您的网络开销将会很大。默认情况下，UI5附带了用于sap库的库预加载文件。当您查看“网络”选项卡时，您会知道它的正常工作，并且在您最初打开应用程序时看到该应用程序正在加载library-preload.js文件。要启用它，我认为您只需要遵循以下步骤：https://openui5.hana.ondemand.com/#/topic/676b636446c94eada183b1218a824717
您还可以使用以下命令为自己的源代码构建预加载文件：https://github.com/SAP/grunt-openui5 将所有源代码放入一个文件中，该文件将在您首次打开应用程序时加载。它是应用程序生命周期中的250个HTTP请求与应用程序开始时的1个HTTP请求之间的差。

我认为可以从上面给出的选择顺序中找到最大的性能提升。最简单的好处就是将加载点从CDN更改为UI5的本地副本。您会轻松地看到启动时间从30秒减少到3秒，页面浏览量从5秒减少到1秒。

祝你好运！

SAPUI5-导航之前预加载视图。性能提升

1 个答案: