網頁前段script優化
javascript標簽到底是應該放在頭部還是尾部
按照我們的書寫習慣，我們通常把javascript標簽放到頭部，比如這樣
<html>
<head>
<script type="text/javascript" src="http://s.segmentfault.com/js/jquery.js"></script>
</head>
<body>
...
</body>
</html>
但是也有一說，由于html中的js是按順序加載的，如果js沒有加載就會阻塞后面的html加載，所以考慮到網頁載入流暢，應該把javascript放到最后面。
那么應該按照什么原則來放置js標簽的位置呢?
問題被采納后將獲得 +20 的懸賞聲望
4 個回答
Good Question，我一般都放底部，原因同你所說。
但在某種情況下我也覺得放在頭部比較好，比如一個給頁面中的某個元素添加了事件的js腳本。頁面出來了但是js沒加載完的那段時間，用戶對此元素做事件操作的時候就出不來應該有的效果。
我現在是比較傾向于放在頭部，做一些優化的工作盡量讓js加載快一點。
再聽聽其他人怎么說吧最近的做法是寫個 load.js 放在最上面
需要立即執行的就直接扔在 html 結構后面
通用的腳本引用統一放在頁腳由 js load 載入一個示例如下
GLOBAL_VAR.load(['require.js', 'function1.js', 'fn2.js'], callback);
load 這個方法其實就是在 domReady 之后很挫的往 head 里插 <script src="require.js"> 這樣就不會有腳本阻塞了
再根據約定(require.js 內必須為 GLOBAL_VAR['require'] = ... 唔, 其實有一個 GLOBAL_VAR.add 專門來處理 )來檢查 GLOBAL_VAR.require 對象是否存在之后再去調用 callback-
按照yahoo提出的web開發的優化法則的建議是，js應該放在頁面底部，因為js的下載是阻塞方式的，如果js放在頂部，并且js的量又很大，那會因為加載js阻塞了頁面其他元素的加載導致整個頁面剛開始會顯示空白。但是隨著ajax技術的發展，現在已經有了很多異步加載js的方法，因此js放在頂部也是可以的。具體的異步加載方式很多，具體你可以自己上網搜索一下。
-
ck2265395 
seawater 
wf1006
http://www.ibm.com/developerworks/cn/... 個人情況放底部比較多. 還是得實際情況實際分析的樣子...畢竟js是門靈活的語言..規范之談只是對初學者而言.
@蘇淼 雖然具體情況具體分析說法沒錯，一筆帶過不用去動腦筋，不過如果沒有人能真正去琢磨研究他，他永遠就是一個煩人的問題。理想狀態下正如 @issac 所說的那樣做，但總是說起來很簡單，實際操作的時候很煩人？如果代碼放兩邊，以后的維護性問題如何解決？當一個放底部的js需要放頭部的時候，你真會記得去挪位置嗎？如果代碼變得需要重構的時候，你真的會去重構？ 另外我也并不認為他完全是一個初學者問題，更不應該說他是初學者問題而輕視他。 我現在比較傾向于放頭部，因為我覺得保證功能能用是第一，速度可以考慮用cdn，加長cache壽命，壓縮傳輸字節等方法去優化加載時間。另外我也不建議按需求分開放，因為這么做要關心的事情會跟文件數量的增長而成指數被增長，如果都放一起就只用關心加載順序就行了
@chris 仔細想了一下,確實不錯,js功能可用為第一,并且通過后天維護來保證其不被阻塞以及速度優化,這一種是保證自己元素加上自己的js.還有一種情況在于,采用的是其他站點提供的api.例如google的+1載入超慢,只好把它放到最后.以保證整個頁面的顯示速度.按需加載其實是個好主意..就是維護性....