javascript - SAPUI5 - 导航前预加载 View 。性能改进

Question

我正在开发 SAPUI5 version: 1.56.13，这是一个带有 Cordova 的混合应用程序，只有 Android平台。

我想知道是否有一种方法可以预加载 View (在后台/异步模式下)，同时用户正在做其他事情，比如查看其他页面，以便当用户想要导航到预加载的 View ，它在性能方面会快得多。

第一次用户导航到 View 需要 30 秒来显示 View 。

第二次打开它需要 5 秒。

我在用户处于另一个 View 时尝试过:

1. 在后台实例化 View 。

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;
}); 

1. 调用服务以检索 View 模型的数据并为模型设置数据。

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

2. 在 attachInit 方法中初始化 View :

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

3. 导航到 View :

   appScope.getRouter().navTo("MyView")
   

我看到只有当我处于导航步骤时， View 才开始呈现，因为应用会记录此内容:

Log-dbg.js:414 2019-07-11 12:36:45.609300 During a clone operation, a template was found that neither was marked with 'templateShareable:true' nor 'templateShareable:false'. The framework won't destroy the template. This could cause errors (e.g. duplicate IDs) or memory leaks (The template is used in aggregation 'items' of object '__list4').For more information, see documentation under 'Aggregation Binding'. -

这表明 View 正在被渲染，因为它有一些列表内部的自定义元素来根据模型生成 View 。

简报:

• 上下文:Cordova 与 SAPUI5(XML 和 JS)和 Android 平台。
• 目标:在后台预加载一个 View ，以便当用户需要导航到该 View 时，它已经加载，因此导航时间会更短(性能改进)。
• 相关信息: View 加载缓慢，因为列表中包含自定义元素的列表。大多数情况下，所有 View 都是从列表中的列表动态生成的。

Answer 1

我以前使用过 Cordova 和 Openui5，我可以将初始加载时间缩短到 3 秒以下，并且在初始加载后几乎可以立即加载单个页面。

以下是我所做的一些大大提高了我的表现的事情:

1. 不使用 CDN，而是下载移动运行时并从 Cordova 中提供它。如果加载页面需要 30 秒，那么很可能 99% 的时间是从 SAP CDN 下载文件的网络时间。

2. 使用预加载文件。如果您的应用程序在显示页面之前下载每个模块，那么您将面临巨大的网络开销。默认情况下，UI5 附带 sap 库的库预加载文件。当您查看网络选项卡并在您最初打开应用程序时看到应用程序正在加载 library-preload.js 文件时，您就会知道它的工作正常。要打开它，我认为您只需要按照以下步骤操作:https://openui5.hana.ondemand.com/#/topic/676b636446c94eada183b1218a824717

3. 您还可以使用以下代码为您自己的源代码构建预加载文件:https://github.com/SAP/grunt-openui5它将所有源代码放入一个文件中，当您第一次打开应用程序时将加载该文件。它是应用程序生命周期内 250 个 HTTP 请求与应用程序启动时 1 个 HTTP 请求之间的区别。

我认为性能的最大提升可以按照我上面给出的选项的顺序找到。最简单的收获就是将加载点从 CDN 更改为 UI5 的本地副本。您会很容易地看到您的启动时间从 30 秒下降到 3 秒，页面浏览量从 5 秒下降到 1 秒。

祝你好运!