6张图让你搞懂浏览器渲染网页过程( 二 ) _浏览器

文章插图

4.执行JavaScript不同的浏览器有不同的 JS 引擎来执行此任务。从计算机资源的角度来看，解析 JS 可能是一个昂贵的过程，比其他类型的资源更昂贵，因此优化它对于获得良好的性能是如此重要。
载入事件加载的JS和DOM被完全解析并准备就绪后就会 emit document.DOMContentLoaded事件。对于需要访问DOM的任何脚本，例如以某种方式进行操作或侦听用户交互事件，优良作法是在执行脚本之前先等待此事件。
document.addEventListener('DOMContentLoaded', (event) => { // 这里面可以安全地访问DOM了});在所有其他内容（例如异步JavaScript ，图像等）完成加载后，将触发window.load事件。
window.addEventListener('load', (event) => { // 页面现已完全加载});

文章插图

5.合并DOM和CSSOM 构建渲染树渲染树是DOM和CSSOM的组合，表示将要渲染到页面上的所有内容。这并不一定意味着渲染树中的所有节点都将在视觉上呈现，例如，将包含opacity: 0或visibility: hidden的样式的节点，并仍然可以被屏幕阅读器等读取，而display: none不包括任何内容。此外，诸如<head>之类的不包含任何视觉信息的标签将始终被忽略。
与 JS 引擎一样，不同的浏览器具有不同的渲染引擎。