JavaScript ＜script＞標籤

吳佩佩佩佩發表於2020-10-27
JavaScript

目錄

1. HTML中使用JavaScript。

要在html中使用JavaScript主要是使用<script>標籤。
使用<script>標籤的方式有2種：

1.1 直接將JavaScript程式碼放入<script>標籤中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>script標籤</title>
  <script>
    function hi() {}
  </script>
</head>
<body></body>
</html>

1.2 通過src引用外部JavaScript檔案。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>script標籤</title>
  <script src="xxx.js"></script>
</head>
<body></body>
</html>

2. <script>標籤屬性。

<script>標籤有8個屬性，分別是：

2.1 src

用於引用外部檔案。

2.2 type

表示程式碼塊中的語言型別，這個值始終是text/javascript。

2.3 crossorigin

配置相關請求的CORS（跨源資源共享）設定。預設不使用CORS。crossorigin=
"anonymous"配置檔案請求不必設定憑據標誌。crossorigin="use-credentials"設定憑據
標誌，意味著出站請求會包含憑據。

2.4 charset

使用 src 屬性指定的程式碼字符集。這個屬性很少使用，因為大多數瀏覽器不在乎它的值。

2.5 async

表示應該立即開始下載指令碼，但不能阻止其他頁面動作，比如下載資源或等待其他指令碼載入。只對外部指令碼檔案有效。

2.6 defer

表示指令碼可以延遲到文件完全被解析和顯示之後再執行。只對外部指令碼檔案有效。在 IE7 及更早的版本中，對行內指令碼也可以指定這個屬性。

2.7 integrity

允許比對接收到的資源和指定的加密簽名以驗證子資源完整性（SRI，Subresource Integrity）。如果接收到的資源的簽名與這個屬性指定的簽名不匹配，則頁面會報錯，指令碼不會執行。這個屬性可以用於確保內容分發網路（CDN，Content Delivery Network）不會提供惡意內容。

2.8 language

廢棄。最初用於表示程式碼塊中的指令碼語言（如"JavaScript"、“JavaScript 1.2”
或"VBScript"）。大多數瀏覽器都會忽略這個屬性，不應該再使用它。

3. 標籤位置。

可以把<script>放在<head>裡，如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../xx.css">
  <script src="../js"></script>
</head>
<body>
  <!-- 內容 -->
</body>
</html>

這樣的做法的目的是為了把外部的CSS和JavaScript檔案都集中在一起，但是這樣會造成渲染頁面的時候，頁面會在下載JavaScript解析後，才顯示<body>裡的內容。在這個期間，頁面是完全空白的。
為了解決這個問題，提高使用者體驗，現在通常把JavaScript的引用放在<body>的內容後面，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../xx.css">
</head>
<body>
  <div>body內容</div>
  <script src="../js"></script>
</body>
</html>

這樣就會先顯示body中的內容，再去下載和解析JavaScript。

4. 動態載入JavaScript。

可以通過DOM的API，向DOM中新增<script>，例如：

var script = document.createElement('script'); 
script.src = '../xx.js'; 
// script.async = false; 可以明確將其設定為同步載入
document.head.appendChild(script);

這種方式獲取的資源對瀏覽器預載入器是不可見的。這會嚴重影響它們在資源獲取佇列中的優先順序。根據應用程式的工作方式以及怎麼使用，這種方式可能會嚴重影響效能。要想讓預載入器知道這些動態請求檔案的存在，可以在文件頭部顯式宣告它們：

<link rel="preload" href="gibberish.js">

相關文章