這裏關係到瀏覽器性能的問題。
衆所周知，如果吧script寫在head中，那麼文檔需要等到head加載完畢纔會顯示出來。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="test.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div>
this is a test
</div>
</body>
</html>test.js
var count = 0;
while (true) {
count++
}這裏我們的test寫了一個死循環，也就是頁面不可能會加載出來
如果我們調換一下script的位置，那麼就不一樣了。
<body>
<div>
this is a test
</div>
<script src="test.js"></script>
</body>因此通常我們的建議是將script標籤放在body之後，像jquery裏面的$(document).ready就是dom文檔已經加載完畢。（當 DOM（文檔對象模型） 已經加載，並且頁面（包括圖像）已經完全呈現時，會發生 ready 事件）
這裏科普一下
$(document).load();
當web頁面以及其附帶的資源文件，如CSS，Scripts，圖片等，加載完畢後執行此方法。常用於檢測頁面（及其附帶資源）是否加載完畢。
$(document).ready();
當頁面DOM對象加載完畢，web瀏覽器能夠運行JS時，此方法即被觸發。如果你想盡快執行JS，可以使用此方法。[在html的頭部的script標籤中的，不處於ready()中的JS代碼將早於ready()執行]$(document).unload();
此事件在停止瀏覽頁面的時候觸發，此操作可能存在於刷新操作/F5，單擊上一頁按鈕，進入其他頁面或關閉整個tab或窗口。
defer與async
我們知道還有一種方式可以使script延遲加載，就是使用defer和async屬性。
推薦一篇博文：
http://blog.csdn.net/renfufei/article/details/10210949
現在WebKit爲html5實現了SCRIPT標籤的async異步屬性。過去我們使用各種JavaScript技巧來做這種事情，但現在新的屬性讓防止阻塞變得相對容易。
也就是說只有ie9以及以上的瀏覽器才能支持這個屬性。
<!-- 指定async,以及 onload 回調-->
<script async src="siteScript.js" onload="myInit()"></script> Safari 瀏覽器額外添加了defer屬性
<!-- 指定defer,效果和async差不多-->
<script defer src="siteScript.js" onload="myInit()"></script> defer和async的區別在於，defer是順序加載，async是無序，即你不知道指定了async屬性的幾個script究竟誰先加載，如果這幾個文件有依賴性，那麼就完蛋了。