1. JavaScript的实现 完整的 JavaScript 实现包含以下几个部分： 核心（ECMAScript） 文档对象模型（DOM） 浏览器对象模型（BOM）
1.1 ECMAScript
是由 ECMA-262 定义的，ECMAScript 与 Web 浏览器没有依赖关系，Web浏览器只是 ECMAScript 实现可能的宿主环境之一。其他宿主环境还有服务器端 JavaScript 平台Node.js和即将被淘汰的 Adobe Flash
在基本层面，它描述这门语言的，语法、类型、语句、关键字、保留字、操作符、全局对象
ECMAScript 只是对实现这个规范描述的所有方面的一门语言的称呼。
JavaScript 实现了 ECMAScript
1.2 DOM
DOM 是针对 XML 但经过扩展用于 HTML 的应用程序编程接口（API）。DOM把整个页面印射为一个多层节点结构，HTML 或 XHL 页面中的每个组成部分都是某种类型的节点，每个节点都包含着不同类型的数据。
DOM 通过创建表示文档的树，让开发者随心所欲的控制网页的内容和结构。借助 DOM 提供的 API，开发人员可以轻松自如的完成对节点的 CRUD 操作
1.2.1 DOM 的级别
DOM Level 1级：
由两个模块组成：DOM Core 和DOM HTML。主要目标是映射文档的结构。
DOM Level 2级：
新模块
DOM视图：定义了跟踪不同文档类型视图的接口
DOM事件：定义了事件和事件处理的接口
DOM样式：定义了基于 CSS 为元素应用样式的接口
DOM遍历：定义了遍历和操作文档树的接口
DOM Level 3级：
引入了以统一方式加载和保存文档的方法，以及验证文档的方法
1.2.2 其他 DOM
SVG（可伸缩矢量图形语言，可伸缩矢量图）
MathML（数学Markuo语言，数学标记语言）
SMIL（Synchronized Multimedia Intergration Language，同步多媒体集成语言）
1.3 BOM
浏览器对象模型，支持访问和操作浏览器的窗口。使用 BOM，开发者可以操控浏览器显示页面之外的部分
2. 小结
JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。
ECMAScript：由 ECMA-262 定义并提供核心功能
文档对象模型（DOM）：提供与网页内容交互的方法和接口
浏览器对象模型（BOM）：提供与浏览器交互的方法和接口
第二章：HTML中的JavaScript
1. <script> 元素
在 HTML 页面中插入 JavaScript 的主要方法有两种：
在 HTML 中使用 <script> 元素，内部直接嵌入JavaScript 代码
外部引用 JavaScript 脚本
在最新的规范中，<script>元素有以下6个属性
属性 描述
async 设置或返回是否异步执行脚本（一旦脚本可用）。
charset 设置或返回脚本的 charset 属性的值。
defer 设置或返回是否在页面完成解析时执行脚本。
src 设置或返回脚本的 src 属性的值。
text 设置或返回脚本的所有子文本节点的内容。
type 设置或返回脚本的 type 属性的值。
内部嵌入 JavaScript 代码
<script type = "text/javascript"> function () { alert("Hello world!") } </script>
外部引用 JavaScript 脚本
<script src="example.js"></script>
注意：带有src属性的 如下列代码，<script> 标签内的代码会被忽略，只会执行脚本文件
<script src="example.js"> function () { alert("Hello world!") } </script>
1.1 标签位置
传统的做法是将所有的 <script> 标签放在页面的 <head> 标签内，这样会导致页面渲染的明显延迟，在此期间浏览器窗口空白。
为了避免这个问题，把 JavaScript 引用放在 <body> 元素中的页面内容后面。当页面内容完全呈现在浏览器中，再解析 JavaScript 代码，这样浏览器显示空白页面的时间短了
1.2 推迟执行脚本
采用 defer 属性，这个属性表示脚本在执行的时候不会改变页面的结构。
也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在 <script> 元素上设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。
<script defer src="example1.js"></script>
只适用外部脚本 当多个脚本添加 defer 属性时，按顺序执行 1.3 异步执行脚本 采用 async 属性，这个属性告诉浏览器不需要等脚本下载和执行完后再加载页面。
<script async src="example2.js"></script>
建议异步脚本不要在加载期间修改DOM 1.4 动态加载脚本 采用 DOM API 来操作，将 script 元素添加到 DOM 中
let script = document.createElement('script'); script.src = 'gibberish.js'; document.head.appendChild(script);
用这种方式获取外部资源，对预加载器是不可见的，这会严重影响资源获取队列的优先级。因此想要让预处理器知道这些文件的存在，可以在<head>标签内显式声明它们
<link rel="preload" href="gibberish.js">
2. 外部代码优点
可维护性：把所有 JavaScript 文件都放在一个文件夹中，更容易维护。
可缓存：两个页面同时使用相同的 JavaScript 文件，这个文件只需要下载一次，浏览器加载页面更快。
适应未来
3. <noscript> 标签
在不支持 JavaScript 的浏览器中显示替代的内容。
4. 小结
插入 JavaScript 到 HTML 页面中使用 <script> 标签，插入在页面内容之后
包含外部 JavaScript 文件时，必须将 src 属性设置为指向相应文件的 url
在不使用属性为 defer 和 async 的情况下，所有 <script> 标签都会按照先后顺序依次解析 JavaScript 文件
<noscript> 标签会在浏览器不支持 JavaScript 下执行，否则不执行
