HTML | DOM 加载事件

HTML文档的加载过程是一个渐进式的过程，浏览器在加载文档时会经历以下几个步骤：

1. 解析HTML文档：下载HTML文件后，浏览器会按照规则解析HTML文档的内容，并构建出DOM树。
2. 加载CSS文件：在解析HTML文档的过程中，如果在HTML文件中存在link标签或style标签，那么浏览器就会去下载对应的CSS文件，解析CSS并创建CSSOM树。
3. 加载JavaScript文件：在解析HTML文档及CSS样式后，浏览器会继续加载JavaScript的文件，执行JavaScript代码。

在这个过程中，浏览器提供了一些事件来让开发者进行针对性的操作，如：

1. DOMContentLoaded事件：当HTML文档解析完成并且DOM树构建完成后会触发该事件。在该事件触发后，HTML文档中的所有元素都已经可以访问和操作了。该事件通常用于DOM操作，如添加事件监听器、修改元素样式等。

document.addEventListener('DOMContentLoaded', function() {
  // HTML文档解析完成后执行的代码
});

2. load事件：当HTML文档中的所有资源都加载完成后，会触发该事件。通常用于执行需要等待所有资源加载完成后才能执行的代码，如修改图片路径、执行异步请求等。

window.addEventListener('load', function() {
  // 所有资源加载完成后执行的代码
});

3. beforeunload事件：当用户关闭或离开当前页面时，会触发该事件。通常用于询问用户是否保存未保存的数据或进行其他操作。

window.addEventListener('beforeunload', function(event) {
  // 在页面关闭前执行的代码
  event.returnValue = '确定离开页面吗？';
});

在使用事件时，我们需要注意以下几点：

1. 事件的注册必须在对应事件发生前进行。
2. 不同的浏览器对事件的触发时间可能会有区别，需要进行兼容性处理。
3. 事件可能会被触发多次，需要进行事件去重处理。

HTML | DOM 加载事件为我们提供了更加灵活的开发方式，使我们可以在恰当的时机进行特定的操作，提升用户体验和页面性能。