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)?
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)?
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Oct 23, 2016 at 4:34 Shubham KanodiaShubham Kanodia 6,2363 gold badges35 silver badges48 bronze badges 1- Have you read this answer? – Roamer-1888 Commented Oct 23, 2016 at 4:59
3 Answers
Reset to default 3If you want it to retain the order of a sandwiched inline script, then, with regard to deferring, I think you are stuffed.
- an inline script won't defer, therefore loses its order with regard to deferred "before" and "after" scripts.
- you can use the trick from this answer, but a window.onload listener will wait for all deferred scripts, not just those before the sandwiched script (your polyfills). You can't benefit from deferring the "befores", and not the "afters".
If all three src'd scripts are deferred, then there's no naturally-occurring intermediate event (after the polyfills but before the features) on which to trigger a handler - which is what you want.
For the record, here's how to delay an inline script until all deferred scripts have loaded, which will possibly offer some benefit but no as much as you were hoping for.
<head>
<script src="/polyfills.js" defer></script>
<script src="/feature1.js" defer></script>
<script src="/feature2.js" defer></script>
<script>
window.addEventListener('load', function() {
// Small inline script that needs polyfills to work
});
</script>
</head>
As defer attribute works only with external scripts tag with src. Here is what you can do mimic defer for inline scripts. Use DOMContentLoaded event.
<script src="/polyfills.js" defer></script>
<script src="/feature1.js" defer></script>
<script src="/feature2.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Your inline scripts which uses methods from polyfills.js.
});
</script>
This is because, DOMContentLoaded event fires after defer attributed scripts are pletely loaded. You might not have to wait for 'load' event.
This is the closest you could do.
According to this answer it's technically possible, as long as you're willing to base64-encode your script and set it as a data source. This will be a nightmare to debug if something goes wrong, but might be your only shot if you have a small inline fragment that must be included in the proper deferred order.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742320244a4421663.html
评论列表（0条）