Javascript 延迟属性（Chrome）_Javascript_Google Chrome_Attributes

Javascript 延迟属性（Chrome）

javascript google-chrome

Javascript 延迟属性（Chrome）,javascript,google-chrome,attributes,Javascript,Google Chrome,Attributes,Chrome对我来说一直是web标准的参考，不幸的是，它不受支持，IE从5.5版开始就支持它。为什么? js.js document.getElementById ("hi").innerHTML = "Hi :)"; HTML <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <script defer="defer" src="js.js

Chrome对我来说一直是web标准的参考，不幸的是，它不受支持，IE从5.5版开始就支持它。为什么?

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>


你好

如果脚本可以延迟，它们也可以移动到页面底部（正如@Christian在评论中指出的）

就性能而言，这是一个更好的选择，因为它不会阻止页面的其余部分加载。您可以将脚本放在

标记之前

主要浏览器不支持此属性，这本身就是停止使用它的提示。

defer

仅受internet explorer支持。你不需要依赖它。还有其他方法可以达到同样的效果，比如像其他人指出的那样，将脚本放在页面末尾的

标记前面

延迟的目的是告诉客户要等待的外部链接脚本页面完成加载，直到完成跑。同样的事情也可能发生通过良好的低调完成 JavaScript方法，通常包括阻止脚本的代码从执行直到DOM 装载完毕

延迟的优点出现在与Internet Explorer的连接，因为只有那个浏览器它支持defer属性。所以如果您只需要一个快速脚本来运行在IE中，你不介意在开始加载之前加载整个页面执行，然后只需添加defer=“defer” 在你的标签里，那会快点解决这个问题。修复IE6中的透明PNG问题这是一个可能的实际用途推迟

必须使用defer属性在向用户隐藏脚本时使用具有条件以仅IE脚本为目标的注释 -否则脚本将运行通常在其他浏览器中。）

参考资料：

延迟和异步是什么意思？默认情况下，标签是邪恶的在下载并执行脚本之前，浏览器必须停止解析HTML（因为脚本可能会调用

document.write（…）

或定义以后脚本所依赖的全局变量）。这意味着在脚本标记之后的任何图像和样式表直到脚本完成下载和执行后才开始下载。外部脚本通常会使Web加载速度慢得多，这就是NoScript如此流行的原因

微软推出了

defer

来解决这个问题。如果您使用

，您承诺不会调用
文档。编写（…）
。

延迟

外部脚本将立即开始下载，但在呈现页面之前不会执行。呈现页面后，所有

defer

脚本将按照声明的顺序执行。并非所有浏览器都实现了延迟

HTML5引入了

async

属性，该属性可以在任何时候执行——可能在页面完成解析之前，甚至在其他仍在下载的

defer

async

脚本之前执行。但是使用多个

async

脚本比较困难，因为它们的执行顺序没有保证。与延迟类似，并非所有浏览器都实现异步

执行所有

defer

和

async

脚本后，

domcontentload

和

load

事件将触发

defer

和

async

1997年IE 4引入了
```
延迟
```


1998年，但不幸的是，它没有确切地说明何时执行延迟
脚本（在加载
之前）。因此，没有其他浏览器实现延迟，因为没有人希望对IE的行为进行反向工程或破坏可能依赖于IE特性的脚本。（例如，请参见）

2006 HTML5草案最终描述了实现延迟
所需的详细信息：延迟
脚本应在解析页面其余部分之后，以及加载
之前按顺序执行。它还引入了async
，以指定在下载脚本时可以执行的脚本，而无需等待对方。不幸的是，HTML5不允许内联defer
脚本，从而与IE相矛盾。这打破了所有defer
脚本按顺序执行的不变性（如果一些defer
脚本具有src
和一些具有内联内容）

2009 Gecko 1.9.1（Firefox 3.5）
2010-01 Gecko 1.9.2（Firefox 3.6）
2010-09。你很快就会在Chrome和Safari中看到它（它已经出现在Chrome开发频道中，但是有点bug）
我们仍在等待Opera实现defer
和async
，等待IE实现async


那么web开发人员应该使用什么呢？
目前没有单一的规则可遵循。对于访问网站的一组浏览器，您必须选择最能平衡简单性、页面呈现延迟和脚本执行延迟的解决方案

正如其他人指出的那样，在脚本执行之前呈现页面的最简单方法是将脚本放在页面底部。但是如果脚本是必需的，或者网页包含大量HTML，那么您应该将脚本放在页面的更高位置
如果您的脚本是独立的，并且您的客户使用IE或新版本的Firefox，请使用
：这允许渲染与IE和最新HTML5浏览器的脚本下载并行进行，但会导致HTML5之前的浏览器（包括所有版本的Opera）被阻止
如果一个外部脚本依赖于另一个，则将它们都标记为defer
（但不是async<script>
(function() {
  var script = document.createElement('script');
  script.src = '...';
  script.async = true;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(script, s);
})();
</script>