script 元素和 noscript 元素

script 元素

<script src="index.js" type="text/javascript" charset="utf-8" 
        crossorigin="anonymous" defer async></script>

// src：脚本目标地址，即表示包含要执行代码的外部文件
// type：可选，表示编写代码使用的脚本的内容类型（ 也称为 MIME 类型 ）；默认为 text/javascript，可以不写
// charset：可选，表示通过 src 属性指定的代码的字符集；大多数浏览器会忽略它的值，所以很少有人用它
// crossorigin：跨域脚本处理（ 了解 ）
// async、defer：脚本执行方式（ 并行加载脚本 ），二者同时添加，同 async。具体见下面的 “JavaScript 加载”：

「 JavaScript 加载 」正常情况下，浏览器在解析 HTML 源文件时，若遇到外部的 script，那么解析过程会暂停，并发送请求来下载 script 文件，只有 script 完全下载并执行后才会继续执行 DOM 解析。

  • defer（ 延迟脚本 ）
    • 同时下载，执行：先 HTML 后 JS
    • 只对外部脚本文件有效
    • 即，脚本加载和 HTML 加载并行，但，脚本会被延迟到整个页面都解析完毕后再运行

=> 可以让脚本在文档完全呈现之后再执行；延迟脚本总是按照指定它们的顺序执行

  • async（ 异步脚本 ）
    • 标记为 async 的脚本并不保证按照指定它们的先后顺序执行
    • 只对外部脚本文件有效
    • 其目的是不让页面等待两个脚本下载和执行，脚本下载完毕后立即执行

=> 当前脚本不必等待其他脚本，也不必堵塞文档呈现；但不能保证按照它们在页面中出现的顺序执行

noscript 元素（ 考虑禁用 JavaScript 的场景 ）

使用 noscript 元素，可以指定在不支持脚本的浏览器中显示的替代内容；

但在启用了脚本的情况下，浏览器不会显示 noscript 元素中的任何内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Example</title>
		<script type="text/javascript" src="./js/demo1.js" defer></script>
		<script type="text/javascript" src="./js/demo2.js" defer></script>
	</head>
	<body>
		<noscript>
			<p>本页面需要浏览器支持（启用）JavaScript。</p>
		</noscript>
	</body>
</html>

简单来讲，这个元素可以包含能够出现在文档 <body> 中的任何 HTML 元素 — <script> 元素除外，包含在 <noscript> 元素中的内容只有在下列情况（ 即，不支持 JavaScript 的场景 ）下才会显示出来：

  • 浏览器不支持脚本；
  • 浏览器脚本，但脚本被禁用。