最詳細的JavaScript高級教程(三)script標籤

引子

稍微學習過一點網頁編寫的同學都知道,網頁中的js代碼應該寫在 script 標籤中,但是爲什麼要這麼做呢?本文就介紹一下script標籤。

script 標籤

最初,網景公司想要在瀏覽器中展示使用js的html文件,但是又不想影響這個文件在其他瀏覽器中的顯示效果,於是創造了 script 標籤

我們都知道標籤可以在裏面添加屬性,script標籤有下面的屬性:

  • async 表示立即下載該腳本,不應該妨礙界面中其他操作
  • src 表示要執行這個腳本的外部文件,可選
  • charset src指定的外部文件的字符集
  • defer 腳本延遲到文檔解析顯示完成之後執行,可選
  • language 已經廢棄
  • type 重要,用於替代language屬性,默認爲text/javascript,所以這個參數一般不需要可以指定。
<script type="text/javascript">
    // 屬性設置
    function SayHi(){
        alert("Hi");
    }
</script>
<!-- 注意下面的寫法    /> 這麼寫本身沒有問題,但是不能在html中使用這種語法,因爲這樣會打亂html的解析 -->
<script type="text/javascript" src="2.js"/>
// 必須寫成下面的樣子
<script type="text/javascript" src="2.js"></script>

注意:

  • 在解釋器對script標籤中的代碼求值完畢之前,頁面中的其餘內容都不會被瀏覽器加載或者顯示
  • 帶有src的標籤中如果還有js代碼將被忽略,所以寫了src就不該在其中再寫代碼了
  • 儘量使用外部文件寫js,儘量少的使用內嵌js,這樣一來維護方便,js都在一個地方,而來如果兩個頁面使用了同一個js,它可以緩存

script 標籤位置

本來標籤應該放在header裏面,但是因爲放在header中,在加載js的時候,頁面還不會渲染(頁面只有加載到body纔會開始渲染),導致頁面出現較長時間的白,所以現在我們放在body的最後

<body>
...

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
</body>

在script中加入defer屬性之後,放到header中理論上也可以達到延遲執行的目的,但是由於不同瀏覽器對於defer的支持不同(執行順序不確定,內嵌的js不支持defer等),最好我們還是按照上面的寫法寫在body的最後

async屬性也是爲了解決腳本異步加載的問題,同樣也是不支持嵌入的js腳本,本來它跟defer的區別是 defer 按順序加載,async不按順序加載,但是在實際使用中,瀏覽器對於這個屬性的支持也不一樣,兩個屬性都不能保證腳本的順序執行以及在DOMContentLoaded之前執行,所以在瀏覽器徹底支持之前,最好還是不要用這個屬性了。

標籤

當瀏覽器禁用js或者瀏覽器根本不支持js(當然現在這種很少了),需要平穩退化,所以需要noscript標籤

它的作用是,當發生上面提到的情況的時候,顯示noscript中的內容,看下面的例子

<html>
    <head>
        <script src="2.js"></script>
    </head>
    <body>
        <noscript>
            <p>本頁面需要瀏覽器支持(啓用)JavaScript</p>
        </noscript>
    </body>
</html>

注意如果瀏覽器啓用了JS,則這個標籤裏的內容不會顯示。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章