DOMContentLoaded
JS的加载、执行是两个阶段(defer、async可以看出)
DOMContentLoaded事件只关注HTML是否被解析完,而不管async脚本
HTML文档被解析时,如果遇见defer脚本,则在后台加载脚本,文档解析过程不中断,而等文档解析结束后,defer脚本执行(defer脚本的执行顺序于定义时的位置有关)。DOMContentLoaded在defer脚本执行结束后才会被触发。
HTML文档被解析时,如果遇见async脚本,则在后台加载脚本,文档解析过程不中断,脚本加载完成后,文档停止解析,执行结束后文档继续解析。DOMContentLoaded事件只关注HTML是否被解析完,不需要等待async脚本执行、样式表加载等(DOMContentLoaded本身不会的等待CSS文件、图片。iframe文件完成)。
(蓝色线代表网络读取,红色线代表执行时间,这两个都是针对脚本的;绿色线代表 HTML 解析)
defer和async在网络读取(脚本加载)都为异步(相对于HTML解析),主要区别是,脚本下载完后何时执行。