长话简说JavaScript（2） HTML如何使用JavaScript
HTML如何使用JavaScript
在HTML添加 script元素或者创建文件为.js格式
列举几个属性：
async:异步操作 如果在方法上添加，这个方法就会后台执行，不会影响你的操作
charset：使用 src 属性指定的代码字符集，标准用utf-8
crossorigin:。配置相关请求的CORS（跨源资源共享）设置,默认是不开启crossorigin=“use-credentials"设置凭据标志，意味着出站请求会包含凭据。
defer：表示脚本可以延迟到文档完全被解析和显示之后再执行,只对外部脚本文件有效
integrity:允许比对接收到的资源和指定的加密签名以验证子资源完整性,简单理解，如果收到资源的标签与这个属性指定的标签不一致，页面会报错，中断执行，防止恶意内容弹出
src：表示要执行外部文件的地址
type：代表脚本语言的内容类型，在window上游览器的页面是type=“text/javascript”，在非 IE 的浏览器中有效的其他值还有"application/javascript"和"application/ecmascript”。如果这个值是 module，则代码会被当成 ES6 模块，而且只有这时候代码中才能出现 import 和 export 关键字。
如果页面上有JavaScript 代码，JavaScript 代码会从上到下解释，被解析成一个函数定义保存到解释器进行计算，计算完成后页面才会加载，注意代码上不要存在 script元素
<script>
function sayScript() {
console.log("</script>");
}
</script>
这样会报错需要要转义字符“”
<script>
function sayScript() {
console.log("</script>");
}
</script>
如果引入多个.js文件，也会按照顺序一个一个解析计算
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script src="example1.js"></script>
<script src="example2.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
标签位置的意义
如果script元素放在页面的head标签的话，页面运行的话先解释计算后再开始渲染页面，会导致页面加载延迟
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script src="example3.js"></script>
<script src="example4.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
解决办法：
- List item把script元素放在body标签内和页面同时加载 一起渲染
- 使用defer 属性， 脚本会被延迟到整个页面都解析完毕后再运行script元素，缺点是不一定按照顺序执行脚本，最好一个脚本
- 使用async 属性，这样它们之间没有依赖关系。给脚本添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。
动态加载脚本
通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
这种方式创建的script元素是以异步方式加载的，相当于添加了 async 属性
需要同步加载，可以改成
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
这样方式浏览器预加载器是不可见的，严重影响它们在资源获取队列中的优先级。
可以在文档头部显式声明它们：
<link rel="preload" href="gibberish.js">
行内代码与外部文件的选择
使用外部文件的理由：
- 可维护性。一个JavaScript 代码可以多个HTML 页面使用
- 缓存。 浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件
- 适应未来。可以更好适应不同的页面
文档模式
使用 doctype 切换文档模式。文档模式有两种
混杂模式
以省略文档开头的 doctype 声明作为开关。
标准模式
这种模式下的浏览器支持很多标准的特性，但是没有标准规定得那么严格。主要区别在于如何对待图片元素周围的空白（在表格中使用图片时最明显）。推荐使用