javascript高級程序設計（第3版）之《script元素》

時間 2019-12-10

標籤 javascript 高級程序設計 script元素欄目 JavaScript 简体版

原文原文鏈接

`<script>`元素屬性

屬性	定義
async	【可選】。能夠異步加載，表示能夠當即下載此腳本，但不影響頁面其餘操做。只對外部腳本有效。
charset	【可選】。表示經過src屬性制定代碼的字符集。因爲多數瀏覽器會忽略此屬性，不多人使用。
defer	【可選】。表示腳本能夠掩飾到文檔徹底被解析和顯示以後再執行。只對外部腳本有效。IE7及更早的版本對嵌入腳本也支持此屬性。
language	已廢棄。
src	【可選】。表示要執行外部文件的路徑或連接。
type	【可選】。默認爲text/javascript。能夠視爲language的替代品。表示編寫代碼使用的腳本語言的內容類型（也成爲MIME類型）

defer延遲腳本

這個屬性代表腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完成以後再運行。所以，在<script>元素中設置defer屬性，就是告訴瀏覽器此腳本當即下載，可是延遲執行。javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="example1.js" defer></script>
    <script src="example2.js" defer></script>
</head>
<body>
    <!--這裏放代碼-->
</script>
</html>

這以上例子中，雖然咱們把<script>元素放在了文檔的<head>元素中，但其中包含的腳本將延遲到整個<html>解析完成以後再執行。因爲HTML5規範要求腳本按照他們出現的前後順序執行，所以第一個延遲腳本會優先於第二個執行，二這兩個腳本會優先於DOMContentLoaded事件執行。在實際運用中，兩個延遲腳本不必定會按照順序執行，也不必定會在DOMContentLoaded事件觸發前執行，所以最後只包含一個延遲腳本。defer屬性不多使用。html

async異步腳本

這個屬性與defer屬性蕾西，都用於改變處理腳本的行爲。與defer不一樣的是，使用async的腳本並不能保證按照指定他們的前後屬性執行。java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="example1.js" async></script>
    <script src="example2.js" async></script>
</head>
<body>
    <!--這裏放代碼-->
</script>
</html>

在以上例子中，第二個腳本可能會優先於第一個腳本執行，也不能不是。所以，若是使用async屬性，確保二者以後互相不依賴很是重要。指定async屬性的目的是不讓頁面等待兩個腳本的下載與執行，而是能夠異步的加載頁面的其餘內容。因此，建議異步腳本不要在加載期間修改DOM，以避免出現錯誤。jquery

異步腳本必定會在頁面load事件前執行，但可能會在DOMContentLoaded事件觸發以前或以後執行，所以，使用此屬性的人也不多。瀏覽器

`<scrip>`元素嵌入JavaScript代碼的用法

兩種用法

直接在頁面內部嵌入JavaScript代碼。異步

<script>
  function sayHello() {
  alert('hello,word')
}
</script>

在外部引用JavaScript代碼。async

<script src="example.js"></script>
<script src="../example.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

特別強調

包含在<script>元素內部的代碼會被從上至下一次解釋。因此在元素內部不要出現"</script>"字符串，不然會報錯。code
```
<script>
  function sayHello() {
  alert('</script>')
}
</script>
//Uncaught SyntaxError: Invalid or unexpected token
//頁面只會顯示"')}"字符串
```
若是確實要使用"</script>"字符串，能夠加上轉義符''htm
```
<script>
  function sayHello() {
  alert('<\/script>')
}
</script>
```
使用外部引入javascript時，src屬性是必須的。這個屬性值是一個指向外部JavaScript文件的路徑或連接。token
```
<script src="example.js"></script>
```
使用此方式引入JavaScript時，在<script>內部不要寫任何額外的JavaScript代碼。若是寫了會被忽略。

不管使用任何方式，只要不存在defer和async屬性，瀏覽器都會按照<script>元素在頁面中出現的前後順序依次解析。因此說，JavaScript代碼最好放在<body>標籤尾部，防止白屏之類問題。