页面渲染方法、装置及设备与流程

本申请涉及网络通信技术领域，尤其涉及页面渲染方法、装置及设备。

背景技术：

页面渲染就是客户端浏览器将HTML(Hyper Text Markup Language，超文本标记语言)代码根据预定义规则显示在浏览器窗口中的过程。客户端浏览器在渲染HTML页面时，需要从服务器获取用于进行页面渲染的各种资源，通过加载获取到的资源从而实现HTML页面渲染。相关技术中，可以将HTML文档框架按照不同功能分为多个HTML模块，在渲染任一HTML模块对应的HTML页面部分时，客户端浏览器以串行方式依次向服务器请求每个HTML模块的不同类型的资源，并在请求完每类资源后，通过手动调用JavaScript对这些资源进行加载，从而完成HTML页面部分的渲染。

但是，上述页面渲染过程需要对每个HTML模块的资源进行串行请求，因此资源获取速度较慢，并且由于采用手动调用JavaScript方式完成资源的加载，因此增加了资源加载时间，以上均导致HTML页面渲染的整体速度较慢。

技术实现要素：

本申请提供页面渲染方法、装置及设备，以解决现有页面渲染的整体速度较慢的问题。

根据本申请实施例的第一方面，提供一种页面渲染方法，所述方法应用在客户端设备上，包括：

当通过浏览器访问HTML页面时，遍历所述HTML页面的每个HTML模块的文件对象模型DOM节点；

在遍历到当前的目标HTML模块的目标DOM节点时，根据所述目标DOM节点中定义的属性信息，向服务器并行请求所述目标HTML模块的多个目标资源；

根据所述多个目标资源之间的关系渲染所述目标HTML模块。

根据本申请实施例的第二方面，提供一种页面渲染装置，所述装置应用在客户端设备上，所述装置包括：

遍历单元，用于当通过浏览器访问HTML页面时，遍历所述HTML页面的每个HTML模块的文件对象模型DOM节点；

请求单元，用于在遍历到当前的目标HTML模块的目标DOM节点时，根据所述目标DOM节点中定义的属性信息，向服务器并行请求所述目标HTML模块的多个目标资源；

渲染单元，用于根据所述多个目标资源之间的关系渲染所述目标HTML模块。

根据本申请实施例的第三方面，提供一种客户端设备，包括：

处理器；用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为：

当通过浏览器访问HTML页面时，遍历所述HTML页面的每个HTML模块的文件对象模型DOM节点；

在遍历到当前的目标HTML模块的目标DOM节点时，根据所述目标DOM节点中定义的属性信息，向服务器并行请求所述目标HTML模块的多个目标资源；

根据所述多个目标资源之间的关系渲染所述目标HTML模块。

应用本申请实施例访问HTML页面时，当遍历到HTML页面的任一目标HTML模块的目标DOM节点时，可以根据目标DOM节点中定义的属性信息，向服务器并行请求该目标HTML模块的多个目标资源，并根据多个目 标资源之间的关系渲染该目标HTML模块。由于本申请实施例在渲染每个HTML模块时，通过预先定义的DOM节点的属性信息并行请求该HTML模块的所有资源，因此资源获取速度较快，并且在获取到所有资源后可以自动加载这些资源，因此节省了资源加载时间，从而从整体上提升了HTML页面的渲染速度。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1为本申请页面渲染方法的一个实施例流程图；

图2为应用本申请实施例进行页面渲染的一个场景示意图；

图3为本申请页面渲染方法的另一个实施例流程图；

图4为本申请页面渲染装置所在客户端设备的一种硬件结构图；

图5为本申请页面渲染装置的一个实施例框图；

图6为本申请页面渲染装置的另一个实施例框图。

具体实施方式

在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第 二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

参见图1，为本申请页面渲染方法的一个实施例流程图，该实施例可以应用在客户端设备，包括如下步骤：

步骤101：当通过浏览器访问HTML页面时，遍历HTML页面的每个HTML模块的DOM节点。

本实施例中，当用户在客户端设备上启动浏览器，并要通过浏览器访问HTML页面时，可以先将该HTML页面划分为多个HTML模块，例如，可以将HTML页面按照不同功能划分为多个父HTML模块，进一步，对于任一父HTML模块，也可以将该父HTML模块划分为多个子HTML模块。其中，在划分HTML页面的HTML模块时，可以基于HTML页面的不同功能进行划分，例如，可以将HTML页面上的图片显示区域、视频显示区域和文本显示区域分别划分为不同的HTML模块，进一步，也可以将文本显示区域中的文本内容固定区域和文本内容变化区域划分为不同的HTML模块。

对于所划分的每个HTML模块，可以通过WEB原生布局定义该HTML模块的DOM节点，DOM节点用于标记对应的HTML模块在HTML页面中的区域，并且可以在DOM节点上添加属性信息，该属性信息中包含HTML模块的多个资源的资源路径，比如服务器上存储资源的地址或者端口等。

基于对HTML页面的划分，每个HTML页面包含了多个HTML模块，此时客户端设备开始遍历每个HTML模块的DOM节点，对于遍历到的每个DOM节点客户端设备执行相同的操作。因此为了描述方便，将当前遍历到的HTML模块称为目标HTML模块，将该目标HTML模块的DOM节点称为目标DOM节点。

步骤102：在遍历到当前的目标HTML模块的目标DOM节点时，根据目标DOM节点中定义的属性信息，向服务器并行请求目标HTML模块的多个目标资源。

本步骤中，在遍历到当前的目标HTML模块的目标DOM节点时，可以读取目标DOM节点的属性信息，获得该目标HTML模块的多个目标资源的资源路径，然后按照每个目标资源的资源路径，通过调用JavaScript向服务器并行发送用于获取这些目标资源的资源请求。其中资源可以包括：HTML文件，CSS(Cascading Style Sheets，级联样式表)文件，JS(JavaScript)文件，JSON(JavaScript Object Notation，JS对象标记)数据等。

步骤103：根据多个目标资源之间的关系渲染目标HTML模块。

在向服务器并行发送多个资源请求，以请求多个目标资源后，本步骤中可以为每个资源请求设置请求状态，该请求状态用于标记是否已获取到对应的目标资源。当根据设置的请求状态确定已经获取到所有的目标资源时，可以按照这些目标资源之间的依赖关系依次加载这些目标资源后，合成目标HTML模块，最后将合成后的HTML模块添加到其目标DOM节点中，从而完成该目标HTML模块的渲染。由此可知，当遍历完所有HTML模块的DOM节点，并完成对所有HTML模块的渲染后，即可完成对整个HTML页面的渲染。

其中，在按照目标资源之间的依赖关系依次加载目标资源时的加载过程与现有技术中一致，例如，当目标资源包括HTML文件，CSS文件，JS文件，JSON数据时，则先根据HTML文件加载出HTML文档框架，然后通过JS文件修改该HEML文档框架，最后通过CSS文件和JSON数据对HTML文档框架进行进一步修改，从而渲染出目标HTML模块对应的HTML页面部分。

由上述实施例可见，该实施例中在渲染每个HTML模块时，通过预先定义的DOM节点的属性信息并行请求该HTML模块的所有资源，因此资源获取速度较快，并且在获取到所有资源后可以自动加载这些资源，因此节省了资源加载时间，从而从整体上提升了HTML页面的渲染速度。

参见图2，为应用本申请实施例实现页面渲染的一个场景示意图，图2以渲染OPOA(One Page One Application，单页面应用)的HTML页面为例 进行描述：

图2中包括了用于加载HTML页面的客户端设备侧，通常可以指配置了浏览器的手机、平板电脑、PC等；以及提供用于加载HTML页面的各种资源的服务器侧，该服务器侧可以部署分布式服务器，例如，CDN(Content Delivery Network，内容分发网络)服务器。

本实施例中，OPOA指一个WEB页面就是一个应用，OPOA首次加载时，所有HTML文档会传输到WEB浏览器，当用户访问OPOA中的一个独立HTML页面时，该HTML页面会在当前WEB页中加载。如图2中，假设一个OPOA包括n个HTML页面，则每个HTML页面的渲染过程均可以应用本申请实施例提供的方案实现。以图2中示出的HTML页面2为例，该HTML页面2划分为m个HTML模块，每个HTML模块的资源均存储在服务器侧，每个HTML模块的渲染过程均一致，以HTML模块2为例，在获取HTML模块2的资源时，客户端设备向服务器并行发送资源请求，并在获取到包括HTML文件、JS文件、CSS文件和JSON数据的所有资源后，利用这些资源之间的依赖关系渲染出去HTML模块2对应的HTML页面2的相应部分。下面将结合图2示出的场景示意图，通过图3示出的实施例对本申请页面渲染过程进行详细描述。

参见图3，为本申请页面渲染方法的另一个实施例流程图，该实施例可以应用在客户端设备，包括以下步骤：

步骤301：当通过浏览器访问HTML页面时，将该HTML页面划分为多个HTML模块。

本申请实施例中，当用户在客户端设备上启动浏览器，并要通过浏览器访问HTML页面时，可以先将该HTML页面划分为多个HTML模块，例如，可以将HTML页面按照不同功能划分为多个父HTML模块，进一步，对于任一父HTML模块，也可以将该父HTML模块划分为多个子HTML模块。结合图2所示，HTML页面2被划分为m个HTML模块，这m个HTML模块可以包括父HTML模块，和/或子HTML模块。

本实施例中，在划分HTML页面的HTML模块时，可以基于HTML页面的不同功能进行划分，例如，可以将HTML页面上的图片显示区域、视频显示区域和文本显示区域分别划分为不同的HTML模块，进一步，也可以将文本显示区域中的文本内容固定区域和文本内容变化区域划分为不同的HTML模块；另外，对于图2中示出的OPOA，不同HTML页面可能包含部分相同的页面内容，例如，在渲染HTML页面1时，将HTML页面1划分为了若干HTML模块，如果将HTML页面2所划分的某个HTML模块与HTML页面1中所划分的某个HTML模块的页面内容相同，则在渲染HTML页面2时，可以仅渲染除该HTML模块外的其他HTML模块，从而可以进一步节约HTML页面2的渲染时间和渲染资源，对此本申请实施例不进行限制。

步骤302：通过WEB原生布局定义每个HTML模块的DOM节点的属性信息。

原生(Native)开发一般是指用原生开发语言开发，原生开发语言就是开发整个系统时使用的编程语言；DOM是一种以面向对象方式描述的文档模型，也是页面上数据和结构的树形表示方式，DOM定义了表示和修改文档所需要的对象、对象的行为和属性、以及对象之间的关系。

本实施例中，在将HTML页面划分为多个HTML模块后，对于每个HTML模块，可以通过WEB原生布局定义该HTML模块的DOM节点，DOM节点用于标记对应的HTML模块在HTML页面中的区域，并且可以在DOM节点上添加属性信息，该属性信息中包含HTML模块的多个资源的资源路径，比如服务器上存储资源的地址或者端口等；进一步，还可以在DOM节点上定义HTML模块的名称等其他信息。结合图2可知，对于HTML页面2的HTML模块2，可以在为该HTML模块2定义的DOM节点中添加属性信息，该属性信息中包括了HTML模块2的HTML文件、JS文件、CSS文件和JSON数据在服务器侧存储的资源路径。

步骤303：遍历HTML模块的每个HTML模块的DOM节点。

基于对HTML页面的划分，每个HTML页面包含了多个HTML模块，此时客户端设备开始遍历每个HTML模块的DOM节点，对于遍历到的每个DOM节点客户端设备执行相同的操作。因此为了描述方便，后续将当前遍历到的HTML模块称为目标HTML模块，将该目标HTML模块的DOM节点称为目标DOM节点。

步骤304：在遍历到当前的目标HTML模块的目标DOM节点时，读取目标DOM节点的属性信息，获得目标HTML模块的多个目标资源的资源路径。

以图2中的HTML模块2为目标HTML模块为例，假设当前遍历到HTML模块2的DOM节点，则可以读取步骤302中定义的DOM节点的属性信息，获取HTML模块2的HTML文件、JS文件、CSS文件和JSON数据的资源路径。

步骤305：按照每个目标资源的资源路径，通过调用JavaScript向服务器并行发送用于获取目标资源的资源请求。

本实施例中可以利用能够由浏览器直接解释运行的高级脚本语言，在浏览器中渲染HTML页面时，例如，高级脚本语言可以是JavaScript，JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。

结合步骤304中的描述，在获取到HTML模块2的HTML文件、JS文件、CSS文件和JSON数据的资源路径后，客户端设备可以按照上述资源路径并行发送HTML文件的资源请求、JS文件的资源请求、CSS文件的资源请求、以及JSON数据的资源请求。

步骤306：为每个资源请求设置请求状态，该请求状态用于标记是否已获取到对应的目标资源。

在向服务器并行发送多个资源请求，以请求多个目标资源后，本步骤中可以为每个资源请求设置请求状态，该请求状态用于标记是否已获取到对应的目标资源，例如，当还未获取到某个目标资源，则该目标资源的请求状态为“等待”，当已获取到某个目标资源，则该目标资源的请求状态为“完成”。

步骤307：当根据设置的请求状态确定获取到所有目标资源时，按照目标资源之间的依赖关系依次加载目标资源后，合成目标HTML模块。

仍然以图2中的HTML模块2为例，当所设置的HTML文件的资源请求、JS文件的资源请求、CSS文件的资源请求、以及JSON数据的资源请求的状态均为“完成时”，可以确定获取到HTML模块2的所有资源。

本步骤中，按照资源之间的依赖关系加载HTML模块2的过程与现有技术中一致，可以包括：先根据HTML文件加载出HTML模块2的HTML文档框架，然后通过JS文件修改该HEML文档框架，最后通过CSS文件和JSON数据对HTML文档框架进行进一步修改，从而渲染出目标HTML模块对应的HTML页面部分。

步骤308：将目标HTML模块添加到目标DOM节点中，完成目标HTML模块的渲染。

步骤309：判断是否遍历完所有HTML模块的DOM节点，若是，则执行步骤310；否则，返回步骤303。

步骤310：确定完成HTML页面的渲染，结束当前流程。

在通过循环执行前述步骤303至步骤309，遍历完所有HTML模块的DOM节点，并完成了所有HTML模块的渲染后，即可在浏览器上加载出完整的HTML页面。

由上述实施例可见，该实施例中在渲染每个HTML模块时，通过预先定义的DOM节点的属性信息并行请求该HTML模块的所有资源，因此资源获取速度较快，并且在获取到所有资源后可以自动加载这些资源，因此节省了资源加载时间，从而从整体上提升了HTML页面的渲染速度。

与本申请页面渲染方法的实施例相对应，本申请还提供了页面渲染装置及客户端设备的实施例。

本申请页面渲染装置的实施例可以应用在安装有浏览器的各种客户端设备上，例如，该客户端设备可以包括手机、平板电脑、PC等。其中，装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软 件实现为例，作为一个逻辑意义上的装置，是通过其所在客户端设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图4所示，为本申请页面渲染装置所在客户端设备的一种硬件结构图，除了图4所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的客户端设备通常根据该设备的实际功能，还可以包括其他硬件，图4中不再一一示出。

参见图5，为本申请页面渲染装置的一个实施例框图：

该装置包括：遍历单元510、请求单元520和渲染单元530。

其中，遍历单元510，用于当通过浏览器访问HTML页面时，遍历所述HTML页面的每个HTML模块的文件对象模型DOM节点；

请求单元520，用于在遍历到当前的目标HTML模块的目标DOM节点时，根据所述目标DOM节点中定义的属性信息，向服务器并行请求所述目标HTML模块的多个目标资源；

渲染单元530，用于根据所述多个目标资源之间的关系渲染所述目标HTML模块。

参见图6，为本申请页面渲染装置的另一个实施例框图：

该装置包括：划分单元610、定义单元620、遍历单元630、请求单元640、渲染单元650和判断单元660和确定单元670。

其中，划分单元610，用于将所述HTML页面划分为多个HTML模块；

定义单元620，用于通过WEB原生布局定义每个HTML模块的DOM节点的属性信息，所述DOM节点用于标记HTML模块在所述HTML页面中的区域，所述属性信息中包含HTML模块的多个资源的资源路径；

遍历单元630，用于当通过浏览器访问HTML页面时，遍历所述HTML页面的每个HTML模块的文件对象模型DOM节点；

请求单元640，用于在遍历到当前的目标HTML模块的目标DOM节点时，根据所述目标DOM节点中定义的属性信息，向服务器并行请求所述目标HTML模块的多个目标资源；

渲染单元650，用于根据所述多个目标资源之间的关系渲染所述目标HTML模块；

判断单元660，用于判断是否遍历完所有HTML模块的DOM节点；

确定单元670，用于若遍历完所有HTML模块的DOM节点，则确定完成所述HTML页面的渲染。

在一个可选的实现方式中，所述请求单元640可以包括(图6中未示出)：

信息读取子单元，用于读取所述目标DOM节点的属性信息，获得所述目标HTML模块的多个目标资源的资源路径；

请求发送子单元，用于按照每个目标资源的资源路径，通过调用JavaScript向服务器并行发送用于获取所述目标资源的资源请求。

在另一个可选的实现方式中，所述渲染单元650可以包括(图6中未示出)：

状态设置子单元，用于为每个资源请求设置请求状态，所述请求状态用于标记是否已获取到对应的目标资源；

模块合成子单元，用于当根据设置的请求状态确定获取到所有目标资源时，按照所述目标资源之间的依赖关系依次加载所述目标资源后，合成所述目标HTML模块；

模块添加单元，用于将所述HTML模块添加到所述目标DOM节点中，完成所述目标HTML模块的渲染。

在另一个可选的实现方式中，所述HTML页面的每个HTML模块，包括：

对所述HTML页面划分得到的多个父HTML模块；和/或，

对任一父HTML模块划分得到的多个子HTML模块。

上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的， 其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

由上述实施例可见，在应用本申请实施例渲染每个HTML模块时，通过预先定义的DOM节点的属性信息并行请求该HTML模块的所有资源，因此资源获取速度较快，并且在获取到所有资源后可以自动加载这些资源，因此节省了资源加载时间，从而从整体上提升了HTML页面的渲染速度。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。