从另一个视角认识HTML页面的渲染过程

2023-11-01 17:14:12

HTML页面的渲染过程

当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。DOM树是HTML文档的结构表示，它由一组节点组成，每个节点代表一个HTML元素。DOM树的构建是通过解析HTML代码来实现的，解析器会将HTML代码中的元素标记转换为节点，并建立起这些节点之间的父子关系。

在DOM树构建的同时，浏览器还会请求HTML文档中引用的CSS文件和JavaScript文件。这些文件加载完成后，浏览器会对它们进行解析和执行。CSS文件中的样式规则会应用到DOM树中的元素上，而JavaScript文件中的脚本代码则可以在页面上执行，从而实现各种各样的交互功能。

当DOM树、CSSOM树和渲染树都构建完成后，浏览器就会开始绘制页面。绘制过程是将渲染树中的每个节点转换为屏幕上的像素。这个过程是由浏览器的渲染引擎完成的。渲染引擎会根据每个节点的样式和布局属性，计算出它的确切位置和大小，然后将它绘制到屏幕上。

页面绘制完成后，浏览器会继续监听用户的输入和网络请求。当用户触发某个事件（例如，点击按钮）或浏览器收到来自服务器的新数据时，浏览器就会重新计算受影响的节点的样式和布局属性，并更新渲染树。然后，浏览器会重新绘制这些节点，从而更新页面上的内容。

HTML页面的渲染过程特点

HTML页面的渲染过程具有以下几个特点：

单线程事件轮询：浏览器有一个主线程，负责处理所有的事件和任务。当主线程执行完一个任务后，它就会检查是否有新的事件需要处理。如果有，主线程就会执行该事件对应的任务，否则，主线程就会进入等待状态。
定义明确、连续、操作有序（HTML5）：HTML5中的DOM树、CSSOM树和渲染树都有明确的定义，它们之间的关系也是连续和有序的。这使得浏览器可以按照既定的步骤和顺序来渲染页面。
分词和构建DOM树：DOM树是HTML文档的结构表示，它由一组节点组成，每个节点代表一个HTML元素。DOM树的构建是通过解析HTML代码来实现的，解析器会将HTML代码中的元素标记转换为节点，并建立起这些节点之间的父子关系。
请求资源并预加载：当浏览器解析HTML代码时，它会请求HTML文档中引用的CSS文件和JavaScript文件。这些文件加载完成后，浏览器会对它们进行解析和执行。CSS文件中的样式规则会应用到DOM树中的元素上，而JavaScript文件中的脚本代码则可以在页面上执行，从而实现各种各样的交互功能。
构建渲染树并绘制页面：当DOM树、CSSOM树和渲染树都构建完成后，浏览器就会开始绘制页面。绘制过程是将渲染树中的每个节点转换为屏幕上的像素。这个过程是由浏览器的渲染引擎完成的。渲染引擎会根据每个节点的样式和布局属性，计算出它的确切位置和大小，然后将它绘制到屏幕上。