1 body和header中JavaScript執行的時機
1.1 header中
放在header中的javascript代碼會進行預加載（即：在頁面加載之前就會進行），所以需調用才執行的腳本或事件觸發執行的腳本放在HTML的head部分中。當你把腳本放在head部分中時，可以保證腳本在任何調用之前被加載。
坑01：header中的JavaScript只是比頁面先加載，但是header中哪些JavaScript並沒有執行，只有被調用時才會執行header中那些JavaScript
坑02：header中的JavaScript腳本會在頁面加載前執行，事件會在被觸發后執行
技巧03：通常外部腳本都是在header中引入
<script src="/js/jquery.js"></script> <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
1.2 body中
放在body中的JavaScript代碼會在頁面加載完成后才進行加載，當頁面被加載時執行的腳本放在HTML的body部分。放在body部分的腳本通常被用來生成頁面的內容。
坑01：body中的JavaScript腳本會按照頁面的加載順序加載執行，事件也會在被觸發后再執行
1.3 放在header和body的區別
1.3.1 加載順序不同
header中的在頁面加載之前就會進行預加載，body中的會在按照頁面從上到下的順序進行加載，所以向獲取DOM節點這種操作必須在目標節點對應的標簽被加載后才可以進行，否則是獲取不到的喲。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>JavaScriptTest</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <!-- <script src="/js/jquery.js"></script> --> <script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script> <script> alert("Hello Boy"); var a = 100; console.log(a); var b = document.getElementById("test"); alert("header中獲取 -->> " + b); </script> </head> <body> <p>Hello Boy</p> <script> var b = document.getElementById("test"); alert("body中獲取（PS: id為test的標簽還未完成加載） -->> " + b); </script> <button id="test">測試按鈕</button> <script> var b = document.getElementById("test"); alert("body中獲取（PS: id為test的標簽完成了加載） -->> " + b); </script> </body> </html>
1.3.2 功能不同
heaer中的通常用來加載一些外部的JavaScript文件，從而提高效率；body中的主要用來實現一些頁面內容的動態創建，比如：制作鼠標跟隨事件，肯定只有當頁面加載后再進行對鼠標坐標的計算。或者是filter濾鏡與javascript的聯合使用產生的圖片淡入淡出效果
1.4 技巧
外部js文件的加載放在header中的<script>標簽中
動態創建內容的代碼放在body中的<script>標簽中
函數放在header或者body中的<script>標簽中沒有區別
像 alert() console.log() 這些如果放在header中的<script>標簽中會在頁面加載之前執行，如果放在body中的<script>標簽中就會在按照頁面的加載順序進行加載