资源加载标签和页面加载

一、link标签和script标签

HTML外部资源链接元素。引用资源，一般引用样式表和图标。

常见属性：

嵌入或引用可执行脚本。

常见属性及作用：

src：指定该属性的script标签内不应该有脚本。
crossorigin：同上。
type：text/javascript，application/javascript；当指定为 module 时，就会被认为加载了JS模块。
async：该脚本会被并行请求，下载完成后暂停 HTML 解析并立即解析执行，多个 async 的脚本是无序执行的。
defer：该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。如果缺少src 属性（即内嵌脚本），该属性不起作用。“在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在 DOMContentLoaded 事件触发前执行，因此最好只包含一个延迟脚本”–《JS高程》

定义：document.readyState属性描述了document的加载状态。
取值：
- loading：正在加载。
- interactive：文档加载完毕并且被解析，但是像图片等子资源仍在加载。
- complete：文档和子资源已经加载完毕，表明将要触发load事件。

定义：一个document上的事件，当完整的 DOM 树形成后就触发，而无需等待样式表、图像等完成加载。load 事件应该用于检测一个完全加载的页面。
注意：DOMContentLoaded 事件必须等待其所属script之前link里的样式表加载解析完成才会触发，这是因为 JS 可以查询对象的样式，但是如果将link置于script之后，就不受影响。

定义：当整个页面及所有依赖资源如样式表和图片都已完成加载就触发 load 事件。

（loading）

readystate: interactive
DOMContentLoaded
readystate: complete
load

注：interactive 和 DOMContentLoaded 的触发时间大致接近，但本质还是不同的。

据《JS高程》第13章的描述，这些事件的触发顺序会因为页面的不同而不尽相同，但是大致的顺序就是 MDN 上描述的。