构建 DOM 树：浏览器首先解析 HTML 代码，创建一个文档对象模型（DOM）树。DOM 树是由 HTML 元素及其属性、文本内容等组成的树状结构，表示网页的结构和层次关系。
构建 CSSOM 树：同时解析 CSS 样式表，创建一个 CSS 对象模型（CSSOM）树。CSSOM 树描述了网页中元素的样式信息。
合并 DOM 和 CSSOM 树：将 DOM 树和 CSSOM 树合并，生成渲染树（Render Tree）。渲染树只包含需要显示的元素，例如可见的 HTML 元素和应用了样式的元素，而不包括诸如 <head>、display: none 等不可见的元素。
布局（Layout）：渲染树中的每个元素都有其位置和大小。在布局阶段，浏览器确定每个元素在屏幕上的精确位置，并计算它们的大小。
绘制（Painting）：浏览器使用计算好的位置和大小信息，将渲染树中的每个元素绘制到屏幕上，形成用户可见的图像。
合成（Compositing）：在绘制完成后，浏览器将每个元素的图像按照正确的顺序进行合成，形成最终的页面显示。
在这个过程中，JavaScript 的执行可能会干扰渲染过程。当浏览器遇到需要执行的 JavaScript 代码时，渲染过程会被暂停，直到 JavaScript 代码执行完毕，然后再继续渲染。
此外，现代浏览器还采用了一些优化技术来提高渲染性能，例如：
延迟加载：延迟加载是指将不是立即可见的内容（例如位于页面底部的图片）推迟加载，以加快页面的初始渲染速度。
异步加载：将 JavaScript 脚本标记为异步加载，以避免阻塞页面的渲染过程。
CSS 样式表优化：避免使用复杂的 CSS 选择器和规则，以提高解析和渲染速度。
GPU 加速：利用图形处理单元（GPU）进行页面的渲染和合成，以加快渲染速度。
这些优化措施可以提高网页加载和渲染的性能，使用户能够更快地看到网页的内容。
浏览器实现只刷新改变的元素的技术被称为增量渲染（Incremental Rendering），其目的是最小化渲染的工作量，只更新那些发生了变化的部分，以提高页面的响应性能。
以下是一些常见的增量渲染技术：
脏矩形（Dirty Rectangles）：浏览器会将页面划分为多个矩形区域，并跟踪每个区域的变化情况。当有元素发生变化时，只有受到影响的矩形区域会被重新渲染，其他未变化的区域保持不变。
重绘（Repaint）与重排（Reflow）：浏览器中的渲染过程通常包括两个步骤，即重绘和重排。重绘是指根据元素的样式信息将其绘制到屏幕上，而重排则是计算元素的位置和大小。增量渲染通过仅执行必要的重绘和重排操作来减少渲染的工作量。
异步渲染：将页面的渲染过程与 JavaScript 的执行过程分离开来。浏览器在执行 JavaScript 代码时，可以继续进行渲染，从而减少渲染的阻塞时间。
延迟加载：将页面中的一些资源（例如图片、视频）延迟加载，直到用户滚动到相应区域或触发某些事件时才加载和渲染。这样可以减少初始渲染的工作量，提高页面的加载速度。
前端框架的虚拟 DOM 技术：一些前端框架（例如React、Vue）使用虚拟 DOM 技术来进行增量渲染。虚拟 DOM 是一个轻量级的 JavaScript 对象树，与实际的 DOM 结构相对应。当状态发生变化时，框架会计算出变化的部分，并只更新这些部分对应的实际 DOM，而不是重新渲染整个页面。
这些增量渲染技术可以结合使用，以根据页面的变化情况最小化渲染的工作量，提高页面的渲染性能和用户体验。