2010-12-09 77 views
21

我看到Javascript代碼通常在HTML代碼的標題部分。將JavaScript代碼放在HTML代碼中的任何位置都可以嗎?

<head> 
<script type="text/javascript" language="javascript" src="core.js"></script> 
... 
</head> 

可以將Javascript代碼放入HTML代碼的正文部分嗎?我測試了它,但它似乎工作。

<body> 
<script type="text/javascript" language="javascript" src="core.js"></script> 
... 
</body> 

如果是這樣,爲什麼Javascript書籍的例子將JavaScript代碼放在標題部分? 如果不是,將JavaScript代碼放在body/heading部分之間有什麼區別?

+0

這個問題在覆蓋主題方面做得很好:http://stackoverflow.com/questions/143486/unobtrusive-javascript-script-at-the-top-or-the-bottom-of-the-html-代碼 – wsanville 2010-12-09 14:10:34

+0

我很感激,如果有人也會提到包含Javascript的最佳實踐,它會影響頁面的外觀,爲的是不讓用戶在加載過程中看到「半渲染的,沒有JS處理的」頁面。 – Kos 2010-12-09 14:34:47

+2

@Kos:Google for FOUC(無版內容的閃光)對於你所說的,我會給這些元素一個可見性:hidden;樣式,在dom:ready上執行樣式,並在事件處理程序結束時刪除隱藏的樣式。 – 2010-12-09 14:56:12

回答

16

它不僅可以,it's actually better,因爲它讓內容第一。

如果您的觀看者的連接速度較慢(例如移動),最好先發送實際內容,以便他們在瀏覽器下載Javascript時可以閱讀它。

+2

完全沒問題,他接受了我的這個答案,但我真的希望這不是因爲他認爲SLaks提倡在所有地方潑灑腳本標記 – 2010-12-10 00:16:31

1

根據規範,它是合法

大多數示例在頭文件中使用它們,因爲頭文件會先出現,瀏覽器將能夠更快地解析引用並下載JS文件。

此外,這些鏈接並不是顯示的一部分,所以傳統上,放在標題中。

3

你可以做到這一點,人們經常這樣做。

例如,人們喜歡在關閉</body>之前放置script標籤,以使網頁渲染速度更快。另外,如果在創建元素後執行腳本塊,則不需要等待DOM就緒。

即使被警告,不要添加,或從標記樹一個未關閉的祖先(不包括腳本塊的直接父元素)刪除元素,或者你會得到可怕的Operation Aborted錯誤的IE瀏覽器。

1

這是完全合法的,但似乎有一些不同的意見。那些說把所有的javascript引用放在頭部的人都認爲腳本是在頁面其餘部分變得可見並依賴它之前下載的。所以你的用戶不會在屏幕上看到一個對象,試圖與它交互,並獲得一個錯誤,因爲JavaScript代碼尚未加載。

另一方面,有爭論的是,在用戶看到頁面之前加載所有腳本需要更長的時間,並且會對網站的感知速度產生負面影響。

+0

@Vincent:但是,如果在用戶嘗試與外部腳本加載之前的頁面,這意味着頁面作者正在使用`onclick`等,並且應該是LART。 – cdhowie 2010-12-09 14:16:05

+0

@cdhowie true。我希望你能避免我提到的錯誤,我只是指出了這個論點,並不一定同意它。 – 2010-12-09 14:17:50

10

所有人都說這樣更好只適用於你在頁面底部討論(這是一個爭論的事情)從代碼質量的角度來看,它是不好的,撒上腳本標籤通過你的HTML。對JavaScript的所有引用應在頁面上的一個地方,無論是頭部(他們應該是),或最底部(作爲PERF優化)

編輯:

基本上,一個網頁是由3件組成;樣式(css),結構(html)和行爲(javascript)。這些作品都非常獨特,所以儘可能將它們分開是有意義的。這樣,如果你需要改變一些JavaScript,它是在一個地方。如果它通過文件分散,找到你正在查找的代碼變得更加困難,而且當你只是在查看結構時,代碼基本上變成了噪聲。

這與爲什麼不在您的頁面上散佈數據庫訪問代碼的原因相同。它與技術原因無關,純粹是建築/設計決定。 ,做不同的事情代碼應該是分開的可讀性,可維護性,並推而廣之,refactorability(不知道這最後一個實際上是一個字......)

1

只是要加上:

我有首選在</body>之前添加Javascript文件。我的理由是:

  • 內容可以加載並首先顯示。如果您首先加載大量的Javascript文件,這些文件在頁面加載之前幾乎毫無意義,那麼在加載JS文件之前,用戶將無法看到任何內容。
  • 大多數Javascript代碼需要與UI一起工作,只能在加載UI後運行。將代碼放置在html文件的末尾可減少使用onload事件處理程序的需求。
  • 把JavaScript片段放在整個HTML文件中是非常不好的習慣。將所有文件放在HTML文件的後面,可以讓您更有效地管理Javascript。體內
1

的JavaScript將被立即執行,而頁面加載到瀏覽器

在體內的最終配售的JavaScript將推遲JavaScript的負載(即:頁面會呈現更快),但請記住,任何用於事件的javascript函數應該在事件聲明之前加載,這主要是因爲用戶可能能夠在頁面完全加載之前觸發事件(所以在加載函數之前)!

0

我曾經把它放在腦海中,然後我聽說加載頁面需要更長的時間,所以我開始將腳本放在最下面。但是,我發現最「乾淨」的方式是將它放在頭部,但是將腳本放置在document.ready函數中。這樣你就擁有了兩全其美的優點。它更清潔,因爲它在頭部,並且在內容加載之前不加載,所以在性能方面也沒有任何問題。

使用jQuery,例如,你可以像這樣做:當頁面已經被完全加載

$(document).ready(function() { 
    alert('test'); 
}); 

警報纔會彈出,即使腳本是在頭部。

相關問題