解决HTML加载时，外部js文件引用较多，影响页面打开速度问题

解决HTML加载时，外部js文件引用较多，影响页面打开速度问题

 

通常HTML文件在浏览器中加载时，浏览器都会按照<script>元素在页面中出现的先后顺序，对它们依次加载，一旦加载的js文件数量过多，就会导致页面展示延迟。那么，在开发的过程中，改怎么解决呢？

首先，我们看一看传统中js加载的做法，所有的<script>元素都应该放在页面的<head>元素中，例如：

1.  
   <!DOCTYPE html>
2.  
   <html>
3.  
   <head>
4.  
   <title>HTML js应用</title>
5.  
   <meta http-equiv="Content-type" content="text/html; charset=GBK"></meta>
6.  
   <script type="text/javascript" src="example1.js"></script>
7.  
   <script type="text/javascript" src="example2.js"></script>
8.  
   </head>
9.  
    
10.  
    <body>
11.  
    <div>
12.  
    <h1>好好学习，天天向上</h1>
13.  
    </div>
14.  
    </body>
15.  
    </html>

这种做法的目的就是把所用的外部文件（包括CSS文件和js文件）的引用都放在相同的地方。可是，在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容。而对于需要很多JavaScript文件的页面来说，无疑会出现页面展示延迟现象。下面我给出3种解决方案：

方案一、改变标签的位置

 

我们把<script>元素引用放在<body>元素中，如下例所示：

1.  
   <!DOCTYPE html>
2.  
   <html>
3.  
   <head>
4.  
   <title>HTML js应用</title>
5.  
   <meta http-equiv="Content-type" content="text/html; charset=GBK"></meta>
6.  
   </head>
7.  
    
8.  
   <body>
9.  
   <div>
10.  
    <h1>好好学习，天天向上</h1>
11.  
    </div>
12.  
    <script type="text/javascript" src="example1.js"></script>
13.  
    <script type="text/javascript" src="example2.js"></script>
14.  
    </body>
15.  
    </html>

这样，在解析包含的JavaScript代码之前，页面的内容将完全展示在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开的速度加快了。

方案二、在<script>元素中加延迟脚本

 

HTML4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面解析完成后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。下面看代码实现：

1.  
   <!DOCTYPE html>
2.  
   <html>
3.  
   <head>
4.  
   <title>HTML js应用</title>
5.  
   <meta http-equiv="Content-type" content="text/html; charset=GBK"></meta>
6.  
   <script type="text/javascript" defer="defer" src="example1.js"></script>
7.  
   <script type="text/javascript" defer="defer" src="example2.js"></script>
8.  
   </head>
9.  
    
10.  
    <body>
11.  
    <div>
12.  
    <h1>好好学习，天天向上</h1>
13.  
    </div>
14.  
    </body>
15.  
    </html>

在这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行加载。

方案三、在<script>元素中加异步脚本

HTML5为<script>元素定义了async属性，这个属性与defer属性类似，都用于改变处理脚本的行为。async与defer类似，只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。如下例：

1.  
   <!DOCTYPE html>
2.  
   <html>
3.  
   <head>
4.  
   <title>HTML js应用</title>
5.  
   <meta http-equiv="Content-type" content="text/html; charset=GBK"></meta>
6.  
   <script type="text/javascript" async src="example1.js"></script>
7.  
   <script type="text/javascript" async src="example2.js"></script>
8.  
   </head>
9.  
    
10.  
    <body>
11.  
    <div>
12.  
    <h1>好好学习，天天向上</h1>
13.  
    </div>
14.  
    </body>
15.  
    </html>

在XHTML文档中，要把async属性设置为async="async"。