[0001] 本发明涉及分布式渲染技术，尤其涉及一种基于分布式渲染的WEB浏览实时渲染方法及系统。

[0002] 网页浏览器是当前最常用的浏览和交互方式之一，用户可通过输入URL地址访问所需网页，浏览器需要对请求的网页进行实时渲染并显示给用户。随着网页内容日益复杂，单机浏览器渲染网页的效率和质量已难以满足用户需求。

[0003] 现有技术中，通常是在用户终端的浏览器中直接进行网页的解析、布局、绘制和渲染，渲染的过程往往十分耗时，且受终端硬件性能的限制，渲染质量和效率往往较低。尤其是对于复杂网页和低性能终端设备，渲染体验更加糟糕。

[0004] 另一种做法是采用服务端渲染，将渲染过程放在服务器端完成，但服务器资源有限，无法同时满足大量用户的渲染需求，且仍需将庞大的渲染结果数据传输给终端，带宽占用较高。

[0005] 因此，现有技术在网页渲染的效率、质量和资源占用方面都存在一定缺陷，亟需新的技术方案来改进和优化。发明人针对上述问题，提出了一种基于分布式渲染的WEB浏览实时渲染方法。

[0019] 为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

[0020] 下面以具体地实施例对本发明的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

[0021] 图1为本发明实施例基于云计算和分布式渲染的WEB浏览实时渲染方法的流程示意图，如图1所示，所述方法包括：S101.接收来自用户终端浏览器的渲染请求，所述渲染请求包括请求渲染的目标网页的URL地址和用户终端的设备参数，根据渲染请求获取目标网页的页面数据并进行预处理，对预处理后的页面数据进行解析，得到页面的DOM树结构和CSSOM树结构，根据DOM树结构、CSSOM树结构以及设备参数，构建适配用户终端的渲染树。

[0022] 其中，设备参数包括屏幕尺寸、分辨率和浏览器类型等信息，用于后续构建适配用户终端的渲染树。根据渲染请求获取目标网页的页面数据，页面数据包括网页的HTML、CSS和JavaScript代码，以及网页中包含的图片、视频等多媒体资源。为了优化渲染性能，对获取到的页面数据进行预处理，包括压缩图片和视频资源，以减小数据传输量；对JavaScript代码进行优化和压缩，以减少脚本的执行时间。

[0023] 对预处理后的页面数据进行解析，通过词法分析和语法分析，将HTML代码解析为文档对象模型(DOM)树，将CSS代码解析为CSS对象模型(CSSOM)树。DOM树表示页面的结构和内容，CSSOM树表示页面的样式和布局信息。

[0024] 在得到DOM树和CSSOM树后，综合考虑用户终端的设备参数，构建一棵适配用户终端的渲染树。渲染树是DOM树和CSSOM树的结合，它包含了页面中所有可见的渲染对象，以及它们的样式和布局信息。

[0025] 在一种可选的实施例中，根据DOM树结构、CSSOM树结构以及设备参数，构建适配用户终端的渲染树包括：
获取页面的DOM树结构和CSSOM树结构，同时获取用户终端的设备参数、用户行为和当前网络环境参数；
将DOM树结构、CSSOM树结构以及设备参数输入至预先构建的智能预测模型，所述智能预测模型包括特征提取层、预测层和输出层；
特征提取层从渲染请求中提取各个参数的特征向量，其中，页面的DOM树结构和CSSOM树结构采用树结构编码方式提取特征向量，设备参数和网络环境参数采用向量编码方式提取特征向量，用户行为采用嵌入方式提取特征向量；
预测层采用多层感知机结构，将特征提取层输出的各个参数的特征向量进行非线性变换，生成渲染树结构预测结果和布局参数预测结果；其中，所述渲染树结构预测结果采用序列生成的方式，利用循环神经网络逐步预测渲染树的节点和边，所述布局参数预测结果采用回归的方式，预测渲染树节点的位置和大小信息；
输出层将预测层输出的渲染树结构预测结果和布局参数预测结果解码为渲染树和布局方案；其中，渲染树结构预测结果的解码采用定向搜索策略，从预测的序列中解码出最优的渲染树结构，布局参数预测结果的解码采用直接输出的方式，输出预测的渲染树节点的位置和大小信息；
根据输出层解码出的渲染树和布局方案，构建适配用户终端的渲染树，并基于所构建的渲染树进行渲染。

[0026] 示例性地，首先，在页面渲染请求到达时，获取待渲染页面的DOM树结构和CSSOM树结构，作为页面内容的表示。同时，收集用户终端的设备参数，包括屏幕尺寸、分辨率、设备类型等，用于描述终端设备的硬件条件和显示能力。此外，还需获取用户在页面上的交互行为数据，如滚动、点击、悬停等，反映用户的浏览习惯和兴趣偏好。最后，采集当前的网络环境参数，如网络带宽、延迟等，表征页面加载和渲染过程中的网络状况。

[0027] 接下来，将收集到的页面DOM树、CSSOM树以及设备参数等环境信息，输入到预先构建的智能预测模型中进行处理。该模型采用端到端的结构，主要包括三个部分：特征提取层、预测层和输出层。

[0028] 在特征提取层，针对不同类型的输入参数，设计了相应的特征编码方式。对于树结构的DOM和CSSOM，使用树结构编码将其转换为固定长度的向量表示，既能保留树的层次结构信息，又能便于后续的神经网络处理。对于设备参数和网络参数等属性型数据，直接采用向量编码将其映射到低维空间。而对于用户行为这种序列数据，则利用embedding方式学习其低维嵌入式表示，挖掘用户行为模式。特征提取层的输出是各个参数的特征向量，蕴含了原始环境信息的高层语义。

[0029] 预测层接收来自特征提取层的特征向量，通过多层感知机对其进行非线性变换和组合，提取更加抽象和高级的特征表示。在此基础上，预测层输出两部分结果：渲染树结构预测和布局参数预测。渲染树结构的生成是一个树形结构的预测问题，传统的序列生成模型如RNN难以捕捉树的拓扑关系。因此，采用基于GNN的序列生成方法，将渲染树的构建过程建模为一系列的节点和边的预测任务，利用GNN逐步生长出完整的树形结构。而布局参数的预测则相对简单，采用回归的方法直接估计各个渲染节点的位置坐标和尺寸大小。

[0030] 在输出层，对预测层生成的渲染树结构序列和布局参数进行解码，还原出最终的渲染树和布局。对于树结构序列的解码，使用定向搜索策略进行探索，从所有可能的预测序列中解码出得分最高的Top‑K个候选树。而布局参数的解码则直接将回归值作为预测结果输出。解码得到的渲染树和布局方案，充分考虑了用户终端的设备约束和交互偏好，能够动态适配不同环境下的最优页面呈现。

[0031] 最后，根据输出层解码的渲染树和布局信息，构建出适配当前环境的最优渲染树，并基于该树进行页面的实际渲染。渲染树的构建过程中，需要将预测的节点位置和尺寸映射到实际的页面坐标空间，同时对节点的样式和属性进行继承和覆盖，最终生成一棵可直接用于渲染的树形结构。利用该渲染树进行页面渲染，能够在保证视觉效果的同时，最小化渲染过程中的资源开销，从而提升页面的性能表现。

[0032] 在本实施例中，通过采用基于端到端的智能预测模型，实现了渲染树的自动生成和动态优化。相比传统的启发式规则和人工设计，能够从数据中自动学习渲染策略，并根据环境的变化进行自适应调整，具有更强的泛化能力和鲁棒性。此外，本实施例通过将树结构生成和布局参数回归统一在同一个框架下，减少了流程间的信息损耗，提高了整体的优化效果。在复杂和动态的Web应用场景下，可显著提升页面渲染的性能和用户体验。

[0033] 在一种可选的实施例中，将预测层输出的渲染树结构预测结果和布局参数预测结果解码为渲染树和布局方案包括：
获取渲染树解码过程中的输入信息，并基于条件随机场模型建模布局约束，其中条件随机场模型的随机变量表示渲染树的节点，观测变量表示输入信息，布局属性因子表示节点之间的布局约束，所述布局属性因子是关于所述节点的位置和大小的布局属性的评分函数；
在渲染树的解码过程中，通过注意力机制计算候选节点的语义一致性评分，通过条件随机场模型计算候选节点与其他节点的布局一致性评分；
将候选节点的语义一致性评分与布局一致性评分进行加权求和，得到候选节点的综合评分；
根据所述综合评分从候选节点中选择最优节点，将所述最优节点添加到已生成的渲染树中，并根据最优节点更新布局约束，调整已生成的渲染树中的节点的位置和大小，重复迭代直至生成完整的渲染树，并输出布局方案。

[0034] 示例性地，首先对布局约束进行建模，布局约束指渲染树节点在位置、大小、层叠等方面需要满足的要求或限制。常见的布局约束包括：边距约束：节点与容器边缘或其他节点之间需要保持一定的边距；对齐约束：多个节点在垂直或水平方向上需要对齐；大小约束：节点的宽度或高度需要符合特定的比例或范围；层叠约束：节点之间需要按照一定的顺序或层级进行层叠。具体地，为了将布局约束引入到渲染树解码中，采用条件随机场(CRF)对布局约束进行建模。CRF是一种概率图模型，可以很好地描述变量之间的复杂依赖关系。通过定义不同类型的布局约束因子，如边距因子、对齐因子、大小因子等，可以将布局约束灵活地引入到渲染树解码中。

[0035] 在引入布局约束后，渲染树的解码过程需要同时考虑节点的语义一致性和布局一致性。具体地，将语义一致性和布局一致性定义为两个评分函数，其中，语义一致性评分表示节点与输入信息在语义上的匹配程度，可以通过注意力机制等方法计算得到；布局一致性评分表示两个不同的节点满足布局约束的程度，可以通过CRF模型中的因子函数计算得到。

[0036] 在每个解码步骤中，综合考虑候选节点的语义一致性和布局一致性，计算其综合评分，具体的解码步骤包括，根据当前已生成的渲染树和布局约束，通过注意力机制计算每个候选节点的语义一致性评分，根据当前已生成的渲染树和布局约束，通过CRF模型计算每个候选节点与其他节点的布局一致性评分；将语义一致性评分和布局一致性评分加权求和，得到每个候选节点的综合评分；根据综合评分采样或选择最优的候选节点，将其添加到已生成的渲染树中；根据新添加的节点，更新布局约束中的变量取值，调整其他节点的位置和大小；重复上述步骤，直到生成完整的渲染树。

[0037] 在解码的过程中，通过动态规划或梯度下降等优化算法，不断地最大化渲染树的综合评分，使其在语义和布局上都能达到最优。

[0038] 布局约束中的布局属性因子函数包含了大量的参数，如边距因子中的边距阈值、对齐因子中的对齐方式等。为了自动学习这些参数，可以将布局约束建模为一个结构化预测问题，通过结构化支持向量机(Structured SVM)等方法进行训练。具体地，将布局约束包含的参数定义为布局约束特征向量，将渲染树和输入信息映射到所述布局约束特征向量对应的特征空间；通过结构化预测方法学习最优的布局约束参数，使得布局约束特征空间中的渲染树得分与渲染树结构化损失函数之差最大。

[0039] 在本实施例中，通过注意力机制计算候选节点的语义一致性评分，可以确保生成的布局与输入信息的语义相符，避免出现与预期不符的布局结果。采用条件随机场模型建模布局约束，可以全局考虑节点之间的位置、大小等布局属性，使得生成的布局整体协调一致。在解码过程中，通过更新布局约束并调整已生成布局中节点的位置和大小，可以动态调整和优化布局方案，使其适应新添加的节点。将语义一致性评分和布局一致性评分相结合，在生成布局时同时考虑了语义和布局两个维度的约束，使得最终生成的布局更加合理。条件随机场模型能够建模复杂的布局属性和约束关系，使得该方案可以应用于各种场景下的布局生成任务。整个过程是一个端到端的模型，无需人工设计规则，可以自动从输入信息中学习布局知识，生成高质量的布局方案。通过生成符合语义且布局合理的界面布局，能够提升用户的浏览体验，增强应用程序的实用性和美观性。

[0040] S102.采用基于图的数据结构表示所述渲染树，渲染树的每个节点对应一个渲染对象，通过深度优先遍历算法遍历渲染树，将渲染树划分为多个子渲染树，每个子渲染树包含部分渲染对象，根据子渲染树的复杂度和云端渲染节点的负载情况，将多个子渲染树动态分发到多个云端的分布式渲染节点。

[0041] 其中，采用基于图的数据结构来表示渲染树将渲染树看作一个有向无环图(DAG)，其中每个节点对应一个渲染对象，节点之间的有向边表示渲染对象之间的父子关系或空间关系。

[0042] 为了充分利用分布式渲染的并行能力，需要将渲染树划分为多个子渲染树，每个子渲染树包含部分渲染对象。采用深度优先遍历算法遍历渲染树，通过设置适当的阈值条件，将渲染树分割为多个子树。划分子树的粒度需要根据子渲染树的复杂度和云端渲染节点的负载情况动态调整，以达到负载均衡和渲染效率的平衡。

[0043] 可选地，在划分子渲染树时，采用启发式算法，综合考虑子树的节点数量、子树的深度、子树节点的布局和样式复杂度等因素，将子渲染树动态分发到多个云端的分布式渲染节点。启发式算法通过评估不同划分方案的得分，选择总得分最高的划分方案，以实现更优的负载均衡和渲染性能。

[0044] 在一种可选的实施例中，采用基于图的数据结构表示所述渲染树，渲染树的每个节点对应一个渲染对象，通过深度优先遍历算法遍历渲染树，将渲染树划分为多个子渲染树，每个子渲染树包含部分渲染对象，根据子渲染树的复杂度和云端渲染节点的负载情况，将多个子渲染树动态分发到多个云端的分布式渲染节点包括：
将渲染树表示为无向图，所述无向图中的节点表示渲染对象，边表示渲染对象之间的空间关系；
基于多层图注意力网络对所述无向图进行编码，对于当前渲染对象节点，通过聚合邻居节点的邻居节点特征向量，得到各个渲染对象节点的高维特征表示；
基于得到的渲染对象节点的高维特征表示，利用深度强化学习算法对渲染树进行自适应划分，得到新的子渲染树；
获取云端渲染节点的实时负载信息，并与得到的新的子渲染树分别进行编码，得到子渲染树的特征表示和云端渲染节点的特征表示，利用注意力机制计算子渲染树的特征表示与云端渲染节点的特征表示之间的注意力权重矩阵，根据所述注意力权重矩阵得到每个子渲染树在各个云端渲染节点上的分发概率分布；
基于所述分发概率分布和云端渲染节点的实时负载信息，得到各个子渲染树的最优分发决策，根据得到的最优分发决策将多个子渲染树动态分发到对应的云渲染节点，完成渲染树的动态划分与分发。

[0045] 示例性地，首先将渲染树表示为无向图，无向图中的节点表示渲染对象，边表示渲染对象之间的空间关系，如相邻、包含等。然后，利用多层图注意力网络对无向图进行编码，通过聚合当前渲染对象节点的邻居节点特征向量，得到各个渲染对象节点的高维特征表示，编码了渲染对象的语义信息和上下文信息。

[0046] 在得到渲染对象节点的高维特征表示后，基于注意力机制生成注意力分布，根据注意力分布对渲染对象节点进行采样，得到子渲染树根节点，并将子渲染树根节点从原始渲染树中分离，形成新的子渲染树。这一过程可以看作是一个序列决策问题，通过训练强化学习智能体来学习最优的渲染树划分策略。智能体的状态表示为当前的渲染树无向图，每个决策步骤对应一次划分操作。在每个决策步骤，智能体根据当前状态生成注意力分布，表示每个渲染对象节点被选为子渲染树根节点的概率，并根据注意力分布采样得到子渲染树根节点。重复划分过程，直到原始渲染树被划分为指定数量的子渲染树。智能体的奖励函数设计为子渲染树的平均语义完整性得分和负载均衡度得分的加权和，通过优化智能体的策略，可以得到一个自适应的渲染树划分方法。

[0047] 接下来，为了将子渲染树动态分发到多个云端渲染节点，需要获取云端渲染节点的实时负载信息，如CPU、GPU利用率，内存占用率等。将负载信息和子渲染树分别进行编码，得到云端渲染节点和子渲染树的特征表示。利用注意力机制计算子渲染树的特征表示与云端渲染节点的特征表示之间的注意力权重矩阵，注意力权重表示每个子渲染树与每个云端渲染节点的相关性。根据注意力权重矩阵，可以得到每个子渲染树在各个云端渲染节点上的分发概率分布。

[0048] 最后，综合考虑子渲染树的分发概率分布和云端渲染节点的实时负载信息，通过softmax回归模型得到每个子渲染树的最优分发决策。根据最优分发决策，将子渲染树动态分发到对应的云端渲染节点，实现渲染树的动态划分与分发，提高分布式渲染的效率和负载均衡性。

[0049] 在本实施例中，通过将大规模的渲染树自适应划分成多个子渲染树，并将这些子渲染树动态分发到多个云端渲染节点进行并行渲染，可以充分利用云端的计算资源，极大地提升了渲染效率。通过利用注意力机制计算子渲染树与云端渲染节点的相关性，并基于云端渲染节点的实时负载信息得到每个子渲染树在各节点的分发概率分布，实现了子渲染树到云端节点的最优分发，达到负载均衡的目的。基于子渲染树的特征表示和云端节点的实时负载状态动态生成分发决策，能够自适应地调整分发策略，提高资源利用效率。通过动态划分和分发渲染树，可以根据实际情况灵活调度渲染任务，提高渲染过程的灵活性和鲁棒性，实现了大规模渲染树的自适应划分和动态分发，能够充分利用云端资源，提高渲染效率，并具有良好的负载均衡、可扩展性。

[0050] 在一种可选的实施例中，基于得到的渲染对象节点的高维特征表示，利用深度强化学习算法对渲染树进行自适应划分，得到新的子渲染树包括：
将渲染树划分问题建模为马尔可夫决策过程，将渲染树的当前划分方案定义为状态，将选择下一个划分节点定义为动作，并根据划分后子渲染树的语义完整性和负载均衡度构建奖励函数，其中，语义完整性通过子渲染树内节点特征的平均余弦相似度计算，负载均衡度通过子渲染树节点数的标准差计算；
构建策略网络和价值网络，策略网络以状态为输入，输出在当前状态下采取各个动作的概率分布，价值网络以状态为输入，输出当前状态下的长期累积奖励估计值；
在每个决策步骤中，根据策略网络输出的动作概率分布选择动作，并将当前划分方案输入预先构建的图优化模块进行局部调整，图优化模块以最大化调整后划分方案的奖励函数值为目标，使用自适应优化算法得到局部最优的划分方案；
将图优化模块输出的调整后划分方案作为新的状态，结合奖励函数计算得到的即时奖励，使用蒙特卡洛方法估计策略梯度，并使用策略梯度定理更新策略网络参数，使用时序差分算法更新价值网络参数，交替优化策略网络和价值网络直至达到预设的训练轮数，得到训练好的策略网络；
利用训练好到的策略网络对渲染树进行自适应划分，根据策略网络输出的动作概率分布选择动作并使用图优化模块进行局部调整，重复迭代直到满足预设的划分终止条件，得到新的子渲染树。

[0051] 示例性地，首先，将渲染树的当前划分方案定义为马尔可夫决策过程中的状态，将选择下一个划分节点定义为动作。状态表示了渲染树在当前时刻的划分情况，包括已经划分出的子渲染树以及未划分的节点集合。动作则表示在当前状态下选择一个未划分的节点作为下一个划分节点，将其从未划分节点集合中移除，并将其子树划分为新的子渲染树。

[0052] 为了评估划分方案的优劣，引入了奖励函数的概念。奖励函数根据划分后子渲染树的语义完整性和负载均衡度来计算即时奖励。语义完整性衡量了子渲染树内节点在语义上的相关性和一致性，可以通过计算子渲染树内节点特征的平均余弦相似度来获得。节点特征可以通过预训练的语义编码器提取，如Word2Vec或BERT等。平均余弦相似度越高，表示子渲染树内节点在语义上越相关，语义完整性也越高。负载均衡度衡量了子渲染树之间的计算负载是否均衡，可以通过计算子渲染树节点数的标准差来获得。标准差越小，表示子渲染树之间的节点数越接近，负载也越均衡。奖励函数将语义完整性和负载均衡度进行加权求和，得到最终的即时奖励值。

[0053] 在马尔可夫决策过程的框架下，构建了策略网络和价值网络来学习最优的划分策略。策略网络以状态为输入，输出在当前状态下采取各个动作的概率分布。价值网络以状态为输入，输出当前状态下的长期累积奖励估计值。策略网络和价值网络都可以使用深度神经网络来实现，如多层感知机、卷积神经网络或图神经网络等。

[0054] 在每个决策步骤中，根据策略网络输出的动作概率分布选择一个动作，即选择一个未划分的节点作为下一个划分节点。然后，将当前划分方案输入预先构建的图优化模块进行局部调整。图优化模块以最大化调整后划分方案的奖励函数值为目标，使用自适应优化算法，如Adam或AdaGrad等，对划分方案进行局部搜索和优化，得到一个局部最优的划分方案。

[0055] 将图优化模块输出的调整后划分方案作为新的状态，并结合奖励函数计算得到的即时奖励，使用蒙特卡洛方法估计策略梯度。蒙特卡洛方法通过对多个完整的决策序列进行采样和评估，计算每个动作对应的长期累积奖励，并以此估计策略梯度。然后，使用策略梯度定理更新策略网络的参数，使得在当前状态下采取奖励较高的动作的概率增大。同时，使用时序差分算法更新价值网络的参数，使其能够更准确地估计当前状态下的长期累积奖励。时序差分算法通过比较当前状态的估计值与下一状态的估计值和即时奖励之和，计算时序差分误差，并以此更新价值网络的参数。策略网络和价值网络的训练通过交替优化的方式进行，即先固定价值网络，更新策略网络，再固定策略网络，更新价值网络，如此反复，直至达到预设的训练轮数，得到训练好的策略网络。

[0056] 在应用阶段，利用训练好的策略网络对待划分的渲染树进行自适应划分。给定一个初始的渲染树划分方案作为起始状态，根据策略网络输出的动作概率分布选择一个动作，即选择一个未划分的节点作为下一个划分节点，并使用图优化模块对划分方案进行局部调整，得到一个新的划分方案作为新的状态。重复这个过程，直到满足预设的划分终止条件，如达到预设的子渲染树数量、达到预设的划分深度等，最终得到一个新的渲染树划分方案，即新的子渲染树集合。

[0057] 在一种可选的实施例中，根据划分后子渲染树的语义完整性和负载均衡度构建奖励函数的计算公式如下：
；
其中，r(s，a)表示在状态s下采取动作a的奖励函数，α表示语义完整性的权重系数，G表示划分后子渲染树的节点集合，hi表示第i个节点的特征向量，hj表示第j个节点的特征向量，T表示转置，β表示负载均衡度的权重系数，K表示子渲染树的数量，Gk表示第k个子*
渲染树的节点数，G表示子渲染树节点数的平均值。

[0058] 在本实施例中，将深度强化学习与图优化相结合，通过策略网络自适应地选择划分节点，通过图优化模块对划分方案进行局部调整，以实现渲染树的高效并行渲染。通过将子渲染树内节点特征的平均余弦相似度作为奖励函数的一部分，可以确保划分后的子渲染树具有较高的语义完整性，避免语义不连贯的情况。策略网络和价值网络可以端到端联合训练，无需人工标注数据，可以充分利用强化学习的优势自主学习最优策略。通过学习和优化，可以自适应地调整划分策略，同时兼顾语义完整性和负载均衡，有效提升了渲染效率和渲染质量。采用了深度神经网络来实现策略网络和价值网络，可以自动学习和提取渲染树节点的高级特征，捕捉节点之间的复杂关系和依赖性，实现了渲染树的自适应划分，并充分考虑了语义完整性、负载均衡等因素，具有高效、优化、可解释等优点，对于大规模复杂渲染任务的高效调度具有重要意义。

[0059] S103.在每个分布式渲染节点并行对对应的子渲染树进行布局和绘制，生成包含布局和样式信息的位图，作为子渲染结果，将多个分布式渲染节点生成的子渲染结果传输到合成服务节点，在合成服务节点将子渲染结果合成为完整的网页渲染结果位图，并进行图像压缩，将压缩后的渲染结果数据传输到用户终端浏览器，在用户终端浏览器接收并解压缩所述渲染结果数据，得到渲染结果位图，并显示给用户，供用户实时交互浏览。

[0060] 其中，在每个分布式渲染节点内部，采用流水线并行技术，将子渲染树的布局和绘制任务进一步拆分，并分配到多个GPU上并行处理。通过引入流水线并行，可以充分利用GPU的并行计算能力，同时通过流水线的调度和同步，最小化任务之间的依赖等待时间，进一步提高渲染效率。

[0061] 对于分配到每个GPU的布局和绘制任务，执行布局计算，确定每个渲染对象的几何信息，如位置、大小等；执行绘制操作，根据渲染对象的样式信息，生成像素级别的位图。将每个GPU生成的子区域位图进行合并，形成完整的子渲染结果，包含了子渲染树的所有渲染对象的布局和样式信息。将多个分布式渲染节点生成的子渲染结果传输到合成服务节点。合成服务节点负责将子渲染结果合成为完整的网页渲染结果。可选地，使用图像拼接算法，如基于特征点匹配的图像拼接算法，将子渲染结果位图按照其在渲染树中的空间位置关系，拼接为一幅完整的网页渲染结果位图。

[0062] 为了减小网络传输的数据量，对合成后的渲染结果位图进行图像压缩。采用无损压缩算法，如PNG编码，或有损压缩算法，如JPEG编码，在保证一定的图像质量的同时，尽可能降低图像数据的大小。

[0063] 将压缩后的渲染结果数据通过网络传输到用户终端浏览器。用户浏览器在接收到渲染结果数据后，进行解压缩处理，得到渲染结果位图，将其显示在浏览器窗口中，供用户实时交互浏览。用户可以通过鼠标、键盘等输入设备与渲染结果进行交互，如滚动页面、点击链接等，浏览器将用户的交互事件传递给云端的渲染服务，触发新一轮的渲染请求和渲染过程，实现实时的交互式Web渲染。

[0064] 在一种可选的实施例中，在每个分布式渲染节点并行对对应的子渲染树进行布局和绘制，生成包含布局和样式信息的位图，作为子渲染结果，将多个分布式渲染节点生成的子渲染结果传输到合成服务节点，在合成服务节点将子渲染结果合成为完整的网页渲染结果位图包括：
将多个分布式渲染节点生成的子渲染结果传输到合成服务节点，得到低分辨率的网页渲染预览图，同时进行高分辨率渲染的计算，将低分辨率的网页渲染预览图传输给用户终端进行显示，并在完成高分辨率渲染后，将生成的高分辨率子渲染结果位图划分为不同重要性的区域；
对不同重要性的区域采用不同的压缩参数进行压缩，将压缩后的区域数据及对应的压缩参数封装为传输帧，采用基于UDP的传输协议，根据子渲染结果位图的不同区域的重要性，调整区域传输帧的传输顺序和优先级；
将区域传输帧划分为多个子模块，按照优先级顺序将各个子模块发送到合成服务节点，合成服务节点接收各个子模块并进行解码渲染，得到最终高分辨率渲染结果的解码，将低分辨率的网页渲染预览图替换为对应的高分辨率渲染结果，最终生成完整的网页渲染结果位图。

[0065] 示例性地，首先，多个分布式渲染节点并行生成网页的子渲染结果，并将这些子渲染结果传输到合成服务节点。合成服务节点接收到子渲染结果后，对其进行合并和缩放，生成一个低分辨率的网页渲染预览图。该预览图作为初始渲染结果，可以快速传输给用户终端进行显示，提供即时的视觉反馈。同时，合成服务节点继续进行高分辨率渲染的计算，以生成最终的高质量网页渲染结果。

[0066] 在生成高分辨率渲染结果的过程中，合成服务节点对渲染结果进行区域划分，将其分为不同重要性的区域。区域的重要性可以根据其内容的语义信息、用户的关注点以及视觉显著性等因素综合确定。例如，网页中的关键内容区域、用户当前视口范围内的区域以及视觉上突出的区域可以被赋予较高的重要性。

[0067] 对于不同重要性的区域，合成服务节点采用不同的压缩参数进行压缩，以平衡传输效率和渲染质量。重要性高的区域使用较高的压缩质量和较低的压缩率，以保证关键内容的清晰度；而重要性低的区域则使用较低的压缩质量和较高的压缩率，以减小数据传输量。压缩后的区域数据与其对应的压缩参数被封装为传输帧。

[0068] 为了优化网络传输效率，合成服务节点采用基于UDP的传输协议，并根据子渲染结果位图的不同区域的重要性，调整区域传输帧的传输顺序和优先级。重要性高的区域传输帧被赋予更高的传输优先级，以确保关键内容能够尽快到达用户终端并显示。

[0069] 在传输过程中，区域传输帧被进一步划分为多个子模块，以适应网络条件的变化和传输中断的情况。子模块按照优先级顺序依次发送到合成服务节点。合成服务节点接收到子模块后，对其进行解码和渲染，逐步生成高分辨率渲染结果的不同部分。

[0070] 最后，当合成服务节点接收到所有子模块并完成解码渲染后，即可得到完整的高分辨率网页渲染结果。此时，低分辨率的网页渲染预览图被替换为对应的高分辨率渲染结果，呈现给用户最终的高质量网页渲染位图。

[0071] 在本实施例中，通过先传输和显示低分辨率的渲染预览图，用户可以尽快获得初步的渲染结果，提高了渲染响应速度，增强了用户体验。对高分辨率渲染结果中不同重要性区域采用不同压缩参数进行压缩，可以有效减小数据传输量，降低对网络带宽的占用。基于UDP的传输协议相比TCP协议有更低的时延和开销。同时根据区域重要性调整传输顺序和优先级，可以进一步优化网络传输效率。通过先传输重要区域的数据，用户终端可以先解码显示重要区域，随后逐步接收并显示其他区域，实现了渐进式的显示方式。先显示低分辨率预览图，后续逐步提高分辨率直至最终高分辨率，避免了长时间的白屏等待，提升了用户体验质量。采用多节点分布式渲染架构，可以实现良好的负载均衡和容错能力，提高了系统的稳定性和可靠性，实现了网页渲染的快速响应、带宽节省、传输优化和渐进式显示，能够提升用户体验、降低硬件成本、提高系统可扩展性。

[0072] 图2为本发明实施例基于分布式渲染的WEB浏览实时渲染系统的结构示意图，如图2所示，所述系统包括：
第一单元，用于接收来自用户终端浏览器的渲染请求，所述渲染请求包括请求渲染的目标网页的URL地址和用户终端的设备参数，根据渲染请求获取目标网页的页面数据并进行预处理，对预处理后的页面数据进行解析，得到页面的DOM树结构和CSSOM树结构，根据DOM树结构、CSSOM树结构以及设备参数，构建适配用户终端的渲染树；
第二单元，用于采用基于图的数据结构表示所述渲染树，渲染树的每个节点对应一个渲染对象，通过深度优先遍历算法遍历渲染树，将渲染树划分为多个子渲染树，每个子渲染树包含部分渲染对象，根据子渲染树的复杂度和云端渲染节点的负载情况，将多个子渲染树动态分发到多个云端的分布式渲染节点；
第三单元，用于在每个分布式渲染节点并行对对应的子渲染树进行布局和绘制，生成包含布局和样式信息的位图，作为子渲染结果，将多个分布式渲染节点生成的子渲染结果传输到合成服务节点，在合成服务节点将子渲染结果合成为完整的网页渲染结果位图，并进行图像压缩，将压缩后的渲染结果数据传输到用户终端浏览器，在用户终端浏览器接收并解压缩所述渲染结果数据，得到渲染结果位图，并显示给用户，供用户实时交互浏览。

[0073] 本发明实施例的第三方面，提供一种电子设备，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为调用所述存储器存储的指令，以执行前述所述的方法。

[0074] 本发明实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现前述所述的方法。

[0075] 本发明可以是方法、装置、系统和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于执行本发明的各个方面的计算机可读程序指令。

[0076] 最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。