6张图让你看懂浏览器渲染网页的过程大厂没有背景，只有积极向上的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...我的想法：如果我想建立一个快速可靠的网站，我需要真正了解浏览器呈现网页的每个步骤的机制，以便我可以控制开发过程中的每一步。优化步骤。这篇文章是我对端到端流程学习的一个高层次的总结。好吧，事不宜迟，让我们开始吧。这个过程可以分为以下几个主要阶段：开始解析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表示文件一加载就执行，可能在解析过程中，也可能在解析过程之后，所以不保证异步脚本执行顺序。预加载资源元素的rel属性的属性值预加载允许您在HTML中的元素内编写一些声明表达式page资源获取请求可以在页面加载后立即指示需要哪些资源。对于立即需要的资源，您可能希望在页面加载生命周期的早期开始获取它们，在浏览器的主要渲染机制介入之前预加载它们。这种机制可以让资源更早地加载和可用，并且不太可能阻塞页面的初始渲染，从而提高性能。3.解析CSS构建CSSOM你可能很早就知道DOM，但对CSSOM（CSSObjectModel）你可能听得比较少，反正我也没听过几次。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.计算布局和绘图现在我们有了一个完整的渲染树，浏览器知道渲染什么，但不知道在哪里渲染。因此，必须计算页面的布局（即每个节点的位置和大小）。渲染引擎从顶部开始遍历渲染树并向下移动，计算每个节点应显示的坐标。完成后，最后一步是获取布局信息并将像素绘制到屏幕上。原文：https://dev.to/jstarmx/how-th...代码部署后可能存在的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。在这里顺便给大家推荐一个好用的BUG监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。
