一. <script>標記
第一種方法是把 <sript></script>直接放到head和script兩個標記之間(title下面,</head>上面)
<head>... <title>demo</title>
<script type=”text/java script”>
/*type屬性常被忽略掉。腳本默認是js,所以<script type=”text/java script”>可直接簡寫做<script>*/ ... </scipt>
</head>
內嵌js時,可能會涉及一些與html沖突的判斷。比如<>之類的操作符。可以通過html實體來替代。如>為>,<為<。
二.引用外鏈
寫好js文件,然后引用,在js文件中,不需要加入<script>標記。
<script type=”text/java script” src=”xxx.js”></script> //內部的js代碼將被忽略。
推薦使用第二種方法。具有方便維護,可緩存,標准化等優點。
三. 那么問題來了
script標記的加載方式是由上到下進行的。在解析器<script>元素對所有js代碼求值結束之前,頁面中其余的內容都不會被顯示。如何改善性能?
1.defer屬性延遲加載
一個方法是利用script元素的defer屬性。表面腳本在不影響頁面構造時才會執行(在html內容加載完之后才執行)。如在<head>元素內加入:
<script defer=”defer” arc=”xxx*.js”></script>
兩個defer存在時,理論上是按順序執行。
2.異步加載
script的另一個屬性async與defer相似。要求在不影響頁面構造時,立即下載js文件。
<script defer=”defer” async arc=”xxx*.js”></script>
但是當存在兩個async時,即便理論上也不能保證二者是順序加載。
3.最好的方式
把<script>放到html頁面內容最后(</body>之前),再外鏈引用之——這樣可以更好快地加載文件。
4.又一個問題
當瀏覽器不支持腳本;或者瀏覽器js腳本被禁用后,如何讓頁面平穩退化?
在body元素內最后部分加上noscript代碼(這段代碼在js正常時不會顯示):
<noscript>
<p>本頁面需要瀏覽器支持(啟用)javascript腳本。</p>
</nosript>
【補充】
歷史上,js可以被寫在html注釋中。可以認為是js的“行間形式”。<!--js代碼//-->,現在已廢棄。