HTML5实战与剖析之延迟脚本

最新推荐文章于 2021-07-09 08:42:50 发布

云圣天

最新推荐文章于 2021-07-09 08:42:50 发布

阅读量2.4k

点赞数 2

分类专栏： HTML5实战与剖析 HTML5实战与剖析文章标签：延迟脚本 HTML5 HTML5实战与剖析

本文链接：https://blog.csdn.net/lee_magnum/article/details/16961001

版权

HTML5实战与剖析同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

HTML5实战与剖析

31 篇文章 21 订阅

订阅专栏

　　什么是延迟脚本呢?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>
<div class="a">
梦龙小站
</div>
</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>
<div class="a">
梦龙小站
</div>
</body>
</html>

　　上面的例子可以看出。虽然我们是在head标签中引用的a.js和b.js，但是由于我们设置了”defer”属性。所以引用的a.js和b.js会加载，只不过得在浏览器遇到标签之后再执行。由于浏览器解析延迟属性不一样，延迟脚本执行的顺序是不一样的。“defer”属性只适用于外部引用JavaScript文件，会忽略其他几种方法引用JavaScript文件的方法。

　　支持的浏览器有：IE9、Firefox 3.5、safari 5和chrome。其他不支持的浏览器会像正常一样加载和处理脚本。

　　什么是延迟脚本呢?HTML5实战与剖析之延迟脚本就为大家介绍完了。HTML5的学习过程是有趣生动的，这才是刚刚开始哟。更多有关HTML5实战与剖析的相关内容敬请关注梦龙小站。

云圣天

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5实战与剖析之延迟脚本

什么是延迟脚本呢?重度剖析HTML5之延迟脚本是帮大家解决一些JavaScript加载问题的。有了重度剖析HTML5之延迟脚本这个功能，我们可以不再为了JavaScript加载而发愁页面加载的时候结构会凌乱了。
复制链接

扫一扫

专栏目录