defer属性（浏览器） [英] Defer Attribute (Chrome)

查看：409
本文介绍了defer属性（浏览器）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Chrome浏览我向来对Web标准的引用，不幸的是，延迟不支持IE浏览器，并支持它，因为5.5版本。为什么呢？

js.js 

 的document.getElementById（HI）的innerHTML =嗨:)。

HTML 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
    ＆LT; HEAD＆GT;
        ＆LT;间的charset =UTF-8＆GT;
        ＆所述;脚本延迟=推迟SRC =js.js＆GT;＆下; /脚本＆GT;
        ＆LT;标题＆GT;喜＆LT; /标题＆GT;
    ＆LT; /头＆GT;
    ＆LT;身体GT;
        ＆LT; D​​IV ID =喜＆GT;＆LT; / DIV＆GT;
    ＆LT; /身体GT;
＆LT; / HTML＆GT;


解决方案

什么延迟和异步是什么意思？

默认情况下， ＆LT; SCRIPT SRC = ...＆GT;＆LT; / SCRIPT＆GT; <！/ code>标签是邪恶浏览器必须停止解析HTML，直到脚本下载并执行（因为脚本可能会调用的document.write（...）或定义后脚本依赖于全局变量）。这意味着，该脚本标记后的任何图片及样式表没有开始下载后才脚本已经完成下载并执行。外部脚本通常使Web负载要慢得多，这就是为什么NoScript的已经变得如此受欢迎。

微软推出了延迟来解决这个问题。如果你使用＆LT;脚本推迟SRC = ...＆GT;＆LT; / SCRIPT＆GT; ，您承诺不叫文件撰写（...） 。 A 延迟外部脚本就会立即开始下载，但不会执行，直到呈现页面后。在页面呈现后，所有的延迟脚本以相同的顺序，他们被宣布执行。并不是所有的浏览器实现延迟呢。

HTML5引入了可以执行任何时间异步属性 - 页面完成解析，甚至先于其他延迟 / 异步脚本仍在下载。但它很难使用多个异步脚本，因为它们的执行顺序是不能保证。像延迟，不是所有的浏览器实现异步呢。

毕竟延迟和异步脚本已执行，则 DOMContentLoaded 和负荷事件触发。

简史延迟和异步


  • 1997年4 IE介绍延迟。

  • HTML 4规范中提到延迟 ，但遗憾的是它并没有说什么时候延迟脚本执行（所有订单？前的onload ？）。因此，没有其他的浏览器实现延迟，因为没有人愿意进行反向工程IE的行为或破坏可能依赖于IE的特殊性脚本。 （见 Mozilla的功能要求，例如）。

  • 2006年HTML5的草案终于描述来实现所需的细节延迟：延迟脚本都应该在命令后执行该页面的其余部分被解析，在此之前的onload 。它还引入了异步来指定每当他们无需等待对方下载的，可以执行脚本。不幸的是，HTML5不容许内联延迟脚本矛盾IE浏览器。这打破了不变所有的延迟脚本的顺序（执行的，如果一些延迟脚本有的src 有的有内嵌的内容）。

  • 2009年的Gecko 1.9.1（火狐3.5）支持延迟 。

  • 2010年01期蛤蚧1.9.2（火狐3.6）支持异步 。

  • 2010-09的 延迟和异步检入的Webkit 。您应该很快就会看到它在Chrome和Safari（它已经在Chrome浏览器开发，但它是一个有点马车）。

  • 我们还在等待歌剧院实施延迟和异步和IE实施异步。

因此，什么应该Web开发人员使用？

有没有一个规律可循在这个时候。你必须选择一个最简单的余额，页面呈现延迟的解决方案，以及脚本执行延迟时间设定访问您的网站浏览器。


  • 要在页面呈现脚本执行之前，正如其他人指出，最简单的方法，就是把你的脚本在页面的底部。但是，如果脚本是必不可少的，或网页中含有大量的HTML，那么你应该把你的脚本上涨的页面上。

  • 如果你的脚本是独立的和您的客户使用IE或Firefox的新版本中，使用＆LT;脚本异步推迟SRC = ...＆GT;＆LT; / SCRIPT＆GT; ：这允许渲染继续平行脚本下载的IE浏览器和最新的HTML5的浏览器，但会导致pre-HTML5的浏览器（包括Opera的所有版本）来阻止
    • 。
  • 如果一个外部脚本依赖于另一个，标志着他们俩延迟（而不是异步），他们将在一定的条件下= 9可以执行出来，在他们宣布（除 IE的量级执行订单的）。同样，这使得渲染并行继续在IE浏览器和HTML5感知的Gecko / Webkit的，但旧的浏览器和Opera下载脚本会受到影响。这是一个好主意，用延迟即使脚本是在页面的底部，使他们并行下载对方。

  • 不要使用延迟为内嵌脚本，因为HTML5草案带走的执行顺序的保证。

  • 如果您的观众包括许多歌剧或旧的Firefox / Safari用户，下面的片段将解析大多数pre-HTML5的浏览器文档后执行脚本（IE，WebKit的，需要测试的老火狐），而最新的HTML5的浏览器感知立即开始下载，但不会阻止执行，因为异步属性的脚本。换句话说，最老的浏览器把它当作在页面底部的脚本，浏览器最新识别异步。但Opera用户得到最糟糕的两个世界，因为歌剧立即开始执行，不理解异步。这是谷歌Analytics（分析）的建议模式顽童在许多网页。

片段：

 ＆LT;脚本＆GT;
（函数（）{
  VAR脚本=使用document.createElement（'脚本'）;
  script.src ='...';
  script.async = TRUE;
  变种S = document.getElementsByTagName（'脚本'）[0];
  s.parentNode.insertBefore（文字，S）;
}）（）;
＆LT; / SCRIPT＆GT;

更新：如果您有脚本分割成模块，并想提高性能，我推荐的更快的网站的史蒂夫·索德的耦合异步脚本一章。它包含不仅控制执行秩序，而且耽误脚本解析，以提高性能的技巧/诀窍。

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>

解决方案

What do 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.

A brief history of defer and async

  • 1997 IE 4 introduces defer.
  • 1998 HTML 4 spec mentions 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).
  • 2006 HTML5 draft finally describes the details needed to implement 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).
  • 2009 Gecko 1.9.1 (Firefox 3.5) supports defer.
  • 2010-01 Gecko 1.9.2 (Firefox 3.6) supports async.
  • 2010-09 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).
  • We're still waiting for Opera to implement defer and async and for IE to implement async.

So what should a web developer use?

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.

  • The simplest way to have the page render before the scripts execute, as others have pointed out, is to put your scripts at the bottom of the page. But if the scripts are essential, or the webpage contains lots of HTML, then you should put your scripts higher up on the page.
  • If your script is standalone and your customers use IE or new versions of Firefox, use <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.
  • If one external script depends on another, mark them both 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.
  • Never use defer for inline scripts because the HTML5 draft has taken away the execution order guarantee.
  • If your audience includes many Opera or old Firefox/Safari users, the following snippet will execute the script after parsing the document on most pre-HTML5 browsers (IE, Webkit, need to test old Firefox), while the newest HTML5-aware browsers start downloading immediately but won't block to execute the script because of the 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>

  • If another script depends on the first script to load, then you can use the same pattern as above, but listen to the onload event of the first script element before executing the second script. See the LABjs example for how to wait for another script to load.
  • If you have multiple scripts with complicated dependencies, use LAB.js or the YUI Loader to make them download in parallel and execute in some valid order.
  • If you're using a popular library such as jQuery, consider using Google's copy rather than your own to increase the likelihood that the browser has already cached it.

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属性（浏览器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆