DOMContentLoaded
-
DOMContentLoaded事件发生在document对象上。document.addEventListener("DOMContentLoaded", callback); -
当
DOM加载和解析完成之后，立即触发DOMContentLoaded事件，因为CSS会阻塞页面渲染（不会阻塞DOM解析），如果render tree未解析完成，此时页面不一定渲染出画面。 -
JS 的执行会阻塞
DOM解析。
Load
当整个页面所有资源（CSS、JS ）加载和解析完成之时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。标志：浏览器 tag 旋转加载图标消失。
window.addEventListener("load", callback);
Async and Defer
defer和async都是异步加载脚本。页面读取到script标签时就会异步下载脚本。
Async
- 页面读取到脚本的时候开启异步加载线程，下载过程不阻塞DOM解析；
- 一旦脚本下载完成，如果
DOM解析还为完成(DOMContentLoaded事件未触发)，立即阻塞DOM解析，执行脚本； - 多个
async脚本不保证执行顺序。
Defer
- 页面读取到脚本的时候开启异步加载线程，下载过程不阻塞
DOM解析； DOM解析完成，DOMcontentLoaded事件还未触发时，执行defer脚本，即便脚本提前下载完成；- 多个
defer脚本会按照它们在页面出现的顺序下载和执行。
