Chrome for me has always been a reference on web standards, unfortunately the defer isn't supported and IE supports it since version 5.5. Why ?
js.js
document.getElementById ("hi").innerHTML = "Hi :)";
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script defer="defer" src="js.js"></script>
<title>Hi</title>
</head>
<body>
<div id="hi"></div>
</body>
</html>
defer
and async
mean? By default, a <script src=...></script>
tag is evil! The browser must halt parsing the HTML until the script is downloaded and executed (since the script might call document.write(...)
or define global variables that later scripts depend on). This means that any images and stylesheets that are after the script tag don't start downloading until after the script has finished downloading and executing. External scripts typically make the Web load much more slowly, which is why NoScript has become so popular.
Microsoft introduced defer
to solve the problem. If you use <script defer src=...></script>
, you promise not to call document.write(...)
. A defer
external script will start downloading immediately but won't execute until after the page is rendered. After the page has rendered, all defer
scripts are executed in the same order that they were declared. Not all browsers implement defer
yet.
HTML5 introduced the async
attribute which may execute any time--possibly before the page has finished parsing or even before other defer
/ async
scripts that are still downloading. But it's harder to use multiple async
scripts because their execution order is not guaranteed. Like defer
, not all browsers implement async
yet.
After all defer
and async
scripts have executed, the DOMContentLoaded
and load
events fire.
defer
and async
defer
. defer
, but unfortunately it doesn't say exactly when defer
scripts execute (All in order? Before onload
?). Thus, no other browsers implement defer
because no one wants to reverse-engineer IE's behavior or break scripts that might depend on IE's peculiarities. (See the Mozilla feature request , for example). defer
: defer
scripts should all be executed in order after the rest of the page is parsed, and before onload
. It also introduces async
to specify scripts that can execute whenever they are downloaded without having to wait for each other. Unfortunately, HTML5 contradicts IE by not allowing inline defer
scripts. This breaks the invariant that all defer
scripts are executed in order (if some defer
scripts have src
and some have inline content). defer
. async
. defer
and async
are checked into Webkit . You should see it in Chrome and Safari very soon (it's already in the Chrome dev channel but it's a bit buggy). defer
and async
and for IE to implement async
. There's no single rule to follow at this time. You have to choose the solution that best balances simplicity, page render latency, and script execution latency for the set of browsers that access your website.
<script async defer src=...></script>
: This allows rendering to continue in parallel to script downloading for IE and the newest HTML5 browsers but causes pre-HTML5 browsers (including all versions of Opera) to block. defer
(but not async
) and they will be executed in the order that they were declared (except IE<=9 in certain conditions can execute them out of order ). Again, this allows rendering to continue in parallel to script downloading in IE and HTML5-aware Gecko/Webkit, but older browsers and Opera will suffer. It's a good idea to use defer
even if the scripts are at the bottom of the page so that they download in parallel with each other. defer
for inline scripts because the HTML5 draft has taken away the execution order guarantee. async
attribute. In other words, most older browsers treat it like a script at the bottom of the page, and newest browsers recognize the async
. But Opera users get the worst of both worlds, because Opera begins execution immediately and doesn't understand async
. This is the pattern recommended by Google Analytics for the urchin on many webpages. snippet:
<script>
(function() {
var script = document.createElement('script');
script.src = '...';
script.async = true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
})();
</script>
Update : If you have scripts split into modules and want to improve performance, I recommend the "Coupling Asynchronous Scripts" chapter of Even Faster Web Sites by Steve Souder. It contains tips/tricks for not only controlling execution order but also to delay parsing of scripts to improve performance.
defer
is supported only by internet explorer. you don't need to rely on it. there are other ways to get the same effect, like placing your scripts at the end of the page just before the </body>
tag, as others have pointed out.
The purpose of defer is to tell the externally linked script to wait until the page finishes loading until it runs. The same thing can be accomplished via good unobtrusive JavaScript methods, which usually include code that prevents scripts from executing until the DOM is finished loading.
The advantage of defer occurs in connection with Internet Explorer, since that browser is the only one that supports the defer attribute. So, if you need a quick script to run only in IE, and you don't mind if the entire page loads before it starts to execute, then simply add defer="defer" in your tag and that will quickly take care of that problem. Fixing a transparent PNG issue in IE6 is one possible practical use for defer.
The defer attribute must be used when hiding a script from other browsers with a conditional comment that targets an IE-only script — otherwise the script will run normally in other browsers.)
Reference: http://www.impressivewebs.com/10-javascript-quick-tips-and-best-practices/
If scripts can be deferred, they can also be moved to the bottom of the page (as pointed out by @Christian in the comments)
This would be a better choice in terms of performance, as it will not block the rest of the page from loading. You can place your scripts before the </body>
tag.
This attribute is poorly supported by major browsers, this in itself should be a hint to stop using it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.