首页手记 JavaScript优化篇4-Deferred...

JavaScript优化篇4-Deferred Scripts 延期脚本

标签：

PHP JavaScript 前端工具

Deferred Scripts 延期脚本

HTML 4 为<script>标签定义了一个扩展属性：defer。这个defer 属性指明元素中所包含的脚本不打算修改DOM，因此代码可以稍后执行。defer 属性只被Internet Explorer 4 和Firefox 3.5 更高版本的浏览器所支持，它不是一个理想的跨浏览器解决方案。在其他浏览器上，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 脚本确实有用。如果你需要支持跨领域的多种浏览器，那么还有更一致的实现方式。 本文出自慕课网，转载请注明出处，侵权必究。

点击查看更多内容