Question
Why is adrum.js loaded synchronously while adrum-ext.js is loaded asynchronously?
Answer
The JavaScript Agent is designed in two pieces to expedite loading and minimize impact.
- Adrum.js loads synchronously: This is done to avoid any miss in the EUM metrics collection. The later adrum.js is loaded, the more items can be missed (resource loads like XHR calls, for example), moreover the file size is minimal. This part of the agent kicks off the loading of adrum-ext.js, via an asynchronous call.
- Adrum-ext.js loads asynchronously: At the onload event, adrum-ext.js is fetched asynchronously specifically to not block page load. This is the code that does most of the heavy lifting. Once it has been fetched, it is cached for 24 hours on the browser. When the page has completed loading, the collected data is bundled into a beacon and sent to the EUM Cloud by adrum-ext.js. Again asynchronously.
Note: Since adrum.js is invoked synchronously, any failures in connectivity will impact the page load times directly, whereas adrum-ext.js is invoked asynchronously so the browser page load won't be blocked.
