Cai*_*aio 31 javascript attributes google-chrome
Chrome for me一直是Web标准的参考,遗憾的是不支持defer,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>
yon*_*ran 105
defer和async意味着什么？默认情况下,<script src=...></script>标签是邪恶的!浏览器必须暂停解析HTML,直到下载并执行脚本为止(因为脚本可能会调用document.write(...)或定义以后脚本所依赖的全局变量).这意味着在脚本完成下载和执行之后,脚本标记之后的任何图像和样式表都不会开始下载.外部脚本通常会使Web加载速度变慢,这就是NoScript变得如此受欢迎的原因.
微软推出defer了解决问题的方法.如果您使用<script defer src=...></script>,您保证不会打电话document.write(...).一个defer外部脚本就会立即开始下载,但不会执行,直到页面之后被渲染.页面呈现后,所有defer脚本的执行顺序与声明的顺序相同.并非所有浏览器都实现defer.
HTML5引入了async可以在任何时间执行的属性 - 可能在页面完成解析之前,甚至在仍在下载的其他defer/ async脚本之前.但是使用多个async脚本更难,因为它们的执行顺序无法保证.比如defer,并非所有浏览器都实现async了.
毕竟defer,async脚本已经执行,DOMContentLoaded并且load事件触发了.
defer和asyncdefer.defer,但不幸的是它并没有准确说明defer脚本何时执行(All in order？Before onload？).因此,没有其他浏览器可以实现,defer因为没有人想要反向设计IE的行为或破坏可能依赖于IE特性的脚本.(例如,请参阅Mozilla功能请求).defer: defer在解析页面的其余部分之后,脚本应该按顺序执行onload.它还介绍async了指定可以在下载时执行的脚本,而无需彼此等待.不幸的是,HTML5不允许内联defer脚本与IE相矛盾.这打破了所有defer脚本按顺序执行的不变量(如果某些defer脚本具有src并且某些脚本具有内联内容).defer.async.defer并async检查Webkit.您应该很快就会在Chrome和Safari中看到它(它已经在Chrome开发者频道中,但它有点儿错误).defer,async并让IE实现async.目前没有单一的规则要遵循.您必须选择最能平衡访问您网站的浏览器的简单性,页面呈现延迟和脚本执行延迟的解决方案.
<script async defer src=...></script>:这允许渲染与IE和最新HTML5浏览器的脚本下载并行继续,但会导致HTML5之前的浏览器(包括所有版本的Opera)阻止.defer(但不是async)并且它们将按照它们被声明的顺序执行(除了IE <= 9,在某些条件下可以不按顺序执行它们).同样,这允许渲染继续与IE和HTML5感知的Gecko/Webkit中的脚本下载并行,但旧的浏览器和Opera将受到影响.defer即使脚本位于页面底部,使用它们也可以相互并行下载,这是一个好主意.defer用于内联脚本,因为HTML5草案已经取消了执行顺序保证.async属性,立即下载但不会阻止执行脚本.换句话说,大多数旧版浏览器将其视为页面底部的脚本,而最新的浏览器会识别它async.但是Opera用户得到了两个世界中最糟糕的,因为Opera立即开始执行并且不理解async.这是Google Analytics为许多网页上的urchin 推荐的模式.片段:
<script>
(function() {
var script = document.createElement('script');
script.src = '...';
script.async = true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
})();
</script>
更新:如果您将脚本拆分为模块并希望提高性能,我建议Steve Souder使用" 更快的网站 "中的"耦合异步脚本"一章.它包含提示/技巧,不仅可以控制执行顺序,还可以延迟解析脚本以提高性能.
| 归档时间： |
|
| 查看次数： |
20403 次 |
| 最近记录： |