When does the domcontentloaded event fire?

Question

https://developers.google.com...

It is said that domContentLoaded generally indicates the time point when both DOM and CSSOM are ready

Page 390 of the js height book says not to wait for the css file to be downloaded.

Then the question is whether to wait until CSSOM is ready

Answer 1

DOMContentLoaded can only be bound to window/document. (The DOM tree is not built, and there are window/document objects, so binding to them makes sense (it depends on when the DOM tree is built); but binding to ordinary elements is meaningless. You must first select the element. Since you can Select, it must be built, as follows:)

// 下述代码将不执行即无反应。
document.querySelector('#top').addEventListener("DOMContentLoaded", function () {
            console.log('top finished');
}, false);

The difference between DOMContentLoaded and load

The steps for loading DOM documents are:

解析HTML结构。

加载外部脚本和样式表文件。

解析并执行脚本代码。

DOM树构建完成。//DOMContentLoaded

加载图片等外部文件。

页面加载完毕。//load