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>标签属性。

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">

JavaScript ＜script＞标签

目录