Question

126

Is the async attribute/property useful if a script is dynamically added to the DOM?

rated 0 times [ 127] [ 1] / answers: 1 / hits: 27175 / 14 Years ago, wed, august 4, 2010, 12:00:00

This question is sort of a tangent to Which browsers support <script async="async" />?.

I've seen a few scripts lately that do something like this:

var s = document.createElement('script');

s.type = 'text/javascript';

s.async = true;

s.src = 'http://www.example.com/script.js';

document.getElementsByTagName('head')[0].appendChild(s);

This is a common way to add a script to the DOM dynamically, which, IIRC from Steve Souders's book Even Faster Web Sites, prompts all modern browsers to load the script asynchronously (i.e., not blocking page rendering or downloading of subsequent assets).

If I'm correct in that, does the s.async = true statement have any use? Wouldn't it be redundant, even for the browser(s) that support that property, since dynamically appended a script should already trigger asynchronous downloading?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tristani

Add To Favorites

Follow

Total Points: 318

Total Questions: 95

Total Answers: 106

Location: Saint Lucia

Member since Wed, Feb 8, 2023

1 Year ago

tristani questions

1 Discord.js reply to interaction with only you can see this message

Tue, Dec 21, 21, 00:00, 3 Years ago

1 Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported

Wed, Sep 1, 21, 00:00, 3 Years ago

1 How to change a variable value in react on button click

Wed, Nov 18, 20, 00:00, 4 Years ago

1 Skip first iteration during forEach loop

Fri, Aug 14, 20, 00:00, 4 Years ago

1 What is the correct folder structure for dynamic nested routes in Next.js?

Wed, Jul 15, 20, 00:00, 4 Years ago

View All

answered 14 Years ago addie · Accepted Answer

The specification (now) dictates that a script element that isn't parser-inserted is async; the async property is irrelevant to non-parser-inserted script elements:

The third is a flag indicating whether the element will force-async. Initially, script elements must have this flag set. It is unset by the HTML parser and the XML parser on script elements they insert. In addition, whenever a script element whose force-async flag is set has a async content attribute added, the element's force-async flag must be unset.

Having the async content attribute does, of course, mean the script would be executed asynchronously. The spec language seems to leave an opportunity to force synchronous execution of the script (by setting the attribute and then removing it), but in practice that does not work and is probably just a bit of vagueness in the spec. Non-parser-inserted script elements are async.

This specified behavior is what IE and Chrome have always done, Firefox has done for years, and current Opera also does (I have no idea when it changed from the old behavior in the answer linked above).

It's easily tested:

var script = document.createElement(script);

script.src = script.js;

console.log(a);

document.body.appendChild(script);

console.log(b);

...with script.js being

console.log(script loaded);

...will log



a

b

script loaded