页面DOM加载时间：performance.timing包含接口调用后的DOM吗？

本文探讨了页面性能分析中`performance.timing`的`DOMContentLoaded`事件与异步加载DOM元素的关系。许多开发者误以为`DOMContentLoaded`事件包含所有DOM加载时间，但实际上，它只记录浏览器完成HTML解析和DOM树构建的时间点，即`Document.readyState`变为'interactive'的时刻。通过AJAX或其他异步方式加载的DOM元素，其加载时间并不计入`DOMContentLoaded`时间，而是独立计算。文章最后也建议开发者转向更现代化的性能分析工具。

Performance API 的 DOMContentLoaded 事件

开发者常常使用 window.performance.timing 对象来分析网页性能，其中一个关键指标是 DOM 加载时间。 然而，一个常见问题是：如果页面部分 DOM 内容是通过异步接口调用后动态加载的，这些动态加载的 DOM 元素是否包含在 performance.timing 中的 DOMContentLoaded 事件时间内？

答案是：否。

根据 MDN Web Docs 的说明，performance.timing 中的 DOMContentLoaded 事件标记的是浏览器完成 HTML 解析，DOM 树构建完成的时刻，Document.readyState 变为 'interactive' 的时间点。 任何在 DOMContentLoaded 事件之后通过 AJAX 或其他异步方式加载的 DOM 内容，都不会计入这个时间指标。 这些动态加载的内容会在 DOMContentLoaded 事件之后，以独立的加载时间进行渲染。

值得注意的是，performance.timing API 正在逐步被新的性能监控 API 所取代，建议开发者迁移到更现代化的性能分析工具和方法。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~