CN113377373A - 基于解析引擎的页面加载方法、装置、计算机设备及介质 - Google Patents

Abstract

本申请实施例属于页面渲染领域，涉及一种基于解析引擎的页面加载方法，包括构建解析引擎，通过解析引擎提取加载页面所需的数据结构，并将数据结构解析为DOM树结构，根据DOM树结构中节点的节点信息，得到节点的组件类型，将组件类型匹配到解析引擎中的引擎组件，通过组件类型获取到引擎组件对应的页面资源，根据页面资源渲染引擎组件，加载出目标页面。本申请还提供一种基于解析引擎的页面加载装置、计算机设备及介质。此外，本申请还涉及区块链技术，页面资源可存储于区块链中。本申请可以直接根据获取到的数据结构来加载页面，避免页面及页面交互在变化时需要对应地更改实现逻辑，提高开发效率的同时提高工作效率，降低成本。

Description

基于解析引擎的页面加载方法、装置、计算机设备及介质

技术领域

本申请涉及页面渲染技术领域，尤其涉及一种基于解析引擎的页面加载方法、装置、计算机设备及介质。

背景技术

随着智能终端和移动互联网的发展，越来越多的资讯信息能够展示在终端，供用户浏览新闻、体育、娱乐、商品等。这种能够在终端展示某个页面的应用通常利用前端渲染解析引擎对数据内容进行渲染，从而展示给用户。但是传统的前端渲染解析引擎的开发模式，需要根据生成页面的实现逻辑对应来编写组件和页面，使得前端研发的整体工作效率难以提升，运营成本居高不下，进而影响客户满意度。

发明内容

本申请实施例的目的在于提出一种基于解析引擎的页面加载方法、装置、计算机设备及介质，以解决相关技术中前端开发需要根据生成页面的实现逻辑对应来编写组件和页面，造成前端研发的整体工作效率低且运营成本高的技术问题。

为了解决上述技术问题，本申请实施例提供一种基于解析引擎的页面加载方法，采用了如下所述的技术方案：

构建解析引擎，通过所述解析引擎提取加载页面所需的数据结构，并将所述数据结构解析为DOM树结构；

基于所述DOM树结构的根节点开始，依次遍历所述DOM树结构中的节点所述DOM树结构中节点，获得所述节点的节点信息，根据所述节点信息得到所述节点的组件类型；

根据预先设置的所述组件类型与所述解析引擎中引擎组件的对应关系，将所述组件类型匹配到所述解析引擎中的引擎组件；

通过所述组件类型获取到与所述引擎组件对应的页面资源，根据所述页面资源渲染所述引擎组件，加载出所述目标页面。

进一步的，所述将所述数据结构解析为DOM树结构的步骤包括：

通过所述解析引擎对所述数据结构进行解析，从所述数据结构中获取各个组件的层级关系；

根据所述层级关系确定各个所述组件之间的父子关系以及同级关系，根据所述同级关系和所述父子关系生成所述DOM树结构。

进一步的，所述通过所述组件类型获取到所述引擎组件对应的页面资源，根据所述页面资源渲染所述引擎组件，加载出所述目标页面的步骤包括：

根据所述组件类型查询到与所述组件类型对应的所述节点的页面资源；

将所述页面资源传输给与所述组件类型对应的所述引擎组件，并渲染至页面。

进一步的，所述根据所述组件类型查询到与所述组件类型对应的所述节点的页面资源的步骤包括：

根据所述组件类型，获取到与所述组件类型对应的节点的布局数据和内容数据；

基于所述内容数据和所述布局数据生成所述页面资源。

进一步的，所述将所述页面资源传输给与所述组件类型对应的所述引擎组件，并渲染至页面的步骤包括：

将所述页面资源输入至所述引擎组件，根据所述页面资源的所述内容数据和所述布局数据生成页面渲染文件；

根据所述页面渲染文件进行页面渲染，逐一将所述引擎组件绘制到显示界面上，得到所述目标页面。

进一步的，在所述根据所述组件类型查询到与所述组件类型对应的所述节点的页面资源的步骤之后还包括：

解析所述页面资源的资源权限。

进一步的，所述解析所述页面资源的资源权限的步骤包括：

通过所述解析引擎解析所述各个所述节点对应的所述引擎组件之间的逻辑关系；

根据所述逻辑关系得到与所述引擎组件绑定的所述页面资源。

为了解决上述技术问题，本申请实施例还提供一种基于解析引擎的页面加载装置，采用了如下所述的技术方案：

构建解析模块，用于构建解析引擎，通过所述解析引擎提取加载页面所需的数据结构，并将所述数据结构解析为DOM树结构；

获取模块，用于基于所述DOM树结构的根节点开始，依次遍历所述DOM树结构中的节点，获得所述节点的节点信息，根据所述节点信息得到所述节点的组件类型；

匹配模块，用于根据预先设置的所述组件类型与所述解析引擎中引擎组件的对应关系，将所述组件类型匹配到所述解析引擎中的引擎组件；

渲染模块，用于通过所述组件类型获取到与所述引擎组件对应的页面资源，根据所述页面资源渲染所述引擎组件，加载出所述目标页面。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：

该计算机设备包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上所述的基于解析引擎的页面加载方法的步骤。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：

所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上所述的基于解析引擎的页面加载方法的步骤。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请通过构建解析引擎，通过解析引擎提取加载页面所需的数据结构，并将数据结构解析为DOM树结构，基于DOM树结构的根节点开始，依次遍历DOM树结构中的节点，获得所述节点的节点信息，根据节点信息得到与节点对应的组件类型，根据预先设置的组件类型与解析引擎中引擎组件的对应关系，将组件类型匹配到解析引擎中的引擎组件，通过组件类型获取到与引擎组件对应的页面资源，并根据页面资源渲染引擎组件，加载出目标页面；本申请通过构建的解析引擎提取页面加载所需的数据结构，并通过解析引擎对数据结构进行解析，得到加载页面的页面资源，可以直接根据获取到的数据结构来加载页面，避免页面及页面交互在变化时需要对应地更改实现逻辑，提高开发效率的同时提高工作效率，降低成本。

附图说明

为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请可以应用于其中的示例性系统架构图；

图2根据本申请的基于解析引擎的页面加载方法的一个实施例的流程图；

图3是图2中步骤S201的一种具体实施方式的流程图；

图4是根据本申请的基于解析引擎的页面加载装置的一个实施例的结构示意图；

图5是根据本申请的计算机设备的一个实施例的结构示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

为了解决相关技术中前端开发需要根据生成页面的实现逻辑对应来编写组件和页面，造成前端研发的整体工作效率低且运营成本高的问题，本申请提供了一种基于解析引擎的页面加载方法，可以应用于如图1所示的系统架构100中，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。

需要说明的是，本申请实施例所提供的基于解析引擎的页面加载方法一般由终端设备执行，相应地，基于解析引擎的页面加载装置一般设置于终端设备中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的基于解析引擎的页面加载的方法的一个实施例的流程图，包括以下步骤：

步骤S201，构建解析引擎，通过解析引擎提取加载页面所需的数据结构，并将数据结构解析为DOM树结构。

前端渲染解析引擎有很多框架，而且形式和内容在不断发生变化。这些演变的背后是设计模式的变化，而归根到底是功能划分逻辑的演变：MVC(Model-View-Controller，模型-视图-控制器)→MVP(Model-View-Presenter，模型-视图-控制交互层)→MVVM(Model-View-ViewModel，模型-视图-视图模型层)，近几年兴起的React、Vue、Angular等框架都属于MVVM模式，可以实现界面渲染、事件绑定、路由分发等复杂功能。

在本实施例中，解析引擎的作用是基于上述框架的基础上针对设计器生成的数据结构进行解析，将其命名为BOYA解析引擎，BOYA解析引擎中包含界面渲染引擎功能、事件流绑定及解析引擎功能、路由分发引擎功能、变量解析引擎功能、区块权限解析引擎功能以及国际化解析引擎功能等，各功能之间可以进行数据交互。

在本实施例中，数据结构为整个页面的数据结构，包含事件流、组件树节点信息以及资源，可以通过设计器拖拽组件组成页面生成。

DOM树结构(Document Object Mode，文档对象模型)为虚拟DOM树结构，虚拟DOM树结构只有BOYA解析引擎才能识别并进行解析。

在本实施例的一些可选的实现方式中，参见图3所示，将数据结构解析为DOM树结构的步骤具体包括：

步骤S301，通过解析引擎对数据结构进行解析，从数据结构中获取各个组件的层级关系。

层级关系即将数据根据逻辑关系一层一层建立起来的联系。举例说明，假设有一段数据结构如下所示：

从中可以看出，第一层为layout，第二层为title、device-width和content，第三层为id、type、width、height、background-color和text。在对这个数据结构进行解析时，获取到“layout”组件，根据逻辑关系，解析到“layout”组件的下层组件有“title”组件、“device-width”组件以及“content”组件，“content”组件的下层组件有“id”组件、“type”组件、“width”组件、“height”组件、“background-color”组件以及“text”组件。

步骤S302，根据层级关系确定各个组件之间的父子关系以及同级关系，根据同级关系和父子关系生成DOM树结构。

在本实施例中，根据层级关系确定各个组件之间父子关系以及同级关系，进而生成虚拟DOM树结构，即一个组件对应一个节点。

DOM树结构是网页页面中用来表示文档中对象的标准模型，将文档中的对象组织在一个树形结构中。DOM树结构中的节点彼此拥有层级关系，可以采用父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。其中，父节点拥有子节点，同级的子节点被称为同胞(兄弟或姐妹)。在节点树中，顶端节点被称为根(root)，每个节点都有父节点、除了根(它没有父节点)。一个节点可拥有任意数量的子节点，同级是拥有相同父节点的节点。

网页页面由多个组件构成，如文字组件、图片组件、横向布局组件、纵向布局组件、视频组件等等，该多个组件参考万维网联盟(World Wide Web Consortium，W3C)的DOM标准定义了页面的组成方法，也就是说可以将每个组件视为一个节点，组成一棵树形结构，该树形结构成为DOM树结构。

本实施例中将数据结构解析成DOM树结构，可以将加载页面所需的数据按照逻辑关系进行表示，方便获取页面对象。

步骤S202，基于DOM树结构的根节点开始，依次遍历DOM树结构中的节点，获得节点的节点信息，根据节点信息得到节点的组件类型。

在本实施例中，DOM树结构包含多个节点，节点包含有节点信息，一个节点对应一个组件，则节点信息为组件信息，包括组件类型uiComponentType、样式属性、组件属性等，根据DOM树结构中的节点信息可以快速获取到节点的组件类型uiComponentType，uiComponentType为组件的唯一标识。

在一些可选的实现方式中，可以按照预设遍历规则依次遍历DOM树结构中的节点，比如，基于DOM树结构的根节点开始遍历，按照从上至下规则对DOM树结构中的每一节点进行逐一遍历，从上至下规则为将同一级别层的兄弟节点都遍历后，再向下遍历下一级别层中的兄弟节点；再比如，可以基于DOM树结构的根节点开始，对于每个节点，都在遍历该节点后，下一步遍历该节点的子节点。

步骤S203，根据预先设置的组件类型与解析引擎中引擎组件的对应关系，将组件类型匹配到解析引擎中的引擎组件。

在本实施例中，组件类型uiComponentType为组件的唯一标识，获取到uiComponentType后，将其与解析引擎中的引擎组件进行匹配，引擎组件包括但不限于栅格组件，表格组件，按钮组件，面板组件，卡片组件，步骤条组件，输入框组件，下拉框组件，日期选择器组件、文字组件、图片组件、横向布局组件、纵向布局组件、视频组件等。

在本实施例中，预先设置数据结构中的组件类型与解析引擎中引擎组件之间的对应关系，根据对应关系，将组件类型映射为解析引擎中的引擎组件，从而将组件类型匹配到解析引擎中的引擎组件。

举例说明，组件为按钮组件，解析引擎先识别出数据结构中的按钮组件挂在页面下，然后识别按钮组件对应的uiComponentType为button，将button匹配到引擎组件库中按钮，通过解析引擎的界面渲染引擎功能将按钮渲染至页面。

解析引擎中不同引擎功能的使用可以根据页面加载过程中页面的事件决定，不同引擎功能的使用顺序则根据事件流来决定。事件是用户或浏览器自身执行的某种动作，如click，load和mouseover都是事件的名字；事件流则描述的就是从页面中接收事件的顺序。

步骤S204，通过组件类型获取到引擎组件对应的页面资源，根据页面资源渲染所述引擎组件，加载出所述目标页面。

具体地，根据组件类型查询到与组件类型对应的节点的页面资源，将页面资源传输给与组件类型对应的引擎组件，通过解析引擎的界面渲染引擎功能将引擎组件逐一进行绘制到显示界面上，以生成目标页面，实现目标页面的加载。

其中，界面渲染引擎功能可以实现组件绘制的功能，在一种具体的实现方式中，该界面渲染引擎功能可以为JavaScript脚本语言框架，该JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页页面添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

DOM树结构中每一个节点保存有组件对应的页面资源，页面资源包括各个组件的布局数据和内容数据，布局数据包括组件的位置信息和属性数据，位置信息为组件在当前页面中的位置信息，根据位置信息可以得到各个组件之间的嵌套关系；属性数据包括样式属性和组件属性，样式属性为数据内容的显示样式，包括颜色、大小、位置等；组件属性包括字段、动作、字段规则、联动规则以及组件状态等。

组件类型为组件的唯一标识，由于预先设置数据结构中的组件类型与解析引擎中引擎组件之间的对应关系，基于对应关系，根据组件类型可以获得与节点对应的引擎组件，从而将节点中的页面资源传输给引擎组件。

需要强调的是，为进一步保证页面资源的私密和安全性，上述页面资源还可以存储于一区块链的节点中。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

在本实施例的一些可选的实现方式中，根据组件类型查询到与组件类型对应的节点的页面资源的步骤具体包括：

根据组件类型，获取到与组件类型对应的节点的布局数据和内容数据；

基于内容数据和布局数据生成页面资源。

具体地，DOM树结构中的每一个节点中都保存有该节点对应的内容数据和布局数据，根据组件类型可以查询到与组件类型对应的节点，获取到节点中布局数据和内容数据，基于内容数据和布局数据生成页面资源，将页面资源作为参数传输给相应的引擎组件，由解析引擎的界面渲染引擎功能按照布局数据和内容数据逐一绘制出引擎组件，从而将引擎组件渲染至页面。

比如，根据组件类型查询到DOM树结构中的自定义节点CustomView组件，可以从CustomView组件中得到该组件的布局数据和内容数据，并将根据布局数据和内容数据生成的页面资源传输给CustomView组件。

本实施例中根据节点与引擎组件的对应关系来获取页面资源，可以提高获取加载页面数据的效率。

在本实施例的一些可选的实现方式中，将页面资源传输给与组件类型对应的引擎组件，并渲染至页面的步骤具体包括：

将页面资源输入至引擎组件，根据页面资源的内容数据和布局数据生成页面渲染文件；

根据页面渲染文件进行页面渲染，逐一将引擎组件绘制到显示界面上，得到目标页面。

引擎组件是网页页面的组成构件，展现出引擎组件之后，就可以展示出网页页面。根据组件类型查询到DOM树结构中对应的节点，对DOM树结构中的节点进行遍历解析，得到可以编译的代码文件，即页面渲染文件，解析引擎的界面渲染引擎功能根据页面渲染文件进行页面渲染，逐一将引擎组件绘制到显示界面上，就可以加载出目标页面。

本实施例通过将页面资源传输给节点对应的引擎组件进行渲染，可以将获取到的数据结构进行页面加载，不再需要编写与之对应的实现逻辑，进一步提高页面开发效率。

本申请通过构建解析引擎，通过解析引擎提取加载页面所需的数据结构，并将数据结构解析为DOM树结构，基于DOM树结构的根节点开始，依次遍历DOM树结构中的节点，获得节点的节点信息，根据节点信息得到与节点对应的组件类型，根据预先设置的组件类型与解析引擎中引擎组件的对应关系，，将组件类型匹配到解析引擎中的引擎组件，通过组件类型获取到引擎组件对应的页面资源，并根据页面资源渲染引擎组件，加载出目标页面；本申请通过构建的解析引擎提取页面加载所需的数据结构，并通过解析引擎对数据结构进行解析，得到加载页面的页面资源，可以直接根据获取到的数据结构来加载页面，避免页面及页面交互在变化时需要对应地更改实现逻辑，提高开发效率的同时提高工作效率，降低成本。

在本实施例的一些可选的实现方式中，在根据组件类型查询到与组件类型对应的节点的页面资源的步骤之后，还可以执行以下步骤：

解析页面资源的资源权限。

具体地，通过解析引擎中的权限解析引擎功能在账号进行登录时，对不同账号对应的角色需要显示的页面资源的权限进行解析，可以控制节点对应的引擎组件的显示或者隐藏。在本实施例中，页面资源中的组件属性中就定义了组件的显示或者隐藏。比如，同一个页面，张三可以看见查询按钮，李四不能看见查询按钮。

需要说明的是，如若在账号没有登录时进行页面加载，通过解析引擎提取未登录账号时页面加载所需的数据结构，此时，则不需要进行资源权限分析。

在一种具体的实现方式中，解析页面资源的资源权限还包括处理页面资源的绑定关系，具体地，在页面加载时，通过解析引擎的事件流解析引擎功能，解析页面中各节点对应的引擎组件之间的逻辑关系，根据所述逻辑关系得到与所述引擎组件绑定的页面资源。

例如，点击按钮调后端接口查询服务列表，返回的数据通过表格显示至界面。解析引擎的事件流解析引擎功能先解析出按钮触发点击，再通过对应的服务方法调用后端接口，通过解析引擎的事件流引擎功能将返回数据赋值至表格，通过解析引擎的渲染引擎功能同步渲染至页面。

可选地，可以确定后端返回的数据是否为页面展示所需的数据结构，具体地，通过解析引擎的变量解析引擎功能，将数据解析为所需的数据结构。如：后端返回的数据为0，前端展示为失效，变量解析引擎功能会将数据0转换为失效进行展示。

本实施例中的解析引擎在页面运行的同时，可以根据后端返回数据对应的不同语言，通过解析引擎的国际化渲染引擎功能，显示不同国际化语言至页面。

具体地，每一个网页页面对应一个HTML(Hyper Text Makeup Language，超文本标记语言)文件，针对每一国语言编写一个XML文件，将HTML文件中语言字符串抽离并通过索引与各XML文件中的字符串关联，在加载网页页面或切换语言时，通过解析引擎的国际化渲染引擎功能，根据后端返回数据对应的不同语言，从对应国语言的XML文件中通过索引替换HTML文件中的字符串，进而显示不同国际化语言至页面。

本申请通过解析页面资源的资源权限，可以保证页面资源的安全性以及管理的规范性。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步参考图4，作为对上述图2所示方法的实现，本申请提供了一种基于解析引擎的页面加载装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图4所示，本实施例所述的基于解析引擎的页面加载装置400包括：构建模块401、获取模块402、匹配模块403以及渲染模块404。其中：

构建解析模块401用于构建解析引擎，通过所述解析引擎提取加载页面所需的数据结构，并将所述数据结构解析为DOM树结构；

获取模块402用于基于所述DOM树结构的根节点开始，依次遍历所述DOM树结构中的节点，获得所述节点的节点信息，根据所述节点信息得到所述节点的组件类型；

匹配模块403用于根据预先设置的所述组件类型与所述解析引擎中引擎组件的对应关系，将所述组件类型匹配到所述解析引擎中的引擎组件；

渲染模块404用于通过所述组件类型获取到所述引擎组件对应的页面资源，根据所述页面资源渲染所述引擎组件，加载出所述目标页面。

需要强调的是，为进一步保证页面资源的私密和安全性，上述页面资源还可以存储于一区块链的节点中。

上述的基于解析引擎的页面加载装置，通过构建解析引擎，通过解析引擎提取加载页面所需的数据结构，并将数据结构解析为DOM树结构，基于DOM树结构的根节点开始，依次遍历DOM树结构中的节点，获得所述节点的节点信息，根据节点信息得到与节点对应的组件类型，根据预先设置的组件类型与解析引擎中引擎组件的对应关系，将组件类型匹配到解析引擎中的引擎组件，通过组件类型获取到与引擎组件对应的页面资源，并根据页面资源渲染引擎组件，加载出目标页面；本申请通过构建的解析引擎提取页面加载所需的数据结构，并通过解析引擎对数据结构进行解析，得到加载页面的页面资源，可以直接根据获取到的数据结构来加载页面，避免页面及页面交互在变化时需要对应地更改实现逻辑，提高开发效率的同时提高工作效率，降低成本。

在本实施例中，构建解析模块401进一步用于：

通过所述解析引擎对所述数据结构进行解析，从所述数据结构中获取各个组件的层级关系；

根据所述层级关系确定各个所述组件之间的父子关系以及同级关系，根据所述同级关系和所述父子关系生成所述DOM树结构。

本实施例中将数据结构解析成DOM树结构，可以将加载页面所需的数据按照逻辑关系进行表示，方便获取页面对象。

在本实施例中，渲染模块404包括获取小模块和渲染小模块，获取小模块用于根据所述组件类型查询到与所述组件类型对应的所述节点的页面资源；渲染小模块用于将所述页面资源传输给与所述组件类型对应的所述引擎组件，并渲染至页面。

在本实施例的一些可选的实现方式中，获取小模块进一步用于：

根据所述组件类型，获取到与所述组件类型对应的节点的布局数据和内容数据；

基于所述内容数据和所述布局数据生成所述页面资源。

本实施例中根据节点与引擎组件的对应关系来获取页面资源，可以提高获取加载页面数据的效率。

在本实施例的一些可选的实现方式中，渲染小模块包括传输单元和渲染单元，传输单元用于将所述页面资源输入至所述引擎组件，根据所述页面资源的所述内容数据和所述布局数据生成页面渲染文件；渲染单元用于根据所述页面渲染文件进行页面渲染，逐一将所述引擎组件绘制到显示界面上，得到所述目标页面。

本实施例通过将页面资源传输给节点对应的引擎组件进行渲染，可以将获取到的数据结构进行页面加载，不再需要编写与之对应的实现逻辑，进一步提高页面开发效率。

在本实施例的一些可选的实现方式中，基于解析引擎的页面加载装置400还包括权限模块，用于解析所述页面资源的资源权限。

在本实施例中，权限模块进一步用于：

通过所述解析引擎解析所述各个所述节点对应的所述引擎组件之间的逻辑关系；

根据所述逻辑关系得到与所述引擎组件绑定的所述页面资源。

本申请通过解析页面资源的资源权限，可以保证页面资源的安全性以及管理的规范性。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图5，图5为本实施例计算机设备基本结构框图。

所述计算机设备5包括通过系统总线相互通信连接存储器51、处理器52、网络接口53。需要指出的是，图中仅示出了具有组件51-53的计算机设备5，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器51至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器51可以是所述计算机设备6的内部存储单元，例如该计算机设备5的硬盘或内存。在另一些实施例中，所述存储器51也可以是所述计算机设备5的外部存储设备，例如该计算机设备5上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器51还可以既包括所述计算机设备5的内部存储单元也包括其外部存储设备。本实施例中，所述存储器51通常用于存储安装于所述计算机设备5的操作系统和各类应用软件，例如基于解析引擎的页面加载方法的计算机可读指令等。此外，所述存储器51还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器52在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器52通常用于控制所述计算机设备5的总体操作。本实施例中，所述处理器52用于运行所述存储器51中存储的计算机可读指令或者处理数据，例如运行所述基于解析引擎的页面加载方法的计算机可读指令。

所述网络接口53可包括无线网络接口或有线网络接口，该网络接口53通常用于在所述计算机设备5与其他电子设备之间建立通信连接。

本实施例通过处理器执行存储在存储器的计算机可读指令时实现如上述实施例基于解析引擎的页面加载方法的步骤，通过构建的解析引擎提取页面加载所需的数据结构，并通过解析引擎对数据结构进行解析，得到加载页面的页面资源，可以直接根据获取到的数据结构来加载页面，避免页面及页面交互在变化时需要对应地更改实现逻辑，提高开发效率的同时提高工作效率，降低成本。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的基于解析引擎的页面加载方法的步骤，通过构建的解析引擎提取页面加载所需的数据结构，并通过解析引擎对数据结构进行解析，得到加载页面的页面资源，可以直接根据获取到的数据结构来加载页面，避免页面及页面交互在变化时需要对应地更改实现逻辑，提高开发效率的同时提高工作效率，降低成本。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种基于解析引擎的页面加载方法，其特征在于，包括下述步骤：

构建解析引擎，通过所述解析引擎提取加载页面所需的数据结构，并将所述数据结构解析为DOM树结构；

基于所述DOM树结构的根节点开始，依次遍历所述DOM树结构中的节点，获得所述节点的节点信息，根据所述节点信息得到所述节点的组件类型；

根据预先设置的所述组件类型与所述解析引擎中引擎组件的对应关系，将所述组件类型匹配到所述解析引擎中的引擎组件；

通过所述组件类型获取到所述引擎组件对应的页面资源，根据所述页面资源渲染所述引擎组件，加载出所述目标页面。

2.根据权利要求1所述的基于解析引擎的页面加载方法，其特征在于，所述将所述数据结构解析为DOM树结构的步骤包括：

通过所述解析引擎对所述数据结构进行解析，从所述数据结构中获取各个组件的层级关系；

根据所述层级关系确定各个所述组件之间的父子关系以及同级关系，根据所述同级关系和所述父子关系生成所述DOM树结构。

3.根据权利要求1所述的基于解析引擎的页面加载方法，其特征在于，所述通过所述组件类型获取到所述引擎组件对应的页面资源，根据所述页面资源渲染所述引擎组件，加载出所述目标页面的步骤包括：

根据所述组件类型查询到与所述组件类型对应的所述节点的页面资源；

将所述页面资源传输给与所述组件类型对应的所述引擎组件，并渲染至页面。

4.根据权利要求3所述的基于解析引擎的页面加载方法，其特征在于，所述根据所述组件类型查询到与所述组件类型对应的所述节点的页面资源的步骤包括：

根据所述组件类型，获取到与所述组件类型对应的节点的布局数据和内容数据；

基于所述内容数据和所述布局数据生成所述页面资源。

5.根据权利要求4所述的基于解析引擎的页面加载方法，其特征在于，所述将所述页面资源传输给与所述组件类型对应的所述引擎组件，并渲染至页面的步骤包括：

将所述页面资源输入至所述引擎组件，根据所述页面资源的所述内容数据和所述布局数据生成页面渲染文件；

根据所述页面渲染文件进行页面渲染，逐一将所述引擎组件绘制到显示界面上，得到所述目标页面。

6.根据权利要求3所述的基于解析引擎的页面加载方法，其特征在于，在所述根据所述组件类型查询到与所述组件类型对应的所述节点的页面资源的步骤之后还包括：

解析所述页面资源的资源权限。

7.根据权利要求6所述的基于解析引擎的页面加载方法，其特征在于，所述解析所述页面资源的资源权限的步骤包括：

通过所述解析引擎解析所述各个所述节点对应的所述引擎组件之间的逻辑关系；

根据所述逻辑关系得到与所述引擎组件绑定的所述页面资源。

8.一种基于解析引擎的页面加载装置，其特征在于，包括：

构建解析模块，用于构建解析引擎，通过所述解析引擎提取加载页面所需的数据结构，并将所述数据结构解析为DOM树结构；

获取模块，用于基于所述DOM树结构的根节点开始，依次遍历所述DOM树结构中的节点，获得所述节点的节点信息，根据所述节点信息得到所述节点的组件类型；

匹配模块，用于根据预先设置的所述组件类型与所述解析引擎中引擎组件的对应关系，将所述组件类型匹配到所述解析引擎中的引擎组件；

渲染模块，用于通过所述组件类型获取到所述引擎组件对应的页面资源，根据所述页面资源渲染所述引擎组件，加载出所述目标页面。

9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的基于解析引擎的页面加载方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的基于解析引擎的页面加载方法的步骤。

Images