A: 頁面級js
在</body>前寫<script type="text/javascript"></script>,js代碼在script標籤裏面寫
我們在編程後期的話,會把type值改變,當成一個庫存,比如變爲type="text/tpl"
B: 外部引入js文件
<script src="demo.js"></script>
如果同時存在頁面級js和外部引入的js文件,那麼會以外部引入的js文件爲主
html代碼:
<script src="demo.js">
document.write("輸出的是頁面級js");
</script>
demo.js代碼:
document.write("輸出的是外部js文件");
執行結果:
C: 頁面級js和外部js文件都要放到body內容之後,</body>之前,原因:
如果script放在<head>標籤中,意味着必須等到全部的javascript代碼全部被下載,解釋,執行完成後,纔開始呈現頁面的內容(瀏覽器在遇到<body>標籤之後纔開始呈現內容),對於那些需要很多javascript代碼的頁面來說,這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲,爲了避免這個問題,現代Web應用程序一般把JavaScript引用放在<body>內容之後,</body>之前
這樣,在解析包含的JavaScript代碼之前,頁面的內容將完全呈現在瀏覽器中,而用戶也會因爲瀏覽器窗口顯示空白頁面的時間縮短而感到打開的頁面速度加快了
下面附帶的講一下<script>的屬性:(介紹完這個知道其實script放的位置其實不止一種):
1 async:可選,表示應該立即下載該腳本,但不妨礙頁面中的其他操作,比如下載其他資源或等待加載其他腳本,只對外部腳本文件有效
2 charset:可選,表示通過src屬性指定的代碼的字符集,由於大多數的瀏覽器都會忽略它的值,因此這個屬性很少有人用
3 defer: 可選,表示腳本可以延遲搭配文檔完全被解析和顯示之後再執行,支隊外部腳本有效,IE7及更早版本也支持這個屬性
4 language:已廢棄,原來用來表示編寫代碼使用的腳本語言(如JavaScript,JavaScript1.2或VBScript ),大多數瀏覽器都會忽略這個屬性,因此也沒有必要再用了
5 src: 可選,表示包含要執行代碼的外部文件
6 type: 可以看成是language的替代屬性;表示編寫代碼使用的腳本語言的內容類型(也稱爲MIME類型),雖然text/javascript 和text/ecmascript都已經不被推薦使用了,但人們一直向來都還是text/JavaScript,實際上,服務器在傳送JavaScript文件時使用的MIME類型通常是application/x-javascript,但在type中設置這個值卻可能導致腳本文件被忽略,另外,在非IE瀏覽器中還可以使用以下值:application/javascript 和 applicat/ecmascript,考慮到約定俗成和最大限度的瀏覽器兼容性,目前type屬性的值依舊是text/javascript,不過這個屬性也不是必需的,如果沒有指定這個屬性,則其默認的值依舊是text/javascript
根據上面的<.script>屬性,衍生出了延遲腳本和異步腳本
延遲腳本:
defer屬性,表明腳本在執行時不會影響頁面的構造,<script type="text/javascript" src="example1.js">可以放在head中,這個腳本將延遲到瀏覽器遇到</html>標籤後執行,HTML5規範要求腳本按照他們出現的先後順序執行,因此第一個腳本會優先於第二個延遲腳本執行,而這兩個腳本會優先於DOMContentLoaded事件執行
在現實中,延遲腳本不一定會按照順序執行,也不一定會在DOMContentLoaded事件觸發前執行,因此最好只包含一個延遲腳本
前面提過,defer只適用於外部腳本文件,這一點在HTML5已經明確規定,因此支持HTML5的實現會忽略給嵌入腳本設置的defer屬性,IE4~IE7還支持對嵌入腳本的defer屬性,IE8及之後版本則完全支持HTNL5行爲
IE4,FireFox3.5,Safari5和Chrome 是最早支持defer屬性的瀏覽器,其他瀏覽器會忽略這個屬性,像平常一樣處理這個腳本,爲此,把延遲腳本放在頁面最底部仍然是最佳選擇
異步腳本:
HTML5中爲<script>設置了async屬性,這個屬性與defer屬性類似,都用於改變處理腳本的行爲,同樣與defer相似,async只適用於外部腳本文件,並告訴瀏覽器立即下載文件,但與defer不同的是,標記爲async的腳本並不保證按照指定他們的順序執行,如果在head中寫兩個異步腳本文件,第二個異步腳本文件可能會在第一個異步腳本文件之前執行,因此確保兩者之間相互不依賴非常重要
指定async屬性的目的是不讓頁面等待兩個腳本的下載和執行,從而異步加載頁面其他內容,爲此,異步腳本不建議在加載期間修改DOM
異步腳本一定會在頁面的load事件前執行沒打不可能會在DOMContentLoaded事件觸發之前或者之後執行,支持異步腳本的瀏覽器有FireFox3.6,Safari5 和 Chrome