Dav*_*sen 26 javascript jquery html5 asynchronous
你能否证实我对HTML5 <script async>属性的理解？
例如,我的脚本引用可能适当地看起来像:
<script src="jquery..." /> <!-- async not used - ensure that this is loaded before JQuery UI and my code -->
<script src="jquery.ui..." /> <!-- async not used - ensure that this is loaded before my code -->
<script src="my_code1.js" async /> <!-- async used, for page load performance -->
<script src="my_code2.js" async /> <!-- async used, for page load performance -->
$(document).ready(function () { }块中的任何代码,我可以放心,所有异步脚本都已加载.我有这个权利吗？
Dar*_*JDG 26
与所有新的HTML5功能一样,我认为找到答案的最佳方法是在尽可能多的当前浏览器上测试它们.作为一般规则,旧浏览器应完全忽略异步标志,因此代码应按预期工作,按顺序从上到下进行解析.
只要浏览器在处理它们时不一致,如果您不确定它们是否可行,则应避免在生产代码中使用它们.
这个功能的主要问题是,支持它的浏览器,事件被触发的顺序,例如,如果你在异步加载的脚本中定义一个jQuery就绪函数,它会被解雇吗？在加载异步脚本之前或之后,您的就绪事件是否会触发？
我已经创建了几个测试文件,非常欢迎您在不同的浏览器上玩它们以查看它们的行为方式.
关于@Dave的假设:
对于
$(document).ready(function(){}块中的任何代码,我可以放心,所有异步脚本都已加载.
到目前为止它看起来不像它,它非常不一致.在Chrome中,主要就绪事件在异步文件加载之前触发,但在Firefox中它会在之后触发.
如果jQuery开发人员将来(并且可以)支持它,那么jQuery开发人员将不得不对此做出决定.
我的测试脚本会发出一个字符串,显示它执行的不同部分的顺序.它可以通过以下方式构建:
D:表示主文件中的脚本块已执行.:ok如果定义了async加载脚本中的函数,或者:undefined如果不是,则可以跟随它.
R:这意味着主文件中的jQuery ready事件已经执行.:ok如果定义了async加载脚本中的函数,或者:undefined如果不是,则可以跟随它.
L:已执行异步加载的脚本文件.
AR:已执行异步加载脚本中的jQuery ready事件.
支持异步的浏览器:
谷歌浏览器11.0.696.68:D:未定义R:未定义L AR
Firefox 4.0.1: D:未定义LR:ok AR
浏览器支持异步,但没有异步测试(期望相同的结果):
谷歌浏览器11.0.696.68:LD:好的AR R:好的
Firefox 4.0.1: LD:ok AR R:好的
浏览器不支持异步(期望相同的结果):
Internet Explorer 9: LD:ok AR R:好的
Opera 11.11: LD:ok AR R:好的
的test.html
<!DOCTYPE HTML>
<head>
<title>Async Test</title>
<script type="text/javascript">
var result = "";
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="test.js" async></script>
<script type="text/javascript">
try{
myFunc();
result += "D:ok ";
} catch(ex) { result += "D:undefined "; }
$(function(){
try{
myFunc();
result += "R:ok ";
} catch(ex) { result += "R:undefined "; }
$('body').text(result);
});
</script>
</head>
<body>
</body>
</html>
test.js
// Fires straight away when this file is loaded.
result += "L ";
$('body').text(result);
// A test function to see if it's defined in certain parts of the main file.
function myFunc(){
return;
}
// A ready function to see if it fires when loaded async.
$(function(){
result += "AR ";
$('body').text(result);
});
| 归档时间： |
|
| 查看次数： |
5337 次 |
| 最近记录： |