關於javascript放在哪里更合適
腳本位置：
例如以下代碼：
<html>
<head>
<title>Script Example</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>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
上面看起來很正常的代碼，在載入的時候就會有性能問題：在<head>中加載三個js文件，由於腳本會阻塞頁面渲染，知道他們全部下載並執行。
下圖顯示加載時：
為了盡量減少對整個頁面的影響，讓頁面渲染完成之后開始下載執行js文件。例如：
<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<!-- 頁面渲染完成后，下載執行js -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>
Inline JavaScript
如果頁面渲染的過程需要用到js文件，我們可以采取內聯javascript。例如：
<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" >
/*寫入相應的代碼*/
</script>
</head>
<body>
<p>Hello world!</p>
<!-- 頁面渲染完成后，下載執行js -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>
延遲腳本
HTML4允許我們給script標簽添加屬性：“defer”來告訴我們本元素所含的腳本不會修改DOM，因此代碼能夠安全的延遲執行。該屬性只有IE4+ 和 Firefox3.5+的瀏覽器支持。可以將<script "file1.js" defer></script>放到頁面任何一處，他將會在頁面解析到<script>標簽時才會並行下載，但是不會執行file1.js文件，知道DOM加載完成。下載的時候不會阻塞瀏覽器的其他進程。
異步加載
HTML5允許我們給 script 標簽添加屬性： "async" 來告訴瀏覽器不必停下來等待該腳本執行，什么時候下載完什么時候執行該腳本就可以了。這樣的話瀏覽器會邊下載js文件邊渲染后面的內容。
當然如果file2.js需要依賴file1.js，那么file1.js就不能異步加載了。
<html>
<head>
<title>Script Example</title>
<script type="text/javascript" src="file1.js" async></script>
<script type="text/javascript" src="file2.js" async></script>
<script type="text/javascript" src="file3.js" async></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
組織腳本
為了減少性能消耗，在大型的網站或者網絡應用需要依賴數個js文件的時候。你可以把多個文件合成一個。例如：
<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" >
/*寫入相應的代碼*/
</script>
</head>
<body>
<p>Hello world!</p>
<!-- 頁面渲染完成后，下載執行js -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>
</body>
</html>
還可以將就多個文件進行合並壓縮，http://ganquan.info/yui/?hl=zh-CN ,1個100kb的js文件下載比4個25kb的js文件更快。
結論：
當頁面加載時在HTML head部分中的JavaScripts會在被調用的時候才執行，在HTML body部分中的JavaScripts會在頁面加載的時候被執行。
在頁面加載時我們需要讓頁面內容盡快呈現給用戶，頁面初始渲染所需要的JS和CSS可以直接在 <head> 標簽中以代碼形式插入。所有的外部文件引用可以放在頁面內容之后，對於JS文件也可以采用異步 加載。
關於defer跟async的可以參考 http://www.cnblogs.com/xiaokk06/p/4966801.html