# DOMContentLoaded、readystatechange、load、ready **DOMContentLoaded** 时，浏览器已经加载好HTML，DOM树也绘制完成，但是其他外部资源如图片，样式等还未加载好。在此时，可以为元素绑定事件，初始化接口等。 **Loaded**时，所有外部资源都加载完毕，可以正确读取资源数据。 **readystatechange**用于表现document的loading状态，有三个可能取值： 1. loading 文档依然在被加载。 2. interactive 文档加载结束，并且被解析，但是例如图片等文件依然在加载中。 3. complete 文档与子资源加载结束，即将触发load事件。 ## 具体加载流程 1. 首先，发出加载资源请求，在加载完成之前不触发任何事件。 2. document加载完毕，css等加载并未完成，此时readyState为'interactive'，表明document已经load并解析完成，触发 readystatechange，然后触发DOMContentLoaded。捎带提一句，此时，加载完成且带有defer标记的脚本，会按顺序开始执行。 3. css、img等子资源加载完成之后，此时触发window.load事件 4. 点击关闭标签或者刷新时，会依次触发beforeunload、unload事件。 ## defer/async | | async | defer| | --- | --- | --- | | 执行顺序 | 谁先完成下载谁先执行 | 始终按照加载顺序，即使先下载完成 | | DOMContentLoaded | 如果页面加载时间较长，脚本可能会先执行；绝大多数会在DOMContentLoaded之后执行,但一定是在Load事件之前执行 | 脚本会在DOMContentLoaded之前执行，但不阻塞浏览器加载和解析文档，即defer脚本与浏览器加载顺序无关先后 | ## 表单自动填充 浏览器内置的表单自动填充在DOMContentLoaded触发的时候完成。