Is there anyway to preserve execution order of scripts that are a mix of either 'deferred' or inline ?
For eg. consider the following scenario -
<head>
<script src="/polyfills.js" />
<script>
// Small inline script that needs polyfills to work
</script>
<script src="/feature1.js" defer>
<script src="/feature2.js" defer>
</head>
My goal is to make all the scripts have defer
behaviour and maintain execution order. However, here, I cannot add defer
to the polyfills script as doing so will break the inline script.
Expected execution order
polyfills (defer) => inline-script (how?) => feature1 => feature2
The inline script is a tiny code fragment, and not worth wasting a request over.
Could I for example write a function that would wrap the inline script and execute if only after polyfills have loaded)?