HTML4.01爲該標籤定義了下列六個屬性:
- async : 可選。表示應該立即下載腳本,但不妨礙其他操作。比如下載其他資源或等待加載其他腳本。只對外部腳本有效
- charset:可選。表示通過src屬性指定的代碼字符集。一般瀏覽器會忽略,基本不使用。
- defer:可選。表示腳本可以延遲到文檔完全被解析並顯示後再執行。只對外部腳本有效。等同於將腳本放在body結尾處一個效果,基本可以廢掉。當然,如果自己編程習慣是將所有腳本放在一起時,一些後期腳本則可以加上該屬性!!!
- language:已廢棄。用於標識腳本的語言。
- src:可選。表示包含要執行代碼的外部文件的路徑或者鏈接!
- type:可選。算是language的替代屬性。例:type="text/javascript" 基本可以忽略,不寫也可以。
基本可以說就這幾個常用的。defer可以考略用一下;如果不太能確定的話,用defer
總是會比async
穩定。。。
注意事項:
- 在使用<script>標籤嵌入js代碼時,請不要再代碼中出現('</script>')標籤,瀏覽器會誤認爲代碼結束。解決:'<\/script>' 轉義符解決
- 注意,對於帶有src的script標籤中,切勿書寫js代碼,因爲它只會下載外部的腳本代碼,而將中間代碼忽略,切記!!!
- 爲了避免加載腳本js之前,頁面結構已出現,一般建議將js文件放在body中內容標籤後面。當然,放在前面也可以,給其標籤上加defer屬性名即可。
- 現實當中,延遲腳本(defer)並不一定會按照腳本執行,也不一定會DOMContentLoaded事件前執行,所以最好只包含一個外部的異步腳本。
- 對於async和defer,都是適用於外部腳本注入,但是defer並列則會按先後順序來執行;async就不能保證他們之間可以按順序來執行,建議用則推薦defer.
- 如果有兩個以上的 異步腳本,採用async時確保兩者之間無依賴關係,且在dom渲染之前未對頁面進行操作
對於外部引入的腳本js的優點:
- 可維護性。把所有的js放在一個文件夾中,維護起來就輕鬆多了。且開發人員的可以在不觸及頁面結構文件的前提下,來專注修改編輯js代碼。
- 可緩存性。瀏覽器可以根據具體的設置去緩存鏈接的外部腳本文件。通俗的說就是當有兩個頁面共用一個腳本文件時,該文件只需下載一次即可。即能夠加快頁面的加載速度。
- 適應未來趨勢。比如xhtml和html的外部文件引入方式語法是相同的。
noscript標籤:
- 瀏覽器不支持腳本
- 瀏覽器支持腳本,但腳本被禁用
符合上述兩種條件,noscript中的內容纔會出現。
解決的目的:當瀏覽器不支持js腳本語言時,讓頁面平緩的退化