關於標籤元素的重點知識

李洛克_發表於2014-11-19

關於<script>標籤元素的重點知識：

一.該標籤由Netscape公司創造，並隨後被列入HTML規範。

二.常用的屬性只有四個：type、src、async（IE似乎不支援）、defer（個別瀏覽器不支援）

    type屬性的可選值有：text/javascript、text/ecmascript、application/javascript、application/ecmascript等，但考慮到約定俗成和最大限度的瀏覽器相容性，最好（其實是一定）要設定為text/javascript，如果不設定type屬性，預設值也為text/javascript。

    src屬性用於包含外部指令碼檔案，其值為外部指令碼檔案的URL。包含外部指令碼檔案的<script>標籤有如下兩種寫法。

    1.省略結束標籤</script>，不推薦這種寫法，因為這種語法不符合HTML規範，而且也可能得不到某些瀏覽器（如IE）的正確解析。

例：

<script type="text/javascript" src="example.js" />

    2.帶有結束標籤</script>，推薦使用這種寫法。

例：

<script type="text/javascript" src="example.js"></script>

    另外，關於src屬性還有如下兩點值得一提：

    1.外部JavaScript檔案的副檔名[.js]只是一種慣例，並非必須，因為瀏覽器不會去檢查JavaScript外部檔案的副檔名。（但伺服器通常還是需要這個副檔名的）

    2.src屬性還可以包含來自外部域的JavaScript檔案，如

<script type="text/javascript" src="http://www.baidu.com/example.js"></script>
    以上兩點知道就行了，不要在實際專案中實踐。No zuo No die.

三.關於<script>標籤在頁面中的放置位置

    按照慣例是要放在<head>元素中，這種慣例做法的最主要目的是將頁面的外部引用檔案（CSS和JavaScript）都放在相同的地方，便於管理。但這種做法有一個弊端，就是隻有在所有JavaScript程式碼都被載入和解析後才能呈現頁面內容（瀏覽器遇到<body>標籤後才開始呈現頁面內容），也就是說，假如該頁面有大量JavaScript程式碼需要載入和解析的話，那麼頁面在瀏覽器中呈現的時候會有一個明顯的延遲，延遲期間頁面會一片空白，導致使用者體驗下降。所以現代Web應用流行的做法是把<script>標籤放在<body>元素中頁面內容的後面（即</body>前面）。當然如果用前面提到的defer屬性，也可以解決上述問題，但在個別瀏覽器中，還沒有提供對defer屬性的支援，因此保險起見，最佳選擇還是將指令碼放在頁面地步。

相關文章