延迟属性(Chrome)

怎么办 defer 和 async

默认情况下,a <script src=...></script> 标签是邪恶的! 在下载并执行脚本之前,浏览器必须停止解析HTML(因为脚本可能会调用 document.write(...)

微软推出 推迟 来解决这个问题。如果你使用 <script defer src=...></script> ,你 答应不打电话 文档。写入(…) 推迟 外部脚本将立即开始下载,但在呈现页面之前不会执行。页面呈现后,所有 脚本的执行顺序与它们的声明顺序相同。并非所有浏览器都实现 推迟 但是。

HTML5引入了 异步 属性,该属性可以在任何时候执行--可能在页完成解析之前,甚至在其他 推迟 异步 仍在下载的脚本。但要使用多个 脚本,因为它们的执行顺序没有保证。就像 ,不是所有浏览器都实现 异步

毕竟 推迟 和 异步 脚本已经执行 DOMContentLoaded 和 load 事件发生了。

推迟 异步

• 推迟 .
• HTML 4 spec mentions defer ,但不幸的是,它并没有确切说明 推迟 onload ?). 因此,没有其他浏览器实现 推迟 Mozilla feature request ,例如)。
• 2006年HTML5草案最终描述了实现所需的细节 : 推迟 脚本都应该在页面的其余部分被解析之后,以及之前按顺序执行 加载 . 它还介绍了 异步 指定可以在下载时执行的脚本,而不必等待对方。不幸的是,HTML5不允许内联 剧本。这个 打破不变量 就这些 脚本按顺序执行(如果有的话 脚本有 src 有些有内联内容)。
• 2009壁虎1.9.1(火狐3.5) supports defer .
• 2010-01壁虎1.9.2(火狐3.6) supports async
• 2010-09年度 defer and async are checked into Webkit . 你应该很快就能在Chrome和Safari中看到它(它已经在Chrome dev频道上了,但是有点小毛病)。
• 我们还在等Opera的实施 推迟 和 异步 为IE实现 异步 .

那么web开发人员应该使用什么呢?

现在没有一条规则可以遵循。您必须为访问您网站的一组浏览器选择最能平衡简单性、页面呈现延迟和脚本执行延迟的解决方案。

• 如果您的脚本是独立的,并且您的客户使用IE或新版本的Firefox,请使用 <script async defer src=...></script> :这允许呈现与IE和最新HTML5浏览器的脚本下载并行进行,但会导致HTML5之前的浏览器(包括Opera的所有版本)被阻止。
• 如果一个外部脚本依赖于另一个脚本,请将它们都标记为 (但不是 异步 IE<=9 in certain conditions can execute them out of order ). 同样,这允许渲染与IE和HTML5-aware Gecko/Webkit中的脚本下载并行进行,但较旧的浏览器和Opera将受到影响。这是个好主意 推迟 即使脚本位于页面底部,以便它们彼此并行下载。
• 推迟 对于内联脚本,因为HTML5草案取消了执行顺序保证。
• 如果你的读者中有很多Opera或老的Firefox/Safari用户,下面的代码片段将在大多数HTML5之前的浏览器(即Webkit,需要测试老的Firefox)上解析文档后执行脚本,而最新的HTML5感知浏览器将立即开始下载,但不会因为 异步 属性。换句话说,大多数老的浏览器把它当作页面底部的一个脚本,而最新的浏览器可以识别 异步 . 但是Opera的用户会两败俱伤,因为Opera会立即开始执行,并且不理解 异步 . 这是 pattern recommended by Google Analytics

代码段:

<script>
(function() {
  var script = document.createElement('script');
  script.src = '...';
  script.async = true;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(script, s);
})();
</script>

• 如果另一个脚本依赖于要加载的第一个脚本,则可以使用与上面相同的模式,但在执行第二个脚本之前,请先侦听第一个脚本元素的on load事件。见 LABjs example for how to wait for another script to load .
• 如果有多个具有复杂依赖关系的脚本,请使用 LAB.js 或者 YUI Loader
• 如果您使用的是像jQuery这样的流行库,请考虑使用 Google's copy 而不是你自己来增加浏览器已经缓存它的可能性。

:如果将脚本拆分为模块并希望提高性能,我建议使用 更快的网站

defer 仅由internet explorer支持。你不需要依赖它。有其他方法可以获得相同的效果,比如将脚本放在页面末尾 </body> 正如其他人指出的那样,标签。

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

连接到Internet Explorer, 因为只有那个浏览器 支持“延迟”属性的。所以, 如果只需要运行一个快速脚本 在IE中,你不介意 在开始之前加载整个页面 执行,然后简单地添加defer=“defer” 在你的标签上 快点解决那个问题。 是一种可能的实际用途 推迟。

defer属性必须 在隐藏脚本时使用 只针对IE脚本的注释 否则脚本将运行

参考: http://www.impressivewebs.com/10-javascript-quick-tips-and-best-practices/

如果脚本可以推迟,它们也可以移动到页面的底部(正如@Christian在评论中指出的那样)

就性能而言,这是一个更好的选择,因为它不会阻止页面的其余部分加载。你可以把你的脚本放在 </body>

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