如何避免UI5中出现“主线程上同步XMLHttpRequest”警告？

如何解决如何避免UI5中出现“主线程上同步XMLHttpRequest”警告？

我在index.js中通过以下引导盯着UI5：

sap.ui.define([
    "sap/m/Shell","sap/ui/core/ComponentContainer"
],(Core,Shell,ComponentContainer) => {
    "use strict";

    new Shell("",{
        app: new ComponentContainer("",{
            height: "100%",name: "webapp"
        }),appWidthLimited: false
    }).placeAt("content");
});

根据UI5 documentation：

静态依赖项被加载到sap.ui.define调用的依赖项声明数组中。 这些依赖项总是在执行定义的模块之前预先加载。

我是否正确理解，在这种情况下，模块将始终以同步方式加载，并且没有真正的方法来避免«主线程上的Synchronous XMLHttpRequest»警告？>

也许可以只用new sap.m.Shell(sId?,mSettings?) / async包装await吗？

更新＃1：

我已经用?sap-ui-xx-nosync=warn检查了加载情况，并得到了以下结果：

enter image description here

由于某些原因i18n/i18n_en.properties被同步加载。我访问i18n的唯一位置是：

const oBundle = myI18nModel.getResourceBundle();

但是根据文档，我无法理解为什么myI18nModel.getResourceBundle()会导致同步加载。

更新＃2：

在深入研究no sync XHR示例之后，我发现了sync XHR警告的原因。明确指出了"description": "{{appDescription}}"中的"title": "{{appTitle}}"和manifest.json：

"title": "Here the i18n bundles can't be loaded with 'async: true' yet!","description": "Same here. Hence,no 'i18n' in this 'sap.app' section!"

将其替换为静态值后，警告消失了。

解决方法

UI5的早期开发很大程度上基于synchronous XHRs。旧版应用程序或一些过时的文档主题可能仍指的是默认禁用异步选项或无异步选项的API，例如：sap.ui.controller， sap.ui.component，sap.ui.*fragment，sap.ui.*view，jQuery.sap.require，sap.ui.requireSync，jQuery.sap.sjax和ComponentContainer的构造函数，如问题。

为了减少同步XHR呼叫的次数：

遵循已记录的准则：
- Performance Checklist
- Is Your Application Ready for Asynchronous Loading?
尤其是在引导时，请使用data-sap-ui-async="true"选项，如果应用程序具有Component.js，请使用use the declarative sap/ui/core/ComponentSupport module in data-sap-ui-oninit，而不是手动实例化sap.ui.core.ComponentContainer。例如：
```
<head>
  
  <script id="sap-ui-bootstrap" ...
    data-sap-ui-async="true"
    data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
  ></script>
</head>
<body id="content" class="sapUiBody">
  <div data-sap-ui-component
    data-id="rootComponentContainer"
    data-name="demo"
    data-settings='{ "id": "rootComponent" }'
    ...
  ></div>
</body>
```
这会自动创建一个ComponentContainer，将其推送到DOM，并同时异步地加载Component.js和manifest.json ，同时避免内联脚本或单独的引导程序脚本。

使用xx-nosync bootstrap option运行应用程序。例如，在URL中：
```
https://<host>/my/awesome/app/?sap-ui-xx-nosync=warn
```
UI5随后将在浏览器控制台中为同步获取的每个文件记录“正在加载...带有同步XHR” （忽略其他[nosync]消息）。例如：
- 如果应用程序使用v2.ODataModel，则可能会抱怨模块sap/ui/thirdparty/datajs已同步加载。在这种情况下，请将以下内容添加到引导程序配置中：
```
<script id="sap-ui-bootstrap" ...
  data-sap-ui-async="true"
  data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
  data-sap-ui-modules="sap/ui/thirdparty/datajs"
></script>
```
- 如果在JS中手动创建了ResourceModel，请确保在其中启用async标志：
```
const i18nModel = new ResourceModel({ // required by "sap/ui/model/resource/ResourceModel"
  bundleName: "demo.i18n.i18n",supportedLocales: [""],fallbackLocale: "",async: true,// <--
});
i18nModel.getResourceBundle().then(resourceBundle => {
  this.getOwnerComponent().setModel(i18nModel,"i18n");
  resourceBundle.getText(/*...*/); // See sap/base/i18n/ResourceBundle
});
```
检查所报告API的API参考。在大多数情况下，它们要么被弃用，要么默认将async标志设置为false。

仍然有一些API，它们还没有异步替代品，例如：

实例化sap/ui/core/LocaleData时使用同步XHR获取CLDR file（例如，用于Calendar或DatePicker。请参见Issue #2345）。
在"{{...}}"中解析类似i18n Handlebar的manifest.json语法时

但是，使用最新的稳定版UI5，可以消除大多数同步请求。
这是一个没有同步XHR的示例：https://embed.plnkr.co/7txzTsNwOBDbyi87

要回答这个问题：sap.ui.define和sap.ui.require会异步加载依赖项如果 data-sap-ui-async的配置设置为true {{3} }。另外，请确保(Replaces data-sap-ui-preload="async")，以防止出现主要的性能瓶颈。

不幸的是，用async-await / Promise包装同步内容请求不会有帮助。更好地寻找异步替代方案。例如，add dependent libs to the manifest.json在构造函数设置中具有async标志，如果启用了该标志，则异步获取Component.js和manifest.json文件：

new ComponentContainer({
  height: "100%",name: "webapp",async: true,// or
  manifest: true,// sets the `async` option automatically to true
})

控制台中的同步jobs: printInputs: runs-on: ubuntu-latest steps: - run: | echo "Env: ${{ github.event.inputs.environment }}" echo "Branch: ${{ github.event.inputs.branch }}"警告可能来自实际核心的剩余。我知道启动板在这方面存在一些问题。如果您安排时间或仔细查看“网络”标签/“源”标签，则会发现在加载您自己的代码之前已显示该消息。

在XMLHttpRequest之类的文件中，或者在类似的地方，您会发现sap.jquery.js带有XMLHtppRequests标志集。我已经与UI5小组进行了讨论，并且正在将其删除，但没有提供时间表。

为了更直接地回答您的问题，sync部分是异步的。这个想法取自require js，至今已至少10年。

//编辑

require / async不会做任何事情，因为这些都不是基于承诺的。进行await只是假设窗口对象在加载控制器之前已附加了sap.m.Shell库，您可以确保例如通过清单自动加载。

如何避免UI5中出现“主线程上同步XMLHttpRequest”警告？

如何解决如何避免UI5中出现“主线程上同步XMLHttpRequest”警告？

更新＃1：

更新＃2：

解决方法

相关推荐