6张图让你了解浏览器渲染网页的过程优化步骤。这篇文章是我对端到端流程学习的一个高层次的总结。好吧，事不宜迟，让我们开始吧。这个过程可以分为以下几个主要阶段：开始解析HTML获取外部资源解析CSS并构建CSSOM执行JavaScript合并DOM和CSSOM构建渲染树计算布局和绘制1.开始解析HTML当浏览器收到页面的HTML时通过网络数据，它立即设置解析器将HTML转换为文档对象模型(DOM)。文档对象模型(DOM)是HTML和XML文档的编程接口。它提供了文档的结构化表示，并定义了一种从程序内部访问此结构以更改文档的结构、样式和内容的方法。DOM将文档解析为节点和对象（包含属性和方法的对象）的结构化集合。简而言之，它将网页与脚本或编程语言链接起来。解析过程的第一步是将HTML分解并表示为开始标签、结束标签及其内容标签，然后才能构建DOM。2.获取外部资源当解析器遇到外部资源，如CSS或JavaScript文件时，解析器将提取这些文件。解析器在加载CSS文件时继续运行，此时页面被阻止渲染，直到资源被加载和解析（稍后会详细介绍）。JavaScript文件略有不同——默认情况下，解析器会在加载JS文件然后解析它们时阻止解析HTML。可以将两个属性添加到脚本标签以缓解这种情况：延迟和异步。两者都允许解析器在后台加载JavaScript文件时继续运行，但它们的做法不同。稍后会详细介绍，但一般来说：延迟意味着文件的执行将被延迟，直到文档的解析完成。如果多个文件有defer属性，则按照页面放置的顺序依次执行。async表示文件一加载就执行，可能在解析过程中，也可能在解析过程之后，所以异步脚本执行不保证顺序.preload资源元素的rel属性的属性值preload允许你在你的HTML页面的元素内部写一些声明式的资源获取请求，可以指定页面加载后立即需要哪些资源。对于立即需要的资源，您可能希望在页面加载生命周期的早期开始获取它们，在浏览器的主要渲染机制介入之前预加载它们。这种机制可以让资源更早地加载和可用，并且不太可能阻塞页面的初始渲染，从而提高性能。3.解析CSS和构建CSSOM你可能很早就知道DOM，但你可能听说过**CSSOM（CSS对象模型）**不，反正我没听过几次。CSS对象模型（CSSOM）是所有CSS选择器和每个选择器的关联属性以树的形式映射，与树的根节点、兄弟节点、后代节点、子节点等关系。CSSOM与文档对象模型(DOM)非常相似。两者都是关键呈现路径的一部分，必须采取一系列步骤才能正确呈现网站。CSSOM与DOM一起构建渲染树，浏览器反过来使用它来布局和绘制网页。与HTML文件和DOM类似，当加载CSS文件时，它们必须被解析并转化为一棵树——这次是CSSOM。它描述了页面上的所有CSS选择器、它们的层次结构和属性。CSSOM与DOM的不同之处在于它不能增量构建，因为CSS规则由于特殊性可以在不同的点相互覆盖。这就是CSS阻塞渲染的原因，因为在解析完所有CSS并构建CSSOM之前，浏览器无法知道每个元素在屏幕上的位置。4.执行JavaScript不同的浏览器有不同的JS引擎来执行这个任务。从计算机资源的角度来看，解析JS可能是一个昂贵的过程，比其他类型的资源更昂贵，因此优化它以获得良好的性能非常重要。加载的JS和DOM已完全解析并准备好发出document.DOMContentLoaded事件。对于任何需要访问DOM的脚本，例如以某种方式进行操作或侦听用户交互事件，最好在执行脚本之前等待此事件。document.addEventListener('DOMContentLoaded',(event)=>{//DOM在这里可以安全访问});window.load事件将在所有其他内容（例如异步JavaScript、图像等）完成加载后触发。window.addEventListener('load',(event)=>{//页面加载完毕});5.合并DOM和CSSOM构建渲染树渲染树是DOM和CSSOM的组合，代表了页面内容上将要渲染的所有东西。这并不一定意味着渲染树中的所有节点都将被视觉渲染，例如opacity:0或visibility:hidden样式的节点将被包括在内，并且仍然被屏幕阅读器等读取，而display:noneNothing不包括在内。此外，诸如不包含任何视觉信息的标签将始终被忽略。和JS引擎一样，不同的浏览器有不同的渲染引擎。6.计算布局和绘图现在我们有了一个完整的渲染树，浏览器知道渲染什么，但不知道在哪里渲染。因此，必须计算页面的布局（即每个节点的位置和大小）。渲染引擎从顶部开始遍历渲染树并向下移动，计算每个节点应显示的坐标。完成后，最后一步是获取布局信息并将像素绘制到屏幕上。作者：JamesStarkie译者：FrontendXiaozhi来源：dev原文：https://dev.to/jstarmx/how-the-browser-renders-a-web-page-1ahcWorld”，可以通过以下二维码关注.转载本文请联系大千世界公众号。
