解決HTML加載時，外部js文件引用較多，影響頁面打開速度問題
通常HTML文件在瀏覽器中加載時，瀏覽器都會按照<script>元素在頁面中出現的先后順序，對它們依次加載，一旦加載的js文件數量過多，就會導致頁面展示延遲。那么，在開發的過程中，改怎么解決呢？
首先，我們看一看傳統中js加載的做法，所有的<script>元素都應該放在頁面的<head>元素中，例如：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>HTML js應用 </title>
-
<meta http-equiv="Content-type" content="text/html; charset=GBK"> </meta>
-
<script type="text/javascript" src="example1.js"> </script>
-
<script type="text/javascript" src="example2.js"> </script>
-
</head>
-
-
<body>
-
<div>
-
<h1>好好學習，天天向上 </h1>
-
</div>
-
</body>
-
</html>
這種做法的目的就是把所用的外部文件（包括CSS文件和js文件）的引用都放在相同的地方。可是，在文檔的<head>元素中包含所有JavaScript文件，意味着必須等到全部JavaScript代碼都被下載、解析和執行完成以后，才能開始呈現頁面的內容。而對於需要很多JavaScript文件的頁面來說，無疑會出現頁面展示延遲現象。下面我給出3種解決方案：
方案一、改變標簽的位置
我們把<script>元素引用放在<body>元素中，如下例所示：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>HTML js應用 </title>
-
<meta http-equiv="Content-type" content="text/html; charset=GBK"> </meta>
-
</head>
-
-
<body>
-
<div>
-
<h1>好好學習，天天向上 </h1>
-
</div>
-
<script type="text/javascript" src="example1.js"> </script>
-
<script type="text/javascript" src="example2.js"> </script>
-
</body>
-
</html>
這樣，在解析包含的JavaScript代碼之前，頁面的內容將完全展示在瀏覽器中。而用戶也會因為瀏覽器窗口顯示空白頁面的時間縮短而感到打開的速度加快了。
方案二、在<script>元素中加延遲腳本
HTML4.01為<script>標簽定義了defer屬性。這個屬性的用途是表明腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面解析完成后再運行。因此，在<script>元素中設置defer屬性，相當於告訴瀏覽器立即下載，但延遲執行。下面看代碼實現：
-
<!DOCTYPE html>
-
<html>
-
<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>
-
-
<body>
-
<div>
-
<h1>好好學習，天天向上 </h1>
-
</div>
-
</body>
-
</html>
在這個例子中，雖然我們把<script>元素放在了文檔的<head>元素中，但其包含的腳本將延遲到瀏覽器遇到</html>標簽后再執行。HTML5規范要求腳本按照它們出現的先后順序執行加載。
方案三、在<script>元素中加異步腳本
HTML5為<script>元素定義了async屬性，這個屬性與defer屬性類似，都用於改變處理腳本的行為。async與defer類似，只適用於外部腳本文件，並告訴瀏覽器立即下載文件。但與defer不同的是，標記為async的腳本並不保證按照指定它們的先后順序執行。如下例：
-
<!DOCTYPE html>
-
<html>
-
<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>
-
-
<body>
-
<div>
-
<h1>好好學習，天天向上 </h1>
-
</div>
-
</body>
-
</html>