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