JavaScript笔记(二)——HTML中的JavaScript

JavaScript笔记（二）

读书笔记
HTML中的JavaScript
内容概要

读书笔记

《JavaScript高级程序设计(第4版)》

HTML中的JavaScript

JavaScript是通过<script>元素插入到HTML页面中的。

要包含外部JavaScript文件，必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
所有<script>元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下，包含在<script>元素中的代码必须严格按次序解释。
对不推迟执行的脚本，浏览器必须解释完位于<script>元素的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签之前。
可以使用defer属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
可以使用async属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。

内容概要

2.1 <\script>元素

将JavaScript插入HTML的主要方法是使用<script>元素。

<script>元素有8个属性。

async

：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
charset

：可选。使用src属性指定的代码字符集。

crossorigin

：可选。配置相关请求的CORS(跨源资源共享)设置。默认不使用CORS。

//配置文件请求不必设置凭据标志
crossorigin="anonymous"

//设置凭据标志，意味着出站请求会包含凭据
crossorigin="use-credentials"

defer

：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
integrity

：可选。允许接收到的资源和指定的加密签名以验证子资源完整性(SRI，Subresource Integrity)。
language

：废弃。最初用于表示代码块中的脚本语言(如”JavaScript”、“JavaScript 1.2” 或 “VBScript”)。
src

：可选。表示包含要执行的代码的外部文件。
type

：可选。代替language，表示代码块中脚本语言的内容类型(也称MIME类型)。

使用<script>的方法：

直接在网页中嵌入JavaScript代码。

包含在<script>内的代码会被从上到下解释。在<script>元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示。
```
//嵌入行内JavaScript代码
<script>
	function sayHi() {
		console.log("Hi!");
	}
</script>
```
在使用行内JavaScript代码时，要注意代码中不能出现字符串</script>，否则会导致浏览器报错。
```
//使用转义字符" \"
<script>
	function sayHi() {
		console.log("<\/script>");
	}
</script>
```
在网页中包含外部JavaScript文件。

使用src属性。这个属性的值是一个URL，指向包含JavaScript代码的文件。比如：
```
<script src="example.js"></script>
```
与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。(阻塞时间也包含下载文件的时间。)

在XHTML文档中，可以忽略结束标签。

2.1.1 标签位置

过去，所有<script>元素都被放在页面的<head>标签内。如下例：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script src="example1.js"></script>
		<script src="example2.js"></script>
	</head>
	<body>
		<!--页面内容-->
	</body>
</html>

主要目的

：把外部所有的CSS和JavaScript文件都集中放到一起。

实际情况

：必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面(页面在浏览器解析到<body>的起始标签时开始渲染)

问题

：对于需要很多JavaScript的页面，这会导致

页面渲染的明显延迟

，在此期间浏览器窗口完全空白。

为解决这个问题，现代Web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面。如下例：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<!--页面内容-->
		<script src="example1.js"></script>
		<script src="example2.js"></script>
	</body>
</html>

这样页面会在处理JavaScript代码之前完全渲染页面。用户会感觉页面加载更快，因为浏览器显示空白页面的时间短了。

2.1.2 推迟执行脚本

HTML4.01为<script>元素定义了defer的属性。脚本会被延迟到整个页面都解析完毕之后再运行，相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script defer src="example1.js"></script>
		<script defer src="example2.js"></script>
	</head>
	<body>
		<!--页面内容-->
	</body>
</html>

这个例子中的<script>元素包含在页面的<head>中，但它们会在浏览器解析到结束的</html>标签后才会执行。

第一个推迟的脚本会在第二个推迟的脚本之前执行。

把要推迟执行的脚本放在页面底部比较好。

注意：对于XHTML文档，指定defer属性时应该写成defer="defer"。

2.1.3 异步执行脚本

HTML5为<script>元素定义了async属性。

从改变脚本处理方式上看，async属性与defer类似。
都适用于外部脚本，都会告诉浏览器立即开始下载。
与defer不同的是，标记为async的脚本并不能保证能按照它们出现的次序执行。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script async src="example1.js"></script>
		<script async src="example2.js"></script>
	</head>
	<body>
		<!--页面内容-->
	</body>
</html>

在这个例子中，

第二个脚本可能先于第一个脚本执行。

重点在于它们之间没有依赖关系，给脚本添加async属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。

注意：对于XHTML文档，指定async属性时应该写成async="async"。

2.1.4 动态加载脚本

//创建一个script元素并将其添加到DOM
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false; //同步加载
document.head.appendChild(script);

<!--让加载器知道动态请求文件的存在，在文档头部显式声明它们--> 
<link rel="preload" href="gibberish.js">

2.2 行内代码与外部文件

推荐使用外部文件的理由：

可维护性

。JavaScript代码如果分散到很多HTML页面，会导致维护困难。而用一个目录保存所有JavaScript文件，则更容易维护，这样开发者就可以独立于使用它们的HTML页面来编辑代码。
缓存

。浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，如果两个页面都用到同一个文件，则该文件只需下载一次。
适应未来

。包含外部JavaScript文件的语法在HTML和XHTML中是一样的。

2.3 文档模式

可以使用doctype切换文档模式。

2.4 <\noscript>元素

用于给不支持JavaScript的浏览器提供替代内容。

在下列两种情况下，浏览器将显示包含在<noscript>中的内容：

浏览器不支持脚本；
浏览器对脚本的支持被关闭。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script defer="defer" src="example1.js"></script>
		<script defer="defer" src="example2.js"></script>
	</head>
	<body>
		<noscript>
			<p>This page requires a JavaScript-enabled browser.</p>
		</noscript>
	</body>
</html>

这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本，则用户永远不会看到它。

原文链接：https://blog.csdn.net/qq_46364153/article/details/112900635