MDN上对DOMContentLoaded的解释是
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
也就是说DOMContentLoaded 在DOM树构建完成，就会触发，而不用等待其余任何资源的加载，包括样式。但是后面还有一句话
注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。
所以更准确的理解应该是，render树（DOM树、css树合成）构建完成，会触发DOMContentLoaded，动态style除外。所有资源加载完成，触发load。
img、js、defer、async 对DOMContentLoaded的影响
- img 资源不会影响DOMContentLoaded的触发
- script 资源会阻塞DOM构建，也会影响DOMContentLoaded触发
- 若加入defer属性，则不会阻塞DOM，且会按照写入顺序执行script资源，但依然会影响DOMContentLoaded触发
- 若加入async属性，则不会阻塞DOM，且不会按照写入顺序执行script资源，也不会影响DOMContentLoaded触发
总结
DOM树和CSS树会合成render树，最终render树渲染到页面中，DOMContentLoaded 就是在构建完成后触发的。js资源会阻塞这个构建过程，但加入defer或async就不会阻塞了，且defer资源加载完成后，触发DOMContentLoaded，然后才是async资源加载。
