方案一、改变标签的位置
我们把<script>元素引用放在<body>元素中，如下例所示：
<body>
<div>
<h1>好好学习，天天向上</h1>
</div>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
这样，在解析包含的JavaScript代码之前，页面的内容将完全展示在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开的速度加快了。
方案二、在<script>元素中加延迟脚本
HTML4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面解析完成后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。下面看代码实现：
<head>
<title>HTML js应用</title>
<meta http-equiv="Content-type" content="text/html; charset=GBK"></meta>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
方案三、在<script>元素中加异步脚本
HTML5为<script>元素定义了async属性，这个属性与defer属性类似，都用于改变处理脚本的行为。async与defer类似，只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。如下例：
<head>
<title>HTML js应用</title>
<meta http-equiv="Content-type" content="text/html; charset=GBK"></meta>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
注意：在XHTML文档中，要把async属性设置为async="async"。
网友评论