HTML 中的 JavaScript

剑Black

已于 2022-09-23 10:33:37 修改

阅读量1.2k

点赞数

文章标签：前端 javascript

于 2022-09-23 10:10:01 首次发布

本文链接：https://blog.csdn.net/weixin_47076538/article/details/127003491

版权

概述

JavaScript 是通过 <script> 元素插入到 HTML 页面中的。这个元素用于把 JavaScript 代码嵌入到 HTML 页面中，跟其他标记混合在一起，也可用于引入保存在外部文件中的 JavaScript。

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

<script> 元素

将 JavaScript 插入 HTML 的主要方法是使用 <script> 元素。该元素由网景公司创造，并最早在 Netscape Navigator 2 中实现。后来，该元素被正式加入到 HTML 规范。

主要属性

async：可选。

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

charset：可选。

使用 src 属性指定的代码字符集。很少使用，大多数浏览器不在乎它的值。

crossorigin：可选。

配置相关请求的 CORS（跨源资源共享）设置。默认不使用 CORS。crossorigin= “anonymous” 配置文件请求不必设置凭据标志。crossorigin=“use-credentials” 设置凭据标志，意味着出站请求会包含凭据。

defer：可选。

表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。在 IE7 及更早的版本中，对行内脚本也有效。

integrity：可选。

允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。如果接收到的资源签名与该属性指定的签名不匹配，则页面会报错，脚本不会执行。可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。

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

代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。按照惯例，这个值始终是 “text/javascript”，尽管 “text/javascript” 和 “text/ecmascript” 都已经废弃了。JavaScript 文件的 MIME 类型通常是 “application/x-javascript”，不过给 type 属性这个值有可能导致脚本被忽略。在非 IE 的浏览器中有效的其他值还有 "application/javascript "和 “application/ecmascript”。如果这个值是 module，则代码会被当成 ES6 模块，而且只有这时候代码中才能出现 import 和 export 关键字。

使用方式

（1）内部 JavaScript

直接把代码放在 <script> 元素中。

<script> 
	function sayHi() { 
		console.log("Hi!"); 
	} 
</script>

包含在 <script> 内的代码会被从上到下解释，在 <script> 元素中的代码执行完成之前，页面的其余内容不会被加载。

（2）外部 JavaScript

要包含外部文件中的 JavaScript，必须使用 src 属性。src 属性的值是一个 URL，指向包含 JavaScript 代码的文件。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件。

<script src="example.js"></script>

使用 src 属性后标签内不应该再包含其他 JavaScript 代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，忽略行内代码。在解释外部 JavaScript 文件时，页面也会阻塞。（阻塞时间包含下载文件的时间。）

按照惯例，外部 JavaScript 文件的扩展名是.js。这不是必需的，因为浏览器不会检查所包含 JavaScript 文件的扩展名。

这就为使用服务器端脚本语言动态生成 JavaScript 代码，或者在浏览器中将 JavaScript 扩展语言（如 TypeScript，或 React的 JSX）转译为 JavaScript 提供了可能性。

不过要注意，如果不打算使用 .js 扩展名，一定要确保服务器能返回正确的 MIME 类型。

<script> 元素的一个最为强大、同时也备受争议的特性是，它可以包含来自外部域的 JavaScript 文件。

src 属性指向的资源可以跟包含它的 HTML 页面不在同一个域中。

<script src="http://www.somewhere.com/afile.js"></script>

浏览器在解析资源时，会向 src 属性指定的路径发送一个 GET 请求，以取得相应资源，假定是一个 JavaScript 文件。这个初始的请求不受浏览器同源策略限制，但返回并被执行的 JavaScript 则受限制。当然，这个请求仍然受父页面 HTTP/HTTPS 协议的限制。

来自外部域的代码会被当成加载它的页面的一部分来加载和解释，因此可以通过不同的域分发 JavaScript。不过，在包含外部域的 JavaScript 文件时，要确保该域是自己所有的，或者该域是一个可信的来源。 integrity 属性是防范这种问题的一个武器，但这个属性不是所有浏览器都支持。

不管包含的是什么代码，浏览器都会按照 <script> 在页面中出现的顺序依次解释它们，前提是没有使用 defer 和 async 属性。第二个 <script> 元素的代码必须在第一个 <script> 元素的代码解释完毕才能开始解释，第三个则必须等第二个解释完，以此类推。

标签位置

过去，所有 <script> 元素都被放在页面的 <head> 标签内，这意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始染页面，这会导致页面渲染的明显延迟。

现代 Web 应用程序通常将所有 JavaScript 引用放在 <body> 元素中的页面内容后面。

推迟执行脚本

HTML 4.01 为 <script> 元素定义了一个叫 defer 的属性。这个属性表示脚本在执行的时候不会改变页面的结构。脚本会被延迟到整个页面都解析完毕后再运行。因此，在 <script>元素上设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。

<script src="demo_defer.js" defer></script>

HTML5 规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且会在 DOMContentLoaded 事件之前执行。

不过在实际中，推迟执行的脚本不一定总会按顺序执行或者在 DOMContentLoaded 事件之前执行，因此最好只包含一个这样的脚本。

异步执行脚本

HTML5 为 <script>元素定义了 async 属性。async 属性与 defer 类似，不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行。

<script async src="example1.js"></script> 
<script async src="example2.js"></script>

这个例子中，第二个脚本可能先于第一个脚本执行。因此，它们之间不能有依赖关系。给脚本添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改 DOM。

异步脚本保证会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 之前或之后。

动态加载脚本

JavaScript 可以使用 DOM API，通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。

默认情况下，以这种方式创建的 <script> 元素是以异步方式加载的，相当于添加了 async 属性，但不是所有浏览器都支持 async 属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载。

let script = document.createElement('script'); 

script.src = 'gibberish.js'; 

script.async = false; 

document.head.appendChild(script);

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

<link rel="preload" href="gibberish.js">

文档模式

IE5.5 发明了文档模式的概念，即可以使用 doctype 切换文档模式。最初的文档模式有两种：混杂模式（quirks mode）和标准模式（standards mode）。虽然这两种模式的主要区别只体现在通过 CSS 渲染的内容方面，但对 JavaScript 也有一些关联影响。

随着浏览器的普遍实现，又出现了第三种文档模式：准标准模式（almost standards mode）。这种模式下的浏览器支持很多标准的特性，但是没有标准规定得那么严格。

标准模式通过下列几种文档类型声明开启。

<!-- HTML 4.01 Strict --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<!-- XHTML 1.0 Strict --> 
<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- HTML5 --> 
<!DOCTYPE html>

准标准模式通过过渡性文档类型（Transitional）和框架集文档类型（Frameset）来触发。

<!-- HTML 4.01 Transitional --> 
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<!-- HTML 4.01 Frameset --> 
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 
<!-- XHTML 1.0 Transitional --> 
<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!-- XHTML 1.0 Frameset --> 
<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<noscript> 元素

针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案。最终，<noscript> 元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容。虽然如今的浏览器已经 100% 支持 JavaScript，但对于禁用 JavaScript 的浏览器来说，这个元素仍然有它的用处。

在下面两种情况下，浏览器将显示包含在 <noscript> 中的内容：
 浏览器不支持脚本；
 浏览器对脚本的支持被关闭。

<!DOCTYPE html> 
<html> 
	<head> 
		<title>Example HTML Page</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>