什么是延迟脚本呢?html5实战与剖析之延迟脚本是帮大家解决一些javascript加载问题的。有了html5实战与剖析之延迟脚本这个功能,我们可以不再为了javascript加载而发愁页面加载的时候结构会凌乱了。
说到javascript中的延迟脚本,早在html4.01的时候已经有了这样的属性。使用起来很方便,那就是在外部引用的script标签上加一个”defer”属性。加了”defer”属性,就不会影响页面的构造了。也就是说,脚本会加载但是不运行,等到页面全部加载完之后按顺序执行。为了能够更加理解,请看下面的例子。
在这个例子中,会有a.html文件,这个文件中引用的script标签没有添加延迟脚本的属性,而b.html文件添加了延迟脚本的属性。分别有两个javascript文件,分别是a.js和b.js,两个文件中各弹出自己文件的名字,以作示范。
a.js代码
alert("a");
b.js代码
alert("b");
a.html代码
<!doctype html>
<html dir="ltr" lang="zh-cn">
<head>
<meta charset="utf-8">
<title>梦龙</title>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body>
<p class="a">
梦龙小站
</p>
</body>
</html>
b.html代码
<!doctype html>
<html dir="ltr" lang="zh-cn">
<head>
<meta charset="utf-8">
<title>梦龙</title>
<script type="text/javascript" defer="defer" src="a.js"></script>
<script type="text/javascript" defer="defer" src="b.js"></script>
</head>
<body>
<p class="a">
梦龙小站
</p>
</body>
</html>
上面的例子可以看出。虽然我们是在head标签中引用的a.js和b.js,但是由于我们设置了”defer”属性。所以引用的a.js和b.js会加载,只不过得在浏览器遇到标签之后再执行。由于浏览器解析延迟属性不一样,延迟脚本执行的顺序是不一样的。“defer”属性只适用于外部引用javascript文件,会忽略其他几种方法引用javascript文件的方法。
支持的浏览器有:ie9、firefox 3.5、safari 5和chrome。其他不支持的浏览器会像正常一样加载和处理脚本。
以上就是html5实战与剖析之延迟脚本的内容。
