The question is how to rewrite a static HTML script embedding:
<script async id="__script__id__"
type="text/javascript"
src="//abc.xyz/js/script.js">
</script>
into a programmatic embedding which allows loading the script only on a certain condition.
The bounty is set for a description of how static/programmatic embedding differ from one another, specifically:
- Explain how JS specification treats programmatically added scripts — when they are loaded and executed — with authoritative references.
- Explain how converting script embedding from HTML inline to programmatic affects browser optimizations (it's known that browser scans for HTML script tags with
srcattribute and preloads them) with authoritative references.
The question is how to rewrite a static HTML script embedding:
<script async id="__script__id__"
type="text/javascript"
src="//abc.xyz./js/script.js">
</script>
into a programmatic embedding which allows loading the script only on a certain condition.
The bounty is set for a description of how static/programmatic embedding differ from one another, specifically:
- Explain how JS specification treats programmatically added scripts — when they are loaded and executed — with authoritative references.
- Explain how converting script embedding from HTML inline to programmatic affects browser optimizations (it's known that browser scans for HTML script tags with
srcattribute and preloads them) with authoritative references.
- 1 If you know with 100% certainty that this script is only used on desktop, it must have some way of detecting that. Use the same criteria to load the script. – Ouroborus Commented Oct 23, 2021 at 6:37
- @Ouroborus Detecting is easy. The question is how to rewrite a static HTML-code into JavaScript which decides whether to load the script and loads it programmatically. – Denis Kulagin Commented Oct 23, 2021 at 6:54
-
1
@DenisKulagin, what you basically should do is write a new
<script>tag from javascript, using the DOM. – Evert Commented Oct 23, 2021 at 7:02 - 1 Do you really want this though? I often resize my desktop browser, even to mobile-layouts at time. – Evert Commented Oct 23, 2021 at 7:03
- @Evert It's a trade-off to save mobile users some cellular traffic and some battery. – Denis Kulagin Commented Oct 25, 2021 at 14:31
1 Answer
Reset to default 17 +50If you've already figured out how to detect your criteria then loading another script goes like this:
<head>
<!-- the usual head stuff goes here -->
<script>
// replace `criteria` with your actual criteria
if(criteria) {
const script = document.createElement('script');
script.id = '__script__id__';
script.type = 'text/javascript';
script.async = true;
script.src = '//abc.xyz./js/script.js';
document.head.append(script);
}
</script>
<!-- remaining scripts go here -->
<!-- injected script will end up here -->
</head>
Check for the criteria, create the element, set its properties, add it to the document.
I took a shot at finding details on this mechanism. The best I could find was from MDN on the topic of script element async and defer properties:
The exact processing details for these attributes are plex, involving many different aspects of HTML, and therefore are scattered throughout the specification. These algorithms describe the core ideas, but they rely on the parsing rules for
<script>start and end tags in HTML, in foreign content, and in XML; the rules for thedocument.write()method; the handling of scripting; and so on.
Unfortunately, I do not have the necessary familiarity with W3's various HTML specs to turn it into plain English and it looks like it would take quite a bit of time to bee that familiar.