第2章 兩種調用JS的方法——在HTML中使用JavaScript


 一. <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實體來替代。如&gt;為>,&lt;為<。

 

 二.引用外鏈

  寫好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代碼//-->,現在已廢棄。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM