Asynchronous JavaScript Loading ∞

Save bandwidth and speedup page rendering

The Outdooractive JavaScript API can be loaded completely asynchronously. There are several use cases and advantages:

to save bandwidth: the API output/result is not visible on page load and will only appear after user interaction (e.g. tabs, scrolling, …)
to speed up main content: if there is content that should be rendered before
to speed up page rendering: page creation and JavaScript loading/instantiation run in parallel

Save Bandwidth: Load JavaScript API on User Interaction

How:

Only after the user does a specific interaction – e.g. click a button to open a map – the client code loads the JS API, and then uses it to show some information – in that case, a map.

Why:

This performance improvement is useful when the use of the JS API is not central to the page (not over-the-fold):

Reduces unnecessary calls to the Outdooractive JavaScript API server (e.g. if the user quits the page without interaction)
Speeds up the page load

Example:

Loading on User Interaction

Speed up Main Content

How:

After the page is loaded (e.g. DOMContentLoaded fired), the client code loads the JS API and uses it to show some extra information.

Why:

Typically when the main content (above-the-fold) does not need the JS API and the output of the Outdooractive JavaScript API just adds more information to it.

Example:

Asynchronous Loading

Speedup Page Rendering

The async functionality can also be very useful to speed up a page that is using the Outdooractive JavaScript API in a central place (e.g. your a FlexView API detailpage). We at Outdooractive recently migrated all of our mobile pages as follows to achieve a 50% speed up of page load (DOMContentLoaded time), so that the user can see and interact with the page much sooner.

Since in this case, the whole page is built on the Outdooractive JavaScript API (JS & CSS), we keep the – very small – oam_head.js in the document <HEAD>, so that the configured CSS comes as soon as possible. But we give an additional &callback=initOA parameter, to trigger the async load of the rest of the JavaScript functionalities.
The page renders and becomes interactive much sooner.
The rest of the JavaScript functionalities is loaded in a non-blocking way (See Article: async vs defer attributes).
When done loading, the initOA function is called, where the client calls resides (e.g. oam.api.detailpage()).

Examples:

Map API: Loading on User Interaction (API Example)
FlexView API: Asynchronous Loading (API Example)