剛開始進行代碼優化的時候，最弄不懂的就是腳本應該放在哪裏，應該用什麼樣的方式加載。
1：將腳本放在底部
HTML4規範中指出<script>標籤可以放在HTML文檔的<head>或者<body>中
<!DOCTYPE html>
<html>
<head lang="en"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="file1.js" ></script>
<script type="text/javascript" src="file2.js" ></script>
<script type="text/javascript" src="file3.js" ></script>
<script type="text/javascript" src="file4.js" ></script>
<script rel="stylesheet" type="text/css" href="style.css" ></script>
<script type="text/javascript">
});
</script>
</head>
<body>
<p>hello world</p>
</body>
</html><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/javascript">
});
</script>
</head>
<body>
<p>hello world</p>
<script type="text/javascript" src="file1.js" ></script>
<script type="text/javascript" src="file2.js" ></script>
<script type="text/javascript" src="file3.js" ></script>
<script type="text/javascript" src="file4.js" ></script>
</body>
</html>2：減少頁面包含的<script>標籤的數量 用一個javascript標籤加載多個文件
<!DOCTYPE html>
<html>
<head lang="en">
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/javascript">
});
</script>
</head>
<body>
<p>hello world</p>
<script type="text/javascript" src="file1.js & file2.js & file3.js & file4.js" ></script>
</body>
</html>3:使用延遲腳本 defer
帶defer屬性的標籤可以放在文檔中的任何位置。對應的JavaScript文件將在頁面解析到<script>標籤時開始下載，但是並不會執行，知道Dom加載完成（onload事件被處罰前）。
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" charset="UTF-8">
<title>test</title>
<script defer>
alert("defer");
</script>
<script >
alert("simple");
</script>
<script type="text/javascript">
window.onload = function(){
alert("load");
};
</script>
</head>
<body>
<p>hello world</p>
</body>
</html>
在支持defer的瀏覽器中執行順式：simple、load、defer。在不支持defer的瀏覽器下面執行順式爲：defer、simple、load。
4：動態腳本加載 動態腳本加載時最通用的無阻塞加載解決方案，實現方式有多中，後續會進行詳細說明。