JavaScript優化篇4-Deferred Scripts 延期腳本
HTML 4 为<script>标签定义了一个扩展属性：defer。这个defer 属性指明元素中所包含的脚本不打算修改DOM，因此代码可以稍后执行。defer 属性只被Internet Explorer 4 和Firefox 3.5 更高版本的浏览器所支持，它不是一个理想的跨浏览器解决方案。在其他浏览器上，defer 属性被忽略，<script>标签按照默认方
式被处理（造成阻塞）。如果浏览器支持的话，这种方法仍是一种有用的解决方案。示例如下：
<script type=”text/javascript” src=”file1.js” defer></script>
一个带有defer 属性的<script>标签可以放置在文档的任何位置。对应的JavaScript 文件将在<script>被解析时启动下载，但代码不会被执行，直到DOM 加载完成（在onload 事件句柄被调用之前）。当一个defer的JavaScript 文件被下载时，它不会阻塞浏览器的其他处理过程，所以这些文件可以与页面的其他资源一
起并行下载。
任何带有defer 属性的<script>元素在DOM 加载完成之前不会被执行，不论是内联脚本还是外部脚本文件，都是这样。下面的例子展示了defer 属性如何影响脚本行为：
<html>
<head>
<title>Script Defer Example</title>
</head>
<body>
<script defer>
alert(“defer”);
</script>
<script>
alert(“script”);
</script>
<script>
window.onload = function(){
alert(“load”);
};
</script>
</body>
</html>这些代码在页面处理过程中弹出三个对话框。如果浏览器不支持defer 属性，那么弹出对话框的顺序是
“defer”，“script”和“load”。如果浏览器支持defer 属性，那么弹出对话框的顺序是“script”，“defer”和“load”。
注意，标记为defer 的<script>元素不是跟在第二个后面运行，而是在onload 事件句柄处理之前被调用。
如果你的目标浏览器只包括Internet Explorer 和Firefox 3.5，那么defer 脚本确实有用。如果你需要支持跨领域的多种浏览器，那么还有更一致的实现方式。 本文出自慕课网，转载请注明出处，侵权必究。共同學習，寫下你的評論
評論加載中...
作者其他優質文章
