5

Different SAPUI5 performance guidelines mention two key parameters, which seem to have similar nature, but slightly different explanation:

  1. data-sap-ui-preload="async"

The most important setting here is data-sap-ui-preload="async". This enables the runtime to load the modules for all declared libraries asynchronously in the background. This reduces the amount of requests sent by the client that could block each other.

  1. data-sap-ui-async="true"

The most important setting is data-sap-ui-async="true". This enables the runtime to load all the modules and preload files for all declared libraries asynchronously, if an asynchronous API is used. Setting async=true leverages the browser's capabilities to execute multiple requests in parallel, without blocking the UI thread.

Could you please clarify what exactly the difference, when should I use one over another?

Mike
  • 14,010
  • 29
  • 101
  • 161

2 Answers2

13

The first linked documentation is based on the outdated UI5 version 1.38.x. At that time, the config sap-ui-preload="async" was indeed "the most important setting" since there was no sap-ui-async available back then. With version 1.58.2, the async="true" was introduced which should be used instead of preload="true" as stated in the topic Configuration Options and URL Parameters:

preload

This configuration parameter defines the loading behaviour of the so-called preload files. […] The values are used as follows:

  • […]
  • When set to async, the preload files are loaded asynchronously. However, we recommend to use the async=true configuration parameter in the bootstrap instead, because it switches more module/related APIs to async including the loading behaviour of the preload files.

async

This configuration setting enables the module loader to load both, modules and library-preload files asynchronously.

TL;DR

data-sap-ui-async="true" // since 1.58.2 --> Replaces preload="async" *

data-sap-ui-preload="async" // for 1.58.1 and below

* Prerequisite: Is Your Application Ready for Asynchronous Loading?

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
3

I wanna add some more information to the answer of Boghyon. It's not a replacement in regards to data-sap-ui-async and data-sap-ui-preload. data-sap-ui-async is an additional offering which enables simply more asynchronous features of UI5. See also the performance section.

Note from the OpenUI5 documentation section "Enable Asynchronous Loading in the Bootstrap"

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Florian Vogt
  • 31
  • 1
  • 2
    From _«The bootstrap attribute `data-sap-ui-async="true"` affects both modules and preload files. If it is not possible to load the modules asynchronously (e.g. for compatibility reasons), use `data-sap-ui-preload="async"` to configure at least the preloads for asynchronous loading.»_ I can infer that `data-sap-ui-async` overlaps the `data-sap-ui-preload` property, in other words, `data-sap-ui-async` does everything what `data-sap-ui-preload` does, plus some extra things for the benefit of asynchronization. Did I understand it correctly? – Mike Dec 14 '20 at 15:28
  • 1
    Good to see you on SO! Yes, I guess I chose the word "replacing" poorly. App developers shouldn't simply replace `preload="async"` without testing the app afterwards if everything still works as intended. Thanks for the reminder! +1 – Boghyon Hoffmann Dec 14 '20 at 20:19
  • 2
    Yes, @Mike B. You named it. `data-sap-ui-async` does everything what `data-sap-ui-preload` does, plus some extra things for the benefit of asynchronization. – Florian Vogt Dec 15 '20 at 16:04