Open louzhedong opened 4 years ago
DOMContentLoaded 当一个 HTML 文档被加载和解析完成后，DOMContentLoaded 事件便会被触发。
DOMContentLoaded
当一个 HTML 文档被加载和解析完成后，DOMContentLoaded 事件便会被触发。
浏览器向服务器请求到了HTML文档后便开始解析，生成DOM(文档对象模型)，此时HTML就被加载和解析完成了。如果有CSS会根据CSS生成CSSOM（CSS对象模型），然后再由DOM和CSSOM合成并产生渲染树。有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。有了以上这些信息，下面就把节点绘制到浏览器上。如下图：
当页面中有JavaScript时，情况又会不一样
JavaScript可以阻塞DOM的生成，当浏览器再解析HTML时，如果遇到\ Githubissues.
浏览器渲染原理
浏览器向服务器请求到了HTML文档后便开始解析，生成DOM(文档对象模型)，此时HTML就被加载和解析完成了。如果有CSS会根据CSS生成CSSOM（CSS对象模型），然后再由DOM和CSSOM合成并产生渲染树。有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。有了以上这些信息，下面就把节点绘制到浏览器上。如下图：
当页面中有JavaScript时，情况又会不一样
同步脚本
JavaScript可以阻塞DOM的生成，当浏览器再解析HTML时，如果遇到\ Githubissues.