wpf window 不执行show 就不能load执行_彻底搞懂Load与 DOMContentLoaded的区别

The loadevent is fired when the whole page has loaded, including all dependent resources such as stylesheets images.

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

进一步解释一下上面的英文：

第一段，load事件是在完成js 、css样式表和image等资源加载完成时被触发；提示：load是html里面的资源下载完，但不包括动态引入的js，只管 html 文件里面标签引入的资源；

第二段，DOMContentLoaded是在HTML文档的加载并解析完成时触发，而不用等待CSS样式表和 image的加载完成。

需要理解的几点

0)js 加载于欲操作的HTML元素之前，代码有可能出错，因为DOM结构还没有加载完成，若js中操作DOM会报错；

1) js 的下载是并行的，解析也是并行的，但执行时串行的；

2) js 会在下载完成后立即解析和执行，这时js会占用cpu资源，导致没有 cpu资源去渲染，从而阻塞渲染；

3)load资源加载完时，DOM未必绘制完；

4)js没加载完，但是html是可以解析完并且绘制出来的；

实例

Reload

Event log:

const log = document.querySelector('.event-log-contents');const reload = document.querySelector('#reload');window.addEventListener('load', (event) => { log.textContent = log.textContent + 'load';});document.addEventListener('readystatechange', (event) => { log.textContent = log.textContent + `readystate: ${document.readyState}`;});document.addEventListener('DOMContentLoaded', (event) => { log.textContent = log.textContent + `DOMContentLoaded`;});

输出结果

思考：

image.png

1)defer属性的脚本浏览器会立即下载，但延迟执行，延迟到浏览器遇到