Question: Consider this scenario: You are loading a script (script 1) on your page which two other scripts rely on to function (scripts 2 and 3). All of these scripts can be safely executed after construction of the DOM. Which of the following approaches would work when loading these scripts? Select all that apply.
- Load all of the scripts asynchrously so they don't block DOM construction while the browser fetches them, but make sure to include script 1 first in the HTML.
- Load script 1 normally (without an async or defer) attribute and load scripts 2 and 3 with the defer attribute.
- Load all 3 scripts with the defer attribute, making sure to include script 1 first in the HTML.
- It doesn't matter. The scripts can be executed in any order.
Explanation
This works only when script execution preserves the dependency order after the DOM is built. One valid pattern is to let the dependency load as a normal blocking script and place the two dependent files behind it with defer, because deferred scripts wait until parsing finishes. Another valid pattern is to use defer on all three files, because deferred scripts execute in document order, so the dependency still runs first. Using async for all three would break that guarantee, since asynchronous scripts can execute as soon as they finish downloading rather than in HTML order. HubSpot Developers+1
Why the other options are incorrect
A) Using async for all three does not guarantee execution order, so the dependency may not be available when the other scripts run. HubSpot Developers+1
D) Execution order still matters because scripts 2 and 3 rely on script 1 being available first. HubSpot Developers+1
Source for verification
https://developers.hubspot.com/docs/cms/reference/modules/configuration
https://developers.hubspot.com/docs/cms/best-practices/testing-staging-performance/speed
The answer(s) to the question is highlighted in the BOLD text above. You can also find more questions and answers related to the exams on the "HubSpot CMS for Developers II" page.