简述大前端技术栈的渲染原理

作者：京东物流 卢旭

大前端包括哪些技术栈

大前端指的是涵盖所有与前端开发相关的技术和平台，应用于各类设备和操作系统上。大前端不仅包括 Web 开发，还包括移动端开发和跨平台应用开发，具体包括：

•原生应用开发：Android、iOS、鸿蒙（HarmonyOS）等；

•Web 前端框架：Vue、React、Angular 等；

•小程序开发：微信小程序、京东小程序、支付宝小程序等；

•跨平台解决方案：React Native、Flutter、Taro、Weex 等。

什么是渲染

•渲染：在计算机中，渲染是指将计算机程序中的图形数据（三维模型、纹理、光源等）通过计算和图形处理技术，最终转化为图像的过程。这个过程不仅限于静态图像的生成，也包括动画和视频的渲染，以实现逼真的视觉效果。

•渲染原理：是指将代码转换为用户可以看到的 UI 界面的过程。如在 Web 前端领域，渲染原理主要涉及如何将 HTML、CSS 和 JavaScript 等代码转化为用户界面上的实际显示效果。这个过程通常包括解析、布局、绘制等步骤，具体根据不同的平台有不同的实现方式，渲染引擎也有所不同。‌

Android 渲染原理

Android 的渲染引擎负责将应用程序的用户界面渲染到屏幕上。其中的核心组件包括：

•SurfaceFlinger‌：负责合并来自不同应用程序的图形输出，并将其组合成一个屏幕图像。它管理着 EventControlThread、DispSyncThread 等线程，以及处理 VSYNC 信号，确保 UI 的平滑显示‌;

•Skia：Android 的 2D 图形库，用于绘制应用程序的用户界面；Skia 实现了 Canvas 系统，可以处理矢量图形、文本和位图等不同类型的绘图需求。

•OpenGL ES/Vulkan： 两种主要的图形 API，用于处理高性能的 3D 渲染；OpenGL ES 是移动设备上常用的图形 API 标准，而 Vulkan 是较新的高效低开销图形 API。

•Hardware Composer (HWC) ：HAL（Hardware Abstraction Layer）组件，可与 GPU 和显示器直接交互；它处理来自 SurfaceFlinger 的图层，并决定如何高效地组合这些图层。

•Gralloc：图形缓冲区分配器，它负责管理内存从不同的图形组件（如 SurfaceFlinger、应用程序）之间的共享和分配。通过 Gralloc，多个图形组件可以有效地在共享的缓冲区上进行绘制操作。

•RenderThread：这是 UI 渲染 pipeline 的一个重要部分，特别是对于绘制复杂 UI 的应用程序；它运行在一个独立的线程上，以处理资源密集型的渲染任务，避免阻塞主线程。

•Choreographer‌：通过内部的 FrameDisplayEventReceiver 接收 VSYNC 信号，统一处理 InputEvent、Animation 和 Traversal 等任务。它负责协调 UI 的绘制，确保在每个 VSYNC 信号到达时执行必要的绘制操作

•GLSurfaceView： 提供一个 OpenGL ES 绘图表面，并且可以将 OpenGL 的绘图命令路由到相关的 GL context 中；通常用于实现高级别的 3D 图形渲染。

•TextureView：可以在应用程序中作为一个 UI 组件来显示内容，如视频和其他动画，它内部使用 Texture 来高效管理。

•WebView： 用于处理 H5 页面显示的组件，它内部不仅涉及 HTML 渲染，还包含图形渲染组件。

View 和 ViewGroup 是应用框架层的核心组件，View 是界面的基本元素，而 ViewGroup 是 View 的容器。渲染引擎通过遍历 View 树，计算每个 View 的大小和位置，并将其绘制到屏幕上。主要涉及以下几个步骤：

•测量（Measurement） ：在这个阶段，渲染引擎会遍历 View 树，并调用每个 View 的onMeasure方法来计算其大小。这个过程会从上到下（从根 View 到子 View）进行，以确保每个 View 都根据其父 View 的大小约束来确定自己的大小。

•布局（Layout） ：通过 XML 布局文件或者 Java/Kotlin 代码定义 View 层级，系统解析后会生成相应的 View 树，在测量阶段完成后，渲染引擎会进入布局阶段。在这个阶段，它会调用每个 View 的onLayout方法来确定其在屏幕上的位置。这个过程同样是从上到下进行的，以确保每个 View 都被放置在正确的位置上。

•绘制（Draw） ：渲染引擎会遍历 View 树，并调用每个 View 的onDraw方法来将其内容绘制到屏幕上。这个过程可能会使用到 GPU 加速来提高绘制效率。

•合并图层（Layer Merge） ：将不同视图的图层合并为最终的显示图像。

•显示到屏幕（Display to Screen） ：将合并后的图像显示到屏幕上。

Android 的渲染过程是自上向下的递归测量和布局过程，Android 系统的渲染管道充分利用了多线程、硬件加速和显示同步技术，确保流畅的用户体验。从应用程序定义的界面，经过 View 系统层的绘制，到 GPU 硬件加速实现，再到最终合成显示。这些组件共同承担了将应用程序的图形内容高效地显示到设备屏幕上的任务，确保图形渲染的高效性和稳定性。

iOS 渲染原理

iOS 的渲染原理是核心组件的共同协作，实现高效且流畅的界面显示；主要核心组件包括：

•UIKit/Core Animation 层：UIKit 中的所有界面元素都是基于 UIView 和 CALayer 的，它们共同起作用来描述并管理视图的层级关系和属性（例如背景颜色、边框、阴影等）；DisplayLink 是解决屏幕刷新率问题，DisplayLink 在每次屏幕刷新前会调用回调函数，保证整个渲染过程的刷新频率与屏幕刷新频率同步，确保帧率。

•Core Animation：Compositing 是在代码执行修改界面的属性之后，UIKit 会将这些修改提交给 Core Animation，后者会将这些属性变化组合在一起，并生成一个光栅化的视图图像。这些图像然后会被传递到合成器进行处理。Animation 是 Core Animation 负责处理动画效果，通过离屏渲染和硬件加速来提高性能，这样保证界面动画的流畅性和稳定性。

•Render Server：Layer Tree 是当应用程序将信息提交给 Core Animation，Core Animation 会将这些信息发送到一个叫作 Render Server 的后台进程。Render Server 会处理这个层级树（Layer Tree），并对其进行必要的合成和绘制操作。打包成二进制元数据，发送到 GPU 进行实际渲染，Render Server 打包所有的 Layer 信息并发送到 GPU 进行实际的渲染处理。

•Metal/ OpenGL ES：绘制指令是 Render Server 将合成后的层（Layer）提交给 Metal 或 OpenGL ES，这些渲染框架会根据指令调度图形处理单元（GPU）进行实际的绘制操作。它们负责将高层次的绘图指令转换为低层次的 GPU 指令。

•GPU 渲染：GPU 负责执行这些绘图指令，把每一帧绘制到屏幕缓冲区。GPU 加速能够显著提高图形的绘制效率和性能。

•VSync 和 Framebuffer：VSync（垂直同步）是为了避免屏幕撕裂现象，iOS 使用 VSync 机制。VSync 会在屏幕刷新期间触发通知，使应用程序和 Render Server 知道什么时候该提交新的一帧数据。

•Framebuffer 是 GPU 完成渲染后，帧缓冲区 (Framebuffer) 中的内容被送到显示控制器，最终显示在屏幕上。

整个过程是 CPU 和 GPU 的协作工作，分阶段地处理和优化每一帧的渲染，确保最终的显示效果流畅、精美；此外，通过使用硬件加速和高效的渲染算法，iOS 渲染系统能够在保持高性能的同时节省设备的电力消耗；而绘制流程主要包括布局、绘制和渲染，如下：

•‌布局阶段‌：在 iOS 中，布局是通过 Auto Layout 系统实现的，这是一个基于约束的布局系统，它根据视图及其子视图的约束条件计算位置和大小。当约束条件发生变化时，Layout Engine 会重新计算视图的位置和大小，这个过程称为布局‌；布局阶段涉及到视图的层级关系设置，包括视图的位置、大小、背景色等属性。这个阶段还包括了计算和设置视图的 frame，这是通过约束的计算来确定的‌。

•绘制阶段‌：绘制阶段涉及到将视图的内容绘制到屏幕上。这包括调用drawRect:和drawLayer:inContext:等方法，这些方法在视图需要重绘时被调用‌。在这个阶段，视图会将其内容绘制到图层上。每个 UIView 对象都有一个 layer 属性，指向一个 CALayer 类的对象，视图会将自己绘制到这个图层上‌。

•渲染阶段‌：渲染阶段是将绘制好的图层内容呈现到屏幕上。这个过程涉及到图层的提交、核心动画的处理、OpenGL 几何形状的设置以及最终的屏幕渲染‌。渲染阶段主要由 GPU 执行，而布局和绘制阶段主要由 CPU 处理。CPU 和 GPU 的协同工作使得 iOS 设备的图形渲染高效且流畅‌。

鸿蒙渲染原理

鸿蒙系统（HarmonyOS）是华为开发的一种微内核操作系统，用于包括智能手机、平板、智能手表、物联网设备等。鸿蒙系统的渲染原理涉及多个方面，主要包括 UI 渲染、图形处理和硬件加速等。鸿蒙采用了分布式架构设计，可以实现一次开发，多端部署。

鸿蒙的渲染流程包括以下几个步骤：

1.ArkUI 声明式 UI：开发者使用 ArkUI 编写界面描述文件。

2.编译生成 Render Node 树：将 ArkUI 文件编译成中间表示形式 Render Node 树。

3.生成 VNode 树：将 Render Node 树转换为 VNode 树，用于虚拟 DOM 的管理和更新。

4.渲染合成：根据 VNode 树的数据结构和属性信息进行绘制操作，最终输出到屏幕上。

鸿蒙的亮点在于提供了分布式 UI 能力，即可以在多个设备上进行协同渲染，让 UI 不仅局限于一个设备上运行，而是分布式地在多个终端设备上共同运行，从而提升性能和用户体验。

Vue 渲染原理

Vue.js 是一款 JavaScript 框架，用于构建用户界面；Vue 的渲染原理基于虚拟 DOM 技术；当组件的状态发生变化时，Vue 会创建一个新的虚拟 DOM 树来反映这些变化；然后，Vue 会比较新老虚拟 DOM 树的差异，并计算出最小的修改量来更新实际的 DOM 结构，其渲染流程包括以下主要步骤：

•初始化：当创建 Vue 实例时，Vue 会进行初始化，包括绑定数据、计算属性、方法和侦听器。响应式系统会将数据对象转换为响应式对象，并初始化模板编译器和渲染函数。

•解析模板：Vue 首先会解析模板，并生成一个抽象语法树（AST）。这个过程中，Vue 会将模板中的指令和属性转换为对应的 AST 节点。

•生成渲染函数：Vue 根据 AST 生成一个渲染函数，该函数用于生成虚拟 DOM 树。渲染函数是一个 JavaScript 函数，用于生成 VNode（Vue 的虚拟 DOM 节点）并将其渲染到真实的 DOM 树上。

•执行渲染函数：当组件的状态发生变化时，Vue 会重新执行渲染函数，生成一个新的虚拟 DOM 树。

•对比新旧虚拟 DOM 树：Vue 会对比新旧虚拟 DOM 树的差异，找出需要更新的部分。这个过程通过 Vue 内部的“diff”算法实现，该算法会对比新旧虚拟 DOM 树的结构和属性，找出差异。

•更新 DOM：根据差异更新真实的 DOM 树。Vue 会最小化 DOM 操作的次数，只更新需要变化的部分，而不必重新渲染整个页面。

Vue 的渲染原理通过响应式系统和虚拟 DOM 协同工作，实现了高效的数据绑定和灵活的视图更新策略。我们只需关注数据的变化，Vue 会自动处理视图的更新，大大提高了开发效率和用户体验。

React 渲染原理

React 的渲染原理有几个核心概念：Virtual DOM（虚拟 DOM）、Reconciliation（协调）。

•Virtual DOM：Virtual DOM 是 React 用来描述真实 DOM 树的一个 JavaScript 对象树，其结构和真实的 DOM 树一一对应。当组件的状态（state）或属性（props）发生变化时，React 不是直接操作真实的 DOM 树，而是在内存中创建一个新的 Virtual DOM 树。

•Diffing 算法：React 通过比较新旧 Virtual DOM 树的差异（使用 Diff 算法），来确定哪些部分需要更新，并只对更新的部分进行对应的 DOM 操作，从而提高了渲染效率。

•Reconciliation：当组件状态或属性发生变化时，React 需要调用 Reconciliation 算法来决定哪些 DOM 节点需要更新以及如何更新。Reconciliation 算法的基本流程包括比较新旧 Virtual DOM 的根节点，判断是否可以复用，以及根据节点的类型和属性进行更新或替换。React 采用递归遍历的方式来比较新旧 Virtual DOM，这也是为什么更新操作不适合过于频繁的原因，因为递归遍历是一个高消耗的操作。

React 的渲染流程可以大致分为两个阶段：render 阶段和 commit 阶段。

•render 阶段：在这个阶段，React 会调合（reconcile）虚拟 DOM，计算出最终要渲染出来的虚拟 DOM。这个过程包括生成 Fiber 对象、收集副作用、找出哪些节点发生了变化，并打上不同的 flags。Diff 算法也是在这个阶段执行的。render 阶段的工作都是在内存中进行的，计算出更新后的 Fiber 树，但在这个阶段并没有更新 UI，视图不会有任何更改。

•commit 阶段：在这个阶段，React 会根据上一步计算出来的虚拟 DOM，同步地渲染具体的 UI。渲染器（Renderer）会根据协调器（Reconciler）计算出来的虚拟 DOM，同步地渲染节点到视图上。这个过程是同步执行的，不可以被打断。

React 的渲染原理通过 Virtual DOM 和 Reconciliation 算法，以及调度器、协调器和渲染器的协同工作，实现了高效、可靠的 UI 更新。

小程序渲染原理

小程序（这里以微信小程序为例，其它大同小异）的渲染原理主要如下：

‌微信小程序采用了双线程模型，将渲染和逻辑处理分离到不同的线程中，从而提高了渲染速度和效率。具体来说，渲染层负责页面的渲染和绘制工作，而逻辑层则负责处理小程序的业务逻辑和数据处理。

•渲染层：负责将 WXML 模板和 WXSS 样式解析并生成最终的页面。渲染层会构建 DOM 树和样式表，并通过底层的图形系统进行绘制和显示；

•逻辑层：使用独立的 JSCore 作为运行环境，执行小程序的 JavaScript 代码，处理用户的输入和事件，并更新页面的状态。逻辑层与渲染层之间通过特定的通信机制进行数据传输和事件通知。

渲染流程主要包括解析和编译、预加载、页面渲染和绘制与显示，具体如下：

•解析和编译‌：当用户打开小程序时，小程序框架首先对小程序的代码进行解析和编译。这一过程包括将小程序的代码转换成可执行的指令，并生成对应的数据结构，如页面树和组件树。解析和编译过程需要消耗一定的时间，但在后续的页面渲染中能够大大提高效率。

•‌预加载‌：在解析和编译完成后，小程序框架进行预加载。预加载是指在用户进入具体页面之前，提前加载可能需要使用的资源，如图片、样式文件等。通过预加载，小程序能够在用户切换页面时减少加载时间，提高渲染速度。

•‌页面渲染‌：当用户进入具体页面时，小程序框架将页面树和组件树渲染到屏幕上。渲染过程包括计算每个组件的位置和尺寸、应用样式和布局，并生成最终的绘制指令。

•绘制与显示‌：小程序框架将渲染得到的绘制指令交给底层的图形系统进行绘制。图形系统会将指令转换成图像，并显示在屏幕上。

微信小程序的渲染原理是一个基于双线程模型的高效渲染过程，通过渲染层和逻辑层的分离与协同工作，实现了页面的快速渲染和流畅的用户体验。

ReactNative 渲染原理

React Native 是基于 React 技术栈开发跨平台移动应用的一种框架；React Native 的渲染原理主要涉及 JavaScript 线程与原生线程的交互，以及 React 的 Virtual DOM（虚拟 DOM）机制。其渲染原理如下：

•JavaScript 线程与原生线程的交互：React Native 在 JavaScript 线程中运行 JavaScript 代码，包括 React 组件的渲染逻辑；当 JavaScript 线程计算出需要进行 UI 更新时，这些更新会被序列化并通过一个叫做 Bridge 的机制发送给原生线程；原生线程接收到更新后，会负责实际的 UI 绘制和更新操作，包括创建和更新原生 UI 组件。

•Virtual DOM 机制：React Native 利用 React 的 Virtual DOM 机制来优化 UI 的更新；当组件的状态或属性发生变化时，React Native 会在 JavaScript 线程中创建一个新的 Virtual DOM 树；然后，React Native 会使用 Diff 算法比较新旧 Virtual DOM 树的差异，找出需要更新的部分；只有差异部分会被通过 Bridge 发送给原生线程进行更新，从而减少了数据传输量，提高了性能。

React Native 的渲染流程主要包括以下几个步骤：

•组件渲染：在 JavaScript 线程中，React Native 组件的 render 方法会被调用，生成对应的 Virtual DOM 描述。这个描述会被 React 的渲染系统用来构建组件树。

•Diff 算法比较：当组件的状态或属性发生变化时，React Native 会使用 Diff 算法比较新旧 Virtual DOM 树的差异。这个过程会找出需要更新的部分，并准备相应的更新指令。

•数据序列化与传输：更新指令会被序列化为原生线程可理解的数据格式。然后，这些数据会通过 Bridge 机制发送给原生线程。

•原生 UI 更新：原生线程接收到更新指令后，会解析这些指令并应用到实际的 UI 控件上。这包括创建新的原生 UI 组件、更新现有组件的属性或移除不再需要的组件等。

•渲染结果展示：经过原生线程的处理后，UI 的更新会实时反映在移动设备的屏幕上。用户可以看到最新的界面效果，并根据需要进行进一步的交互。

React Native 的渲染原理和主要流程通过 JavaScript 线程与原生线程的紧密协作，以及 Virtual DOM 和 Diff 算法的优化，实现了在 JavaScript 中编写 UI 代码并在 App 原生环境中高效渲染的能力。这种机制不仅提高了应用的性能，还降低了跨平台开发的复杂性和成本。

Flutter 渲染原理

Flutter 是 Google 推出的开源 UI 框架，主要用于多平台的应用开发。其渲染原理是构建跨平台应用的关键部分，主要基于其独特的三层树结构：Widget 树、Element 树和 RenderObject 树（或称为渲染树）。这三层结构的设计旨在优化性能，减少不必要的重绘和重建。

•Widget 树：Widget 是 Flutter 中用户界面的不可变描述，是构成 Flutter 应用程序的基本元素。Widget 树是存放渲染内容的配置数据结构，创建非常轻量，在页面刷新的过程中随时会重建。

•Element 树：Element 是 Widget 树和 RenderObject 树之间的中间层，负责将 Widget 树的变化抽象化，并管理 RenderObject 的复用。Element 持有 Widget 的引用，并可以对其属性进行修改，而不是完全重建整个树。

•RenderObject 树（渲染树） ：RenderObject 树用于应用界面的布局和绘制，保存了元素的大小、布局等信息。RenderObject 的创建和销毁相对耗能，因此 Element 树会缓存 RenderObject 对象，以便在需要时复用。

Flutter 的渲染流程主要包括以下几个阶段：

•构建（Build） ：Flutter 框架根据 Widget 树中的变化调用每个 Widget 的 build 方法；build 方法返回一个新的 Widget，表示当前 Widget 的最新状态；此阶段主要确定哪些 Widget 需要更新。

•布局（Layout） ：在构建阶段之后，Flutter 框架执行布局过程；为每个需要更新的 Widget 确定其在屏幕上的位置和大小；调用每个 Widget 的 layout 方法，根据其约束条件（如最大宽度、最小高度等）计算出最佳的位置和大小。

•绘制（Paint） ：布局阶段完成后，Flutter 框架执行绘制过程；根据每个 Widget 的布局信息将其绘制到屏幕上；调用每个 Widget 的 paint 方法，将 Widget 的内容绘制到一个离屏的 Canvas 上。

•合成（Compositing） ：在绘制阶段完成后，Flutter 框架执行合成过程；将所有已绘制的 Canvas 组合成最终的显示图像；调用每个 Widget 的 compositing 方法，将它们的绘制结果合并到一起。

•显示（Display） ：合成阶段完成后，Flutter 框架将最终的显示图像发送给硬件，将其显示在屏幕上。

综上所述，Flutter 的渲染原理通过三层树结构的设计和优化，实现了高效、流畅的跨平台应用界面渲染。

Taro 渲染原理

Taro 框架的核心思想是通过将 Vue 或 React 中编写的代码进行抽象和统一规范，然后映射到不同的平台上，通过组件化的方式实现统一代码覆盖多个平台。这种方式大大提高了代码的复用率和开发效率。主要如下：

•统一抽象规范：Taro 框架定义了一套跨平台的组件、事件、CSS 样式等规范，使得在编写 React 代码时，能够通过这些抽象出来的规范来编写，从而实现跨平台的兼容性。

•代码转换：Taro 框架为不同的平台提供对应的代码转换工具，将抽象的 React 代码转换为应该在目标平台上运行的代码。这一步骤是 Taro 实现跨平台渲染的关键。

•统一 API：将不同平台上的 API 进行兼容性处理和封装，使得在不同平台上的开发人员都可以通过同样的 API 进行开发。这样做不仅降低了开发难度，还提高了开发效率。

•差异化处理：针对不同的平台特性，Taro 框架进行了特定平台的定制化开发，充分利用不同平台的特性，提供更多丰富的功能支持。这种差异化处理使得 Taro 框架在不同平台上都能发挥出最佳的性能。

而渲染技术主要包括以下几个方面：

•虚拟 DOM：React 或 Vue 使用虚拟 DOM 来提高页面渲染的性能。虚拟 DOM 是在内存中维护的一个轻量级的 JavaScript 对象树，它表示了真实的 DOM 结构。通过比较新旧虚拟 DOM 的差异，然后只更新实际 DOM 中需要改变的部分，从而避免不必要的 DOM 操作，提高渲染效率。

•事件处理：Taro 框架对事件处理进行了跨平台封装，使得开发者可以使用统一的 API 来处理不同平台上的事件。这种封装方式简化了事件处理的复杂度，提高了开发效率。

•Prerender 技术：Prerender 是由 Taro CLI 提供的一种技术，用于提高小程序页面初始化的渲染速度。它通过将页面初始化的状态直接渲染为无状态的 wxml，在框架和业务逻辑运行之前执行渲染流程，从而提高页面的加载速度。Prerender 技术的实现原理与服务端渲染类似，但它是针对小程序端进行的优化。

Taro 框架的渲染原理主要基于 React 或 Vue 的跨平台渲染技术，通过统一抽象规范、代码转换、统一 API 和差异化处理等手段实现代码的跨平台复用和高效渲染；Taro 还提供了 Prerender 等技术来优化页面加载速度，提升用户体验。基于这些技术使得 Taro 框架成为了一个功能强大、易用、跨平台兼容的开发框架。

浏览器的渲染原理

浏览器的渲染原理是一个复杂的过程，涉及到多个组件和线程的协作，才能确保网页能够正确、快速地显示在用户面前。浏览器渲染原理主要如下：

•浏览器的主要组件

◦界面控件：包括地址栏、前进后退按钮、书签菜单等，这些是用户与浏览器交互的界面部分。

◦浏览器引擎：它是浏览器的核心，负责协调各个组件的工作，处理用户的请求和操作。

◦渲染引擎：它负责解析 HTML、CSS，构建 DOM 树和 Render 树，最终将网页内容呈现给用户。

◦网络组件：它负责发送 HTTP 请求，获取网页资源。

◦JS 解释器：它用于解析执行 JavaScript 代码，实现网页的动态效果。

◦数据存储持久层：它用于存储 cookies、localStorage 等数据。

•浏览器的多进程架构

◦隔离性：每个标签页运行在独立的进程中，避免了一个标签页崩溃影响到其他标签页。

◦安全性：不同进程之间不共享资源和地址空间，减少了安全隐患。

•浏览器的主要线程

◦GUI 渲染线程：它负责渲染浏览器界面 HTML 元素，当界面需要重绘或回流时，该线程会执行。

◦JavaScript 引擎线程：它负责解析执行 JavaScript 代码，与 GUI 渲染线程互斥，确保 DOM 操作的安全。

◦定时触发器线程：它负责计时并触发定时事件。

◦事件触发线程：它将事件添加到待处理队列中，等待 JS 引擎处理。

◦异步 http 请求线程：它负责处理 XMLHttpRequest 请求，将状态变更事件放入 JS 引擎的处理队列中。

•渲染流程

◦解析 HTML，构建 DOM 树： 当用户输入网址或点击链接时，浏览器会向服务器发送请求，获取网页的 HTML 文件。浏览器开始解析 HTML 文件，将其转换为浏览器能够理解和操作的文档对象模型（DOM）树。DOM 树是由 HTML 标签和它们的层级关系组成的树状结构，表示了网页的结构和内容。

◦样式计算（CSSOM 树构建与渲染树生成） ：CSSOM 树构建，浏览器解析 CSS 文件或<style>标签中的样式信息，将其转换为浏览器能够理解的样式表对象模型（CSSOM）树。CSSOM 树表示了文档中所有元素的样式信息。渲染树生成：浏览器将 DOM 树和 CSSOM 树合并，形成渲染树（Render Tree）。渲染树是 DOM 树的一个可视化表示，只包含需要显示的节点和这些节点的样式信息。

◦布局： 浏览器根据渲染树中的信息，计算每个节点的几何信息（如位置、大小等），并生成布局树（Layout Tree）。布局阶段会确定页面上所有元素的位置和大小，确保它们能够按照预期的方式排列。

◦分层： 为了更高效地渲染页面，浏览器会对布局树进行分层处理，生成分层树（LayerTree）。拥有层叠上下文属性（如定位属性、透明属性、CSS 滤镜、z-index 等）的元素会被提升为单独的图层。分层有助于浏览器进行并行绘制，减少重绘和重排的开销。

◦绘制： 浏览器遍历分层树中的每个图层，使用图形库将图层的内容绘制成图像。绘制阶段会生成一个绘制列表，该列表包含了绘制每个元素所需的指令和顺序。绘制操作是由渲染引擎中的合成线程来完成的。

◦合成显示： 合成线程将图层划分为图块（tile），并将图块转换为位图（通过栅格化操作）。栅格化操作通常使用 GPU 来加速生成位图。一旦所有图块都被栅格化，合成线程就会生成一个绘制图块的命令（DrawQuad），并将该命令提交给浏览器进程。浏览器进程根据 DrawQuad 命令生成页面，并将其显示到屏幕上。

◦交互处理：当用户与页面进行交互（点击、滚动、输入等）时，浏览器会更新渲染树，并重新进行布局和绘制。

浏览器的渲染原理是涉及资源的加载、解析、构建 DOM 和 CSSOM 树、布局、绘制、合成以及交互处理等多个步骤；涉及多线程处理、缓存机制、‌DNS 解析、‌TCP 连接等，确保了网页的快速、稳定、高效渲染。

它们的相同点与不同点

•相同点

◦层次结构：所有技术栈都基于某种形式的树状结构来管理 UI 组件。

◦测量和布局：渲染过程通常包含测量、布局、绘制阶段。

◦更新机制：大多数框架都采用某种形式的 Diff 算法来优化 DOM 更新，以提高性能。

•不同点

◦运行环境不同：APP 运行在操作系统之上，具有更高的权限和更丰富的系统资源；H5 页面是基于浏览器渲染，受到浏览器沙箱模型的限制；小程序受到宿主环境类浏览器环境的限制。

◦渲染机制不同：APP 渲染通常涉及到底层的图形渲染接口（如 Skia、OpenGL 等），可以直接与 GPU 交互；而浏览器渲染则主要依赖于 HTML、CSS 和 JavaScript 等前端技术，并通过浏览器引擎（如 Blink、Gecko 等）进行渲染。iOS 和 Android 利用 GPU 进行硬件加速渲染，大大提升复杂 UI 的绘制性能。Web 前端如 Vue 和 React 采用虚拟 DOM 和 Diff 算法来更新 UI。小程序等跨平台框架通常需要在逻辑层与视图层之间进行桥接通信。Web 和小程序通常依赖浏览器或宿主环境的渲染引擎。

◦性能优化不同：APP 渲染可以利用操作系统的特性进行更深入的性能优化（如硬件加速、内存管理等）；而浏览器渲染则受到浏览器引擎和前端技术的限制，在性能优化上可能相对较弱。

◦跨平台性不同：APP 需要针对不同的操作系统和设备进行开发和适配；而浏览器渲染则具有更好的跨平台性，可以在不同的浏览器和设备上运行。

◦协同渲染：鸿蒙 OS 的分布式 UI 能力允许跨设备协同渲染，而其他框架通常只在单个设备上进行渲染。

综上所述，APP 渲染、H5 页面渲染、小程序渲染在多个方面存在多个区别。这些区别源于它们不同的运行环境、渲染机制、性能优化和跨平台性等因素。

随着技术的发展，大前端的各种技术栈不断涌现，各自发展出了适合自身特性的渲染机制。不同技术栈在各自的应用领域都有独特的优势和适用场景，我们根据项目需求和团队情况选择合适的技术栈，可以更高效地实现高性能的 UI 和良好的用户体验。