Search code examples
performanceasynchronoussapui5

UI5 performance parameters: data-sap-ui-preload vs. data-sap-ui-async


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?


Solution

  • 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 (Deprecated)

    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 --> can replace preload="async"*
    
    data-sap-ui-preload="async" // deprecated
    

    * Prerequisite: Is Your Application Ready for Asynchronous Loading?