第一章 什么是 JavaScript
-
JavaScript 的组成：ECMAScript、文档对象模型（DOM）、浏览器对象模型（BOM）
-
文档对象模型（DOM）：一个应用编程接口（API），提供与网页内容交互的方法与接口。DOM 将整个页面抽象为一组分层节点。HTML 或 XML 页面的每个组成部分都是一种节点，包含不同的数据。
<html lang="en"> <head> <title>Sample</title> </head> <body> <p>Hello World !</p> </body> </html>
DOM 通过创建表示文档的树，使开发者可以控制网页的内容和结构，使用 DOM API 可删除、添加、替换、修改节点。
-
浏览器对象模型（BOM）：提供与浏览器交互的方法与接口。
-
第二章 HTML中的 JavaScript
-
<script>元素：将 JavaScript 插入 HTML 的主要方法是使用<script>元素。<script async defer src=".js"></script>async属性：规定脚本相对于页面的其余部分异步执行（立即开始下载，但推迟执行），仅适用于外部脚本，标记为async的脚本不保证按照出现次序执行，故标记有异步脚本之间不能存在依赖关系且不应该在加载期间修改 DOM。defer属性：规定是否将脚本延迟到页面解析完成后（解析完</html>标签后）执行（立即开始下载，但推迟执行）。若脚本不会改变页面的内容，则使用该属性可加快处理文档的速度，第一个推迟的脚本会在第二个被推迟的脚本之前执行。src属性：规定外部脚本文件的 URL，浏览器解析资源时，会向src属性指定的路径发送一个 GET 请求，已取得相应资源。
总结：浏览器按照顺序解析 HTML 文档和加载脚本。若未添加
defer或async属性，则浏览器解析到脚本时会立即加载并执行指定的脚本，加载和执行脚本会阻塞 HTML 文档的解析，脚本解析完成后再继续渲染后续的页面。页面在浏览器解析到<body>起始标签时开始渲染，若将脚本置于<head>标签中，则会导致页面渲染明显延迟，脚本解析期间，浏览器窗口完全空白，故通常将 JavaScript 引用置于<body>元素中页面内容的后面。（※） -
动态加载脚本：
let script = document.createElement('script') script.src = '.js' document.head.appendChild(script)执行到该段代码之前不会发送请求。且以此方式创建的
<script>元素以异步方式加载，相当于添加async属性。以此方式获取的资源对浏览器预加载器不可见，可通过显式声明解决。<link rel="preload" href=".js"> -
行内代码与外部文件：最佳实践为将 JavaScript 代码置于外部文件中，推荐使用外部文件的理由如下：
- 可维护性：若代码 JavaScript 代码分散在多个 HTML 文档中，会导致维护困难，而用一个目录保存所有 JavaScript 代码则更容易维护，可使开发者独立于 HTML 文档编辑代码。
- 缓存：浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，若多个页面包含同一个脚本，则该脚本仅需下载一次，从而使页面加载更快。
-
文档模式：IE 5.5发明文档模式的概念，即可使用
doctype切换文档模式，包括混杂模式和标准模式，前者使 IE 支持非标准特性，后者使 IE 具有兼容标准的行为，主要区别在于通过 CSS 渲染的页面方面以及对 JavaScript 的一些关联影响。后续出现准标准模式，该模式下浏览器支持很多标准的特性，但没有标准规定的严格，主要区别在于处理图片元素周围的空白方面。 -
<noscript>元素：用于给不支持 JavaScript 的浏览器提供替代内容，<noscript>元素可以包含任何可以出现在<body>中的 HTML 元素（<script>除外），若浏览器不支持脚本或浏览器对脚本的支持被关闭，则显示包含在<noscript>中的内容。
