javascript - language - script src




頁面中腳本標記的位置如何影響其中定義的JavaScript函數? (6)

Javascript的範圍規則與perl類似 - 您可以在當前或任何更高的範圍級別調用任何函數。 唯一的限制是必須在調用函數時定義函數。 來源中的位置是無關緊要的 - 只有時間位置才重要。

如果可能的話,您應該避免將腳本放在<head> ,因為它會減慢頁面顯示速度(請參閱Alan發布的鏈接)。

我讀到你應該在<head>標籤中定義你的JavaScript函數,但是<script>的位置(無論是在<head><body>或任何其他標籤中)如何影響JavaScript函數。

具體來說,它如何影響函數的範圍以及從哪裡調用它?


告訴人們只在頭部添加<SCRIPT> 聽起來像是一件合理的事情,但正如其他人所說,有很多理由說明為什麼不建議甚至不實用 - 主要是速度和動態生成HTML頁面的方式。

這就是HTML 4規範所說的

SCRIPT元素將腳本放在文檔中。 此元素可能在HTML文檔的HEAD或BODY中出現任意次。

還有一些HTML示例。 它看起來不是所有格式在這裡:)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>

HTML 5中有一些值得期待的東西:

<SCRIPT>新異步屬性:

注意:有一些方法[原文如此]可以執行腳本:

async屬性為“true”:腳本將與頁面的其餘部分異步執行,因此腳本將在頁面繼續解析時執行。

async屬性為“false”,但defer屬性為“true”:腳本將在頁面完成解析時執行。


如果在可能調用的函數之前有一個內聯腳本(外部函數),則可能會出現錯誤,因為它們可能尚未可用。 不是說它總是會發生,只是它可能取決於瀏覽器類型或版本。


如果您的腳本引用頁面上的ID並且頁面尚未呈現(即腳本在HTML之前,或者您的腳本是使用onload執行的,而不是DOM已準備好),您也可能會收到錯誤。


安置的一個方面是性能。 請參閱YSlow討論中的這篇精彩文章,了解為什麼有時建議您將它們放在文檔的底部。

至於範圍問題,據我所知,Javascript的常用可見性規則(在函數內部或外部定義的變量,本地,全局,閉包等)不會受到影響。


正常的比賽規則仍然有效; 在定義之前不要使用東西。 :)

另外,請注意“將所有內容放在最底層”的建議並不是本書中唯一規則 - 在某些情況下它可能不可行,而在其他情況下將腳本放在其他地方可能更有意義。

將腳本放在文檔底部的主要原因是性能,腳本與其他HTTP請求不同,不要並行加載,這意味著它們會減慢頁面其餘部分的加載速度。 將腳本置於底層的另一個原因是您不必使用任何“DOM就緒”功能。 由於腳本標記位於所有元素之下,因此DOM可以進行操作!

編輯:閱讀: http://developer.yahoo.com/performance/rules.html#js_bottomhttp://developer.yahoo.com/performance/rules.html#js_bottom





tags