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

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

<link rel="preload" href="../xx.js">

JavaScript ＜script＞标签相关推荐

JavaScript script标签同步异步加载过程
同步加载同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作. <script src="http://xxx/script.js& ...
用手动创建新的script标签的方式，实现JavaScript脚本的异步加载
代码第四行里新建一个script标签页,在第8行的回调函数onreadystatechange里,根据属性readyState判断当前标签页的状态,如果为loaded或者complete,说明脚本加载 ...
javascript --- [jsonp] script标签的妙用(绕过同源限制)
1. 同源 1.1 什么是同源协议.域名.端口号相同 1.2 为什么有同源政策同源政策是为了保护用户信息的安全,放置恶意的网站窃取数据.最初的同源政策是指A网站再客户端设置的Cookie,B网站是 ...
javascript 的script标签
script元素 script标签的作用就是将js插入到HTML 属性表示不同的场景 async defer src type crossorigin charset 使用script标签的注意点不 ...
Script标签的async和defer
之前有写过HTML页面渲染过程,知道了JavaScript是会阻塞DOM解析的,所以我们会把script标签放到底部防止阻塞HTML解析.其实script还有两个属性,async和defer,也是可以 ...
script标签的defer属性
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了. 如果您的脚本不会改变文 ...
面试小记---外部脚本必须包含 script 标签吗？
外部脚本必须包含 <script> 标签吗? 答案是否定的. 身为小白的我一开始也是以为这句话的对了,因为本来嘛,引用外部脚本不都用的是<script>标签中的src属性吗.所 ...
script标签中的async和defer
在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. ja ...
前端 HTML 常用标签 head标签相关内容 script标签
script标签定义JavaScript代码  <script type="text/javascript">& ...
script标签属性用type还是language？
一个网站的建设,经常会用到JavaScript,其中必须用到script标签来外调js文件,但是script标签属性用type还是language? type 和 language 属性都可用来指定 ...

JavaScript ＜script＞标签

目录