老生常谈的页面渲染流程

最新推荐文章于 2024-07-13 17:28:14 发布

突然好热

最新推荐文章于 2024-07-13 17:28:14 发布

阅读量597

点赞数 20

分类专栏： CSS 文章标签： tensorflow 人工智能 python

本文链接：https://blog.csdn.net/m0_46543935/article/details/140403033

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

老生常谈的页面渲染流程

当浏览器加载一个网页时，它会经历一系列步骤来解析和渲染 HTML 和 CSS 文件。以下是浏览器编译和渲染 HTML 和 CSS 的主要流程：

主要流程

解析 HTML
读取 HTML：浏览器首先从服务器获取 HTML 文件，并开始解析。
构建 DOM 树：HTML 文件被解析为 DOM（Document Object Model）树。每个 HTML 标签都成为一个 DOM 节点。
加载 CSS
查找 CSS：在解析 HTML 时，浏览器会发现 CSS 文件的链接。
请求 CSS：浏览器会并行请求这些外部 CSS 文件。
解析 CSS：CSS 文件被解析为 CSSOM（CSS Object Model）树，表示样式规则和选择器。
构建渲染树
合并 DOM 和 CSSOM：浏览器将 DOM 树和 CSSOM 树结合，创建渲染树。渲染树只包含可见的节点（例如，display: none 的元素不会出现在渲染树中）。
计算样式：浏览器会计算每个渲染树节点的样式，应用所有匹配的 CSS 规则，包括继承和默认值。
布局
计算布局：浏览器会根据渲染树计算每个节点的几何属性（位置和大小）。这一过程也称为回流（reflow）。
布局算法：不同的布局模式（如块布局、内联布局、浮动布局、Flexbox 布局和 Grid 布局）会影响布局计算的结果。
绘制
生成绘制指令：浏览器会根据计算出的布局信息生成绘制指令。这些指令定义了如何在屏幕上绘制每个节点。
绘制到屏幕：浏览器将这些绘制指令发送到绘图引擎，将内容绘制到屏幕上。这一过程称为重绘（repaint）。
合成和显示
合成层：为了提高性能，浏览器会将某些部分的页面（如动画、滚动区域）分成不同的图层。每个图层都会单独绘制，并最终合成在一起。
显示页面：浏览器将所有图层合成并显示在屏幕上，用户可以看到渲染后的页面。

什么是绘制指令

绘制指令（drawing commands）与 CPU 指令集（CPU instruction set）有很大的不同，尽管它们都涉及到计算和处理，但它们的作用、执行环境和复杂性有很大区别。

绘制指令

绘制指令是高层次的命令，指示浏览器如何在屏幕上呈现网页内容。它们主要由浏览器的渲染引擎（如 Chrome 的 Blink，Firefox 的 Gecko）生成，并最终由图形处理单元（GPU）执行。

绘制形状：如矩形、圆形、线条等。
绘制文本：在指定位置绘制特定样式的文本。
应用颜色和样式：设置填充颜色、边框颜色、渐变等样式。
处理图像：在指定位置绘制图像。
处理变换：如旋转、缩放、平移等。

图形API

绘制指令通过图形 API（如 Direct2D、Core Graphics、Skia）发送到 GPU 进行实际渲染。
这些用于图形渲染和处理的不同图形 API 或图形库，各自在不同的操作
系统和硬件平台上有着特定的应用和优势。让我们逐个简要介绍它们

OpenGL
OpenGL 是一个跨平台的图形 API，用于渲染 2D 和 3D 图形。它由 Khronos Group 组织维护，广泛用于游戏开发、虚拟现实（VR）、数据可视化和科学计算等领域。OpenGL 提供了丰富的图形渲染功能和灵活的扩展机制，支持多种操作系统（如 Windows、Linux、macOS）和硬件平台（包括 CPU 和 GPU 加速）。OpenGL 主要通过 GPU 加速实现高性能的图形渲染和计算。

Skia
Skia 是一个开源的 2D 图形库，由 Google 开发和维护，用于高性能的绘图渲染。它主要用于 Android 平台的 UI 绘制（如 Android 的 UI 组件、浏览器等），以及 Chrome 浏览器和其他 Google 产品中的图形渲染。Skia 提供了跨平台的 API，支持 CPU 和 GPU 加速，并且被设计为高效、灵活和可扩展的图形处理解决方案。

Direct2D
Direct2D 是 Microsoft Windows 的一个图形 API，用于在 Windows Vista 及更高版本上进行 2D 图形渲染。它是 DirectX API 的一部分，提供了硬件加速的 2D 图形处理能力，可以通过 Direct3D API 使用 GPU 加速。Direct2D 支持各种图形操作，如绘制几何形状、图像处理、文字渲染等，适用于开发需要高性能、平滑和响应的图形界面的 Windows 应用程序。

Metal
Metal 是苹果公司推出的低级图形 API，用于 macOS 和 iOS 设备上的图形渲染和计算。它旨在提供更高效、更直接的硬件控制，优化游戏和图形应用程序的性能。Metal 充分利用苹果设备的 GPU 资源，支持并行计算和高级图形效果，适用于需要低延迟、高帧率和图形计算能力的应用开发。

应用场景

OpenGL：广泛应用于游戏开发、科学计算、虚拟现实和数据可视化等需要跨平台、高性能图形处理的领域。
Skia：主要用于 Android 平台的 UI 绘制和 Chrome 浏览器的图形渲染。
Direct2D：适用于 Windows 平台的应用程序开发，特别是需要高性能图形渲染和硬件加速的界面设计。
Metal：用于 macOS 和 iOS 设备上的图形应用程序开发，特别是游戏和需要高性能图形计算的应用场景。
每个图形 API 都有其独特的优势和适用范围，开发者可以根据具体的平台和应用需求选择合适的技术来实现图形渲染和处理功能。

硬件加速

硬件加速是一种利用计算机的硬件资源（尤其是图形处理单元 GPU）来加快图形和视觉效果处理的技术。在 Web 开发和浏览器渲染中，硬件加速主要指利用 GPU 加速网页的绘制和动画效果，以提升性能和流畅度。

如何实现硬件加速？

GPU 加速渲染：

图形处理单元（GPU）是专门设计用于处理图形和图像的硬件。浏览器可以利用 GPU 的并行处理能力来加速页面的绘制和动画效果。
当浏览器发现某个页面元素可以通过 GPU 加速绘制时（例如使用了某些 CSS 属性或 Canvas 绘图），它会将相应的绘制操作交给 GPU 处理，而不是仅依赖 CPU。

硬件加速 API：

在 Web 开发中，开发者可以通过使用一些技术和 API 来利用硬件加速，例如：
CSS3 属性：如 transform、opacity、filter、will-change 等，这些属性可以触发 GPU 加速，特别是在动画和过渡效果中。
Canvas API：使用 Canvas 绘图时，浏览器通常会使用 GPU 加速来加快绘制和渲染。
WebGL：基于 OpenGL ES 的 Web 图形库，直接利用 GPU 加速进行复杂的 3D 渲染和计算。
Web 动画 API：如 CSS 动画、JavaScript 动画库（如 GreenSock、Anime.js 等），可以利用 GPU 加速来提高动画的流畅度和响应速度。

优势和应用场景：
性能提升：GPU 擅长并行计算和大规模并发处理，能够显著提升复杂页面的渲染速度和动画效果的流畅度。
节能：相比于 CPU，GPU 更高效地处理图形和视觉效果，可以减少设备能源消耗。
应用场景：特别适用于需要复杂动画、大量图形渲染或实时 3D 图形的 Web 应用，如游戏、数据可视化、交互式应用等。