JavaScript ＜script＞标签

拼搏现实的明天。 2022-12-16 09:19 167阅读 0赞

### 目录 ###

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

## 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);

这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：