DOMContentLoaded 是个啥？在优化首屏的同学进来可能有灵感

就几个点

DOMContentLoaded 事件，我们需要了解下面几个点即可：

1. 此事件触发时，DOM 已经加载并且解析完成，此时可以使用 JS 语法操作 DOM 树了；

2. 此事件触发时，延迟脚本（<script> 元素的 defer 属性值设置为 true 或者 type 属性值设置为 module 的外联 JS 脚本）已经加载和执行完成；

3. 不会等待图片、iframe 和异步外联脚本（<script> 元素的 async 属性值设置为 true 的外联 JS 脚本）加载和执行结束；

应用场景

1. 页面性能监控：通过监听 DOMContentLoaded 事件，可以计算页面从开始加载到 DOM 加载完成所花费的时间，从而评估页面的加载性能，并进行相应的优化;

2. 图片懒加载：当网页中有大量图片需要加载时，可以将一部分图片的 src 属性设置为空，只保留 data-src 属性，并在 DOMContentLoaded 事件触发后，通过 JavaScript 将 data-src 的值赋给 src 属性，实现图片的懒加载效果;

3. 异步脚本加载：如果网页中有一些关键的 JavaScript 脚本需要优先加载并执行，而其他非关键脚本可以延迟加载，可以将这些非关键脚本的加载逻辑放在 DOMContentLoaded 事件处理程序中;

4. 响应式布局：在移动设备上，可能需要根据屏幕尺寸和方向动态调整页面布局。可以在 DOMContentLoaded 事件触发后，根据当前设备的属性（如窗口大小、屏幕方向等）来设置相应的样式或布局;

5. 异步请求和数据加载：如果网页需要通过异步请求加载数据或资源，可以将这些异步请求的代码放在 DOMContentLoaded 事件处理程序中。这样可以确保在页面的 DOM 结构加载完成后再开始发送异步请求，避免出现执行顺序上的问题。

   以上场景，在首屏性能要求高的网页可考虑应用。