概念和定义和子帧完成加载。意味着当初始HTML文档完全加载和解析时，将触发DOMContentLoaded事件，而无需等待样式表、图像和子框架完成加载。onload(OL)https://developers.google.com...当页面及其依赖资源完成加载时触发加载事件。意思是当页面的html、css、js、image等资源加载完成后，才会触发load事件。但是，为了充分理解上述定义，需要澄清一些概念。加载/下载是指浏览器将网页内容下载到本地的过程。解析浏览器向服务器请求HTML文档后，开始解析，得到的产物是DOM（DocumentObjectModel）。如果有CSS，就会根据CSS生成CSSOM（CSSObjectModel）。然后将DOM和CSSOM合并生成渲染树。有了渲染树，知道了所有节点的样式，下面就是根据这些节点和样式计算出它们在浏览器中的确切大小和位置。这是布局阶段。有了以上信息，绘制节点到浏览器。解析过程中，遇到是否已经下载，如果是则执行代码.当遇到标签时，不会阻塞后续内容的解析（比如DOM构建），检查资源是否已经下载，如果已经下载则构建CSSOM。当遇到DOM标记时，将执行DOM构建，将该DOM元素添加到文档树中。需要注意的是，在
中的第一个标签前面的DOM树和CSSOM合并成一个Render树，并呈现到页面。这是从白屏到页面第一次渲染的时间节点，比较关键。HTML文档的加载和页面的第一次渲染浏览器首先下载地址对应的html页面。浏览器解析HTML页面的DOM结构。启动下载线程，按照优先顺序下载文档中的所有资源。主线程继续解析文档，到达节点。中的外部资源无非就是外链css和外链js。解析到如果只包含DOM元素，情况就比较简单了。DOM树构建完成后，第一次渲染页面。如果中包含DOM元素，当外链js解析为外链js时，js还没有下载到本地，那么会渲染js之前的DOM到页面，js会阻止后续DOM的构建，即后续DOM节点不会添加到文档的DOM树中。所以在js执行之前，我们在页面上是看不到js后面的DOM元素的。如果包含DOM元素，externalchaincssexternalchaincss不会影响css后面的DOM构建，但会阻碍渲染。简单来说就是在加载外链css之前页面还是一片空白。如果包含DOM元素、外部链接js、外部链接externaljs和外部链接css的顺序影响页面渲染，这一点尤其重要。当中js之前的外部链接css没有加载时，页面不会被渲染。中js之前的外部链接css加载完成后，将js之前的DOM树和css合并渲染树，页面渲染js之前的DOM结构。解析文档后，重新呈现页面。当页面引用的所有js同步代码都执行完毕，就会触发DOMContentLoaded事件。HTML文档中的图片资源和js代码中异步加载的css、js、图片资源加载完成后，触发load事件。异步脚本中async和defer的区别带有async和defer的脚本下载与HTML的解析是并行的，但是脚本的执行和UI线程必须是互斥的，如下图，async在下载完成后执行会阻止HTML解析。请注意，在HTML解析和脚本执行完成之前，不会触发DOMContentLoaded。参考：https://juejin.im/post/5b2a50...https://zhuanlan.zhihu.com/p/...https://www.growingwiththeweb...