目錄
- 1. HTML中使用JavaScript，
- 1.1 直接將JavaScript代碼放入<script>標簽中，
- 1.2 通過src參考外部JavaScript檔案，
- 2. <script>標簽屬性，
- 2.1 src
- 2.2 type
- 2.3 crossorigin
- 2.4 charset
- 2.5 async
- 2.6 defer
- 2.7 integrity
- 2.8 language
- 3. 標簽位置，
- 4. 動態加載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="../xx.js">
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/195268.html
標籤：其他