CN115113945A - 页面加载方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种页面加载方法、装置、计算机设备和存储介质。所述方法包括：响应页面加载请求，生成、并发送页面数据获取请求，页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识；接收反馈的待加载页面数据以及版本验证结果；当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息；根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，并根据单元格和基础单元信息，生成基础单元；根据基础单元进行页面加载。采用本方法能够提高页面加载的效率。

Description

页面加载方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种页面加载方法、装置、计算机设备和存储介质。

背景技术

随着计算机技术的发展，出现了页面加载技术，页面加载技术主要是指基于Flexbox等布局方案实现前端的页面加载。

传统技术中，在基于Flexbox等布局方案实现前端的页面加载时，需要引入可应用Flexbox等布局方案编码的待加载页面数据的前端框架，利用前端框架自身的布局方案和Flexbox等布局方案共同实现前端的页面加载。

然而，传统方法，各种前端框架的布局方案都是独立开发维护的，与Flexbox等布局方案有所出入，需要进行适配，存在页面加载效率低的问题。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高页面加载的效率的页面加载方法、装置、计算机设备和存储介质。

一种页面加载方法，所述方法包括：

响应页面加载请求，生成、并发送页面数据获取请求，页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识；

接收反馈的待加载页面数据以及版本验证结果；

当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息；

根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，并根据单元格和基础单元信息，生成基础单元；

根据基础单元进行页面加载。

一种页面加载装置，所述装置包括：

数据请求模块，用于响应页面加载请求，生成、并发送页面数据获取请求，页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识；

接收模块，用于接收反馈的待加载页面数据以及版本验证结果；

解析模块，用于当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息；

映射模块，用于根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，并根据单元格和基础单元信息，生成基础单元；

加载模块，用于根据基础单元进行页面加载。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

响应页面加载请求，生成、并发送页面数据获取请求，页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识；

接收反馈的待加载页面数据以及版本验证结果；

当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息；

根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，并根据单元格和基础单元信息，生成基础单元；

根据基础单元进行页面加载。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

响应页面加载请求，生成、并发送页面数据获取请求，页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识；

接收反馈的待加载页面数据以及版本验证结果；

当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息；

根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，并根据单元格和基础单元信息，生成基础单元；

根据基础单元进行页面加载。

上述页面加载方法、装置、计算机设备和存储介质，通过响应页面加载请求，生成、并发送页面数据获取请求，能够得到待加载页面数据以及对页面布局文件的版本验证结果，从而可以在版本验证结果为验证通过时，通过解析获取到的待加载页面数据，确定其中的基础单元信息以及单元格信息，以便通过先根据单元格信息中的基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，再根据单元格和基础单元信息，生成基础单元，最后根据基础单元进行页面加载的方式实现页面加载，整个过程，通过直接利用经过版本验证的页面布局文件对待加载页面数据进行层叠样式表映射生成单元格以及基础单元的方式来逐步实现对页面的加载，在页面加载过程中不需要再利用额外的前端框架即可实现快速准确加载，能够提高页面加载的效率。

附图说明

图1为一个实施例中页面加载方法的应用环境图；

图2为一个实施例中页面加载方法的流程示意图；

图3为一个实施例中页面加载方法的示意图；

图4为另一个实施例中页面加载方法的流程示意图；

图5为又一个实施例中页面加载方法的流程示意图；

图6为一个实施例中页面加载装置的结构框图；

图7为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的页面加载方法，可以应用于如图1所示的应用环境中。如图1所示，当用户在所使用的终端102上的移动应用中需要进行页面访问时，会选中移动应用中与需访问页面对应的图标，以使得终端102上的移动应用接收到页面加载请求，当接收到页面加载请求时，终端102会根据页面加载请求发送页面数据获取请求至服务器104，页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识，接收服务器104反馈的待加载页面数据以及版本验证结果，当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息，根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，并根据单元格和基础单元信息，生成基础单元，根据基础单元进行页面加载，以使得该页面在移动应用中显示。其中，服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请在此不做限制。

在一个实施例中，如图2所示，提供了一种页面加载方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：

步骤202，响应页面加载请求，生成、并发送页面数据获取请求，页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识。

其中，页面加载请求是指用户发起的对需要访问的页面进行加载的请求。页面数据获取请求是指向服务器发送的对需要访问的页面的待加载页面数据进行获取，并对已存储的页面布局文件的版本信息进行验证的请求，在页面数据获取请求中携带待加载页面标识以及页面布局文件的版本信息，待加载页面标识用于表征待加载页面。比如，待加载页面标识具体可以是预设的页面名称。又比如，待加载页面标识具体可以是预设的页面地址。版本信息用于对不同的页面布局文件进行区分。比如，版本信息具体可以是指版本号。页面布局文件是指包括多种页面布局方案的文件，在页面布局文件中包括多种页面布局方案可供终端使用。比如，页面布局文件具体可以是指包括Flexbox等布局方案的layout文件(布局文件)。

举例说明，当页面布局文件为layout文件时，layout文件中包括文件名称、版本信息、layouts数据、csses(即层叠样式表css的集合)数据等，其中的layouts数据中包括了多个layout数据，单个layout数据与单个基础单元的布局相对应，在对基础单元进行排布时，可以根据layout名称取出不同的布局信息，以便进行排布。在单个layout数据中会给出section(即单元格)排列个数以及row_marigin的样式等内容。

具体的，当用户需要进行页面访问时，会通过操作终端输入页面加载请求，终端会响应页面加载请求，根据页面加载请求确定对应的待加载页面标识，并获取当前终端内存储的页面布局文件的版本信息，根据待加载页面标识和版本信息生成页面数据获取请求，发送页面数据获取请求至服务器。

步骤204，接收反馈的待加载页面数据以及版本验证结果。

其中，待加载页面数据是指需要加载的页面所对应的页面数据，即基于flexbox等布局方法编码的文件。其中包括页面中所需要显示的基础单元的基础单元信息，在基础单元信息中包括基础单元中的单元格所对应的单元格信息。待加载页面数据中主要数据是外层由cell(即基础单元)组成的cells数组，单个cell中的sections(即单元格)是由meta(文本)、buttons(按钮)、image(图片)组成的元素。此外，sections中还可以包括Video(视频)。

其中，版本验证结果是指验证终端内预设的页面布局文件是否为最新版本的结果。当终端内预设的页面布局文件为最新版本时，版本验证结果为验证通过，当终端内预设的页面布局文件不为最新版本时，版本验证结果为验证不通过。需要说明的是，当版本验证结果为验证通过时，终端可继续进行下一步处理，解析接收到的待加载页面数据，当版本验证结果为验证不通过时，服务器会同时反馈最新版本的待更新页面布局文件，终端需要先对页面布局文件进行更新，将其更新为最新版本，并更新版本验证结果为验证通过，从而可以触发解析待加载页面数据的步骤继续执行。

具体的，服务器在接收到携带预设的页面布局文件的版本信息以及待加载页面标识后，会根据待加载页面标识获取待加载页面数据并反馈，同时会根据版本信息查询已存储的页面布局文件的版本信息，当已存储的页面布局文件的版本信息与页面数据获取请求中的版本信息一致时，反馈验证通过的版本验证结果，否则，反馈验证不通过的版本验证结果，并同时下发最新版本的页面布局文件至终端，以使得终端进行页面布局文件的更新。终端会接收到反馈的待加载页面数据以及版本验证结果。需要说明的是，在服务器中已存储的页面布局文件始终是最新版本的，开发人员在对页面布局文件进行更新后，会将更新后的页面布局文件及时上传至服务器供所有终端使用。

步骤206，当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息。

其中，基础单元信息是指待加载页面中与基础单元对应的信息，包括基础单元个数以及每个基础单元布局信息，基础单元是指待加载页面中的基础显示单元。单元格信息是指与基础单元中的单元格所对应的信息，包括单元格个数以及单元格布局信息。基础单元由单元格组成，单元格由多个基础元素组成，在单元格布局信息中包括组成单元格的多个基础元素的基础元素信息。比如，如图3所示，待加载页面由基础单元301、单元格302以及其他显示单元组成，在单元格302中包括基础元素603。

具体的，当版本验证结果为验证通过时，终端会解析待加载页面数据，确定待加载页面数据中的基础单元信息，并根据基础单元信息，确定与每个基础单元对应的单元格信息，在单元格信息中包括组成单元格的多个基础元素的基础元素信息。进一步的，在解析待加载页面数据时，终端会根据解析得到的基础单元信息和单元格信息构建数据源对象，以便于更高效的进行下一步处理。举例说明，其中的数据源对象具体可以是parserModel。

步骤208，根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，并根据单元格和基础单元信息，生成基础单元。

其中，基础元素信息是指单元格中所包含的基础元素的布局信息。举例说明，单元格具体可以为由buttons、metas以及images等基础元素组成的元素。每个基础元素都包含基础元素信息，比如，buttons中的基础元素信息包括icon_class以及button_class，metas中的基础元素信息包括meta_class以及text，其中的text即为具体需要显示的文字。

其中，进行层叠样式表映射是指依据基础元素的基础元素信息以及页面布局文件，实现基础元素与页面布局文件中的层叠样式表元素之间的映射，以确定页面布局文件中与基础元素对应的层叠样式表元素，根据该层叠样式表元素的层叠样式表元素值，生成基础元素，并进一步对基础元素进行排布，生成单元格，对单元格进行排布，生成基础单元。

具体的，终端会根据基础元素信息查询页面布局文件，确定与基础元素信息对应的层叠样式表元素以及层叠样式表元素值，进而根据该层叠样式表元素以及层叠样式表元素值对与基础元素信息对应的基础元素进行层叠样式表映射，生成基础元素，并进一步通过对基础元素进行排布生成单元格，对单元格进行排布，生成基础单元。

步骤210，根据基础单元进行页面加载。

具体的，在生成基础单元后，终端就可直接根据基础单元进行页面加载，显示待加载页面。

上述页面加载方法，通过响应页面加载请求，生成、并发送页面数据获取请求，能够得到待加载页面数据以及对页面布局文件的版本验证结果，从而可以在版本验证结果为验证通过时，通过解析获取到的待加载页面数据，确定其中的基础单元信息以及单元格信息，以便通过先根据单元格信息中的基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，再根据单元格和基础单元信息，生成基础单元，最后根据基础单元进行页面加载的方式实现页面加载，整个过程，通过直接利用经过版本验证的页面布局文件对待加载页面数据进行层叠样式表映射生成单元格以及基础单元的方式来逐步实现对页面的加载，在页面加载过程中不需要再利用额外的前端框架即可实现快速准确加载，能够提高页面加载的效率。

需要说明的是，上述页面加载方法，通过进行层叠样式表映射能够使得flexbox编码的待加载页面数据同时适用于安卓端和IOS端，从而使得开发人员能够抛开前端框架的约束，专注于业务逻辑的编码，极大的节省了开发人力资源。

在一个实施例中，根据页面加载请求发送页面数据获取请求包括：

根据页面加载请求，确定对应的待加载页面标识，并获取预设的页面布局文件的版本信息；

根据待加载页面标识和版本信息生成页面数据获取请求，发送页面数据获取请求。

具体的，在接收到页面加载请求后，终端会根据页面加载请求确定对应的待加载页面标识，并获取预设的页面布局文件的版本信息，根据待加载页面标识和版本信息生成页面数据获取请求，发送页面数据获取请求至服务器，以指示服务器根据页面数据获取请求下发对应的待加载页面数据，并在根据版本信息对页面布局文件进行版本验证后，下发版本验证结果。

本实施例中，通过根据页面加载请求，确定对应的待加载页面标识，并获取预设的页面布局文件的版本信息，能够根据待加载页面标识和版本信息生成页面数据获取请求，进而实现对页面数据获取请求的发送。

在一个实施例中，接收反馈的待加载页面数据以及版本验证结果之后，还包括：

当版本验证结果为验证不通过时，接收待更新页面布局文件；

根据待更新页面布局文件进行页面布局文件更新，得到已更新的页面布局文件，并更新版本验证结果为验证通过。

具体的，当版本验证结果为验证不通过时，服务器会下发待更新页面布局文件至终端，以指示终端根据待更新页面布局文件进行页面布局文件更新，更新为最新版本的页面布局文件，并更新版本验证结果为验证通过，以触发解析待加载页面数据的步骤继续执行。

本实施例中，通过当版本验证结果为验证不通过时，接收待更新页面布局文件，根据待更新页面布局文件进行页面布局文件更新，得到已更新的页面布局文件，并更新版本验证结果为验证通过，能够在页面布局文件不是最新版本时以此实现对页面布局文件的更新，并通过更新版本验证结果使得继续执行下一步操作。

在一个实施例中，当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息包括：

当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元个数以及基础单元布局信息；

根据基础单元个数和基础单元布局信息，得到基础单元信息；

根据基础单元布局信息，确定与基础单元对应的单元格个数以及单元格布局信息；

根据单元格个数以及单元格布局信息，得到单元格信息。

待加载页面数据待加载页面数据其中，基础单元布局信息是对基础单元进行排布的依据，其中包括基础单元所包含的单元格个数以及单元格的布局方式。单元格布局信息是对单元格进行排布的依据，其中包括单元格所包含的基础元素个数、种类以及布局方式。

具体的，当版本验证结果为验证通过时，表示该版本的页面布局文件可用于进行层叠样式表映射，终端会解析待加载页面数据，确定待加载页面数据中的基础单元个数以及每个基础单元布局信息，根据基础单元个数以及基础单元布局信息，得到基础单元信息，并根据其中的基础单元布局信息，确定与基础单元对应的单元格个数以及单元格布局信息，根据单元格个数以及单元格布局信息，得到单元格信息。待加载页面数据

本实施例中，通过当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息，根据基础单元信息，确定与基础单元对应的单元格信息，能够根据待加载页面数据实现对基础单元信息和单元格信息的获取。

在一个实施例中，根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格包括：

根据基础元素信息查询页面布局文件，确定与基础元素信息对应的层叠样式表元素以及层叠样式表元素值；

根据层叠样式表元素以及层叠样式表元素值进行层叠样式表映射，生成与基础元素信息对应的基础元素；

根据基础元素和单元格信息，对基础元素进行排布，生成单元格。

其中，层叠样式表元素是指在前端的页面布局中所使用的基本元素。层叠样式表元素值是指层叠样式表元素的参数值，用于布局层叠样式表元素。比如，层叠样式表元素值具体可以为背景色、间距、圆角、宽度、字体大小、高度等，每个参数都有默认值，当参数为空时使用默认值。

具体的，在页面布局文件当中包括所有可能被利用到的层叠样式表元素的层叠样式表元素值，因此在进行层叠样式表映射时，终端会根据基础元素信息查询页面布局文件，从页面布局文件当中查找到与基础元素信息对应的层叠样式表元素，并获取该层叠样式表元素的层叠样式表元素值，根据层叠样式表元素、层叠样式表元素值以及预设的层叠样式表元素对应native(原生)映射规则进行层叠样式表映射，生成与基础元素信息对应的基础元素。在得到基础元素后，终端会进一步根据单元格信息来对基础元素进行排布，以生成单元格。具体的，终端会先根据单元格信息查询页面布局文件，确定对应的单元格布局信息，再在单元格中根据单元格布局信息计算基础元素的相对坐标和样式，根据计算出的相对坐标和样式组合基础元素，最后进行渲染，生成单元格，并记录单元格的高度。

本实施例中，通过根据基础元素信息查询页面布局文件，确定与基础元素信息对应的层叠样式表元素以及层叠样式表元素值，能够根据层叠样式表元素以及层叠样式表元素值进行层叠样式表映射，生成与基础元素信息对应的基础元素，进而通过根据基础元素和单元格信息，对基础元素进行排布，能够生成单元格。

在一个实施例中，根据层叠样式表元素以及层叠样式表元素值进行层叠样式表映射，生成与基础元素信息对应的基础元素包括：

根据层叠样式表元素、层叠样式表元素值以及预设的层叠样式表元素对应native映射规则进行层叠样式表映射，生成与基础元素信息对应的基础元素。

具体的，native组成UI元素中，对系统的按钮、图片以及标签都进行了扩展，扩展后的元素对应即为待加载页面数据中的button、image、meta，这些元素都继承于UIView，从而可以据此对native层的系统的布局方法进行层叠样式表映射，设置层叠样式表元素对应native映射规则，进而根据层叠样式表元素、层叠样式表元素值以及预设的层叠样式表元素对应native映射规则进行层叠样式表映射，将层叠样式表元素中的层叠样式表元素值映射到原生控件上，生成与基础元素信息对应的基础元素。

举例说明，在单个层叠样式表元素的结构中包括background-color、border-radius、margin、color、font-size、width、align、height等参数，每个参数都有具体的层叠样式表元素值，根据层叠样式表元素对应native映射规则以及每个参数具体的层叠样式表元素值，即可映射得到基础元素，其中，层叠样式表元素对应native映射规则具体为：

1)background-color对应UIView的backgroundColor属性；

2)border-radius对应UIView中的layout对象下的border属性；

3)margin结合padding属性来确定元素的坐标，Margin为元素的外边距，在设置button、image或meta大小时会从margin取值将上、左、下、右的顺序增加空白像素，padding为内边距，一般用于button和meta；

4)color对应button或者meta的文字颜色；

5)font-size对应button或metad的字体大小；

6)width可以为百分比，也可以为具体的像素值，当为像素值时会在native取具体值后缀px或者pt对native端的像素点进行转换，当为百分比时，先获取到父视图的宽度后再进行宽度的等比计算；

7)align取值有left、center和right，当为left时，层叠样式表元素对应的扩展元素会随父视图从左到右排布(举例说明，例如section下有一个button、一个meta，button先布局计算在左边而meta在右边，开始排布meta时会拿到button的右坐标，通过margin的第一个值来确定meta的开始位置)，当为center时则从父视图的中间开始排布，为right时则从右开始排布；

8)height对应元素的高度，如果lineNumber字段为0时，则meta和button中的height无效，需要根据文字的个数、宽度、字体来计算出最终的高度。

本实施例中，通过根据层叠样式表元素、层叠样式表元素值以及预设的层叠样式表元素对应native映射规则进行层叠样式表映射，能够生成与基础元素信息对应的基础元素。

在一个实施例中，根据单元格和基础单元信息，生成基础单元包括：

根据基础单元信息中基础单元与单元格之间的对应关系，确定与基础单元对应的目标单元格；

获取目标单元格的单元格高度；

根据单元格高度和基础单元信息，对目标单元格进行排布，生成基础单元。

具体的，由于基础单元是由单元格构成的，因此在生成单元格之后，终端会根据基础单元信息中基础单元与单元格之间的对应关系，确定与基础单元对应的目标单元格，获取目标单元格的单元格高度，并根据基础单元信息查询页面布局文件，确定对应的基础单元布局信息，根据单元格高度和基础单元布局信息对目标单元格进行排布，生成基础单元。

本实施例中，通过根据基础单元信息中基础单元与单元格之间的对应关系，确定与基础单元对应的目标单元格，获取目标单元格的单元格高度，能够根据单元格高度和基础单元信息，对目标单元格进行排布，生成基础单元。

在一个实施例中，如图4所示，通过一个流程示意图来说明本申请的页面加载方法，该页面加载方法具体包括以下步骤：

启动终端，终端预设页面布局文件(即解析并保存layout文件)，响应页面加载请求，生成、并发送页面数据获取请求，页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识，接收反馈的待加载页面数据(即保存页面文件)以及版本验证结果。当版本验证结果为验证通过时，终端解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息(即确定页面中的cell(基础单元)个数，确定cell中section(单元格)个数)，根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，并根据单元格和基础单元信息，生成基础单元(即section中元素进行层叠样式表映射，转化坐标，生成完整的section和cell)，根据基础单元进行页面加载(即加载到页面)。

在一个实施例中，如图5所示，通过一个流程示意图来说明本申请的页面加载方法，该页面加载方法具体包括以下步骤：

步骤502，响应页面加载请求，根据页面加载请求，确定对应的待加载页面标识，并获取预设的页面布局文件的版本信息；

步骤504，根据待加载页面标识和版本信息生成页面数据获取请求，发送页面数据获取请求；

步骤506，接收反馈的待加载页面数据以及版本验证结果；

步骤508，当版本验证结果为验证不通过时，接收待更新页面布局文件；

步骤510，根据待更新页面布局文件进行页面布局文件更新，得到已更新的页面布局文件，并更新版本验证结果为验证通过；

步骤512，当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元个数以及基础单元布局信息；

步骤514，根据基础单元个数和基础单元布局信息，得到基础单元信息；

步骤516，根据基础单元布局信息，确定与基础单元对应的单元格个数以及单元格布局信息；

步骤518，根据单元格个数以及单元格布局信息，得到单元格信息；

步骤520，根据单元格信息中基础元素信息查询页面布局文件，确定与基础元素信息对应的层叠样式表元素以及层叠样式表元素值；

步骤522，根据层叠样式表元素、层叠样式表元素值以及预设的层叠样式表元素对应native映射规则进行层叠样式表映射，生成与基础元素信息对应的基础元素；

步骤524，根据基础元素和单元格信息，对基础元素进行排布，生成单元格；

步骤526，根据基础单元信息中基础单元与单元格之间的对应关系，确定与基础单元对应的目标单元格；

步骤528，获取目标单元格的单元格高度；

步骤530，根据单元格高度和基础单元信息，对目标单元格进行排布，生成基础单元；

步骤532，根据基础单元进行页面加载。

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

在一个实施例中，如图6所示，提供了一种页面加载装置，该装置可以采用软件模块或硬件模块，或者是二者的结合成为计算机设备的一部分，该装置具体包括：数据请求模块602、接收模块604、解析模块606、映射模块608和加载模块610，其中：

数据请求模块602，用于响应页面加载请求，生成、并发送页面数据获取请求，页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识；

接收模块604，用于接收反馈的待加载页面数据以及版本验证结果；

解析模块606，用于当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元信息以及单元格信息；

映射模块608，用于根据单元格信息中基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，并根据单元格和基础单元信息，生成基础单元；

加载模块610，用于根据基础单元进行页面加载。

上述页面加载装置，通过响应页面加载请求，生成、并发送页面数据获取请求，能够得到待加载页面数据以及对页面布局文件的版本验证结果，从而可以在版本验证结果为验证通过时，通过解析获取到的待加载页面数据，确定其中的基础单元信息以及单元格信息，以便通过先根据单元格信息中的基础元素信息以及页面布局文件进行层叠样式表映射，生成单元格，再根据单元格和基础单元信息，生成基础单元，最后根据基础单元进行页面加载的方式实现页面加载，整个过程，通过直接利用经过版本验证的页面布局文件对待加载页面数据进行层叠样式表映射生成单元格以及基础单元的方式来逐步实现对页面的加载，在页面加载过程中不需要再利用额外的前端框架即可实现快速准确加载，能够提高页面加载的效率。

在一个实施例中，数据请求模块还用于根据页面加载请求，确定对应的待加载页面标识，并获取预设的页面布局文件的版本信息，根据待加载页面标识和版本信息生成页面数据获取请求，发送页面数据获取请求。

在一个实施例中，接收模块还用于当版本验证结果为验证不通过时，接收待更新页面布局文件，根据待更新页面布局文件进行页面布局文件更新，得到已更新的页面布局文件，并更新版本验证结果为验证通过。

在一个实施例中，解析模块还用于当版本验证结果为验证通过时，解析待加载页面数据，确定待加载页面数据中的基础单元个数以及基础单元布局信息，根据基础单元个数和基础单元布局信息，得到基础单元信息，根据基础单元布局信息，确定与基础单元对应的单元格个数以及单元格布局信息，根据单元格个数以及单元格布局信息，得到单元格信息。

在一个实施例中，映射模块还用于根据基础元素信息查询页面布局文件，确定与基础元素信息对应的层叠样式表元素以及层叠样式表元素值，根据层叠样式表元素以及层叠样式表元素值进行层叠样式表映射，生成与基础元素信息对应的基础元素，根据基础元素和单元格信息，对基础元素进行排布，生成单元格。

在一个实施例中，映射模块还用于根据层叠样式表元素、层叠样式表元素值以及预设的层叠样式表元素对应native映射规则进行层叠样式表映射，生成与基础元素信息对应的基础元素。

在一个实施例中，映射模块还用于根据基础单元信息中基础单元与单元格之间的对应关系，确定与基础单元对应的目标单元格，获取目标单元格的单元格高度，根据单元格高度和基础单元信息，对目标单元格进行排布，生成基础单元。

关于页面加载装置的具体限定可以参见上文中对于页面加载方法的限定，在此不再赘述。上述页面加载装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、运营商网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面加载方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述各方法实施例中的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-Only Memory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(RandomAccess Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种页面加载方法，其特征在于，所述方法包括：

响应页面加载请求，生成、并发送页面数据获取请求，所述页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识；

接收反馈的待加载页面数据以及页面布局文件的版本验证结果；

当所述版本验证结果为验证通过时，解析所述待加载页面数据，确定所述待加载页面数据中的基础单元信息以及单元格信息；

根据所述单元格信息中基础元素信息以及所述页面布局文件进行层叠样式表映射，生成单元格，并根据所述单元格和所述基础单元信息，生成基础单元；

根据所述基础单元进行页面加载。

2.根据权利要求1所述的方法，其特征在于，所述响应页面加载请求，生成、并发送页面数据获取请求包括：

根据所述页面加载请求，确定对应的待加载页面标识，并获取预设的页面布局文件的版本信息；

根据所述待加载页面标识和所述版本信息生成页面数据获取请求，发送所述页面数据获取请求。

3.根据权利要求1所述的方法，其特征在于，所述接收反馈的待加载页面数据以及版本验证结果之后，还包括：

当所述版本验证结果为验证不通过时，接收待更新页面布局文件；

根据待更新页面布局文件进行页面布局文件更新，得到已更新的页面布局文件，并更新所述版本验证结果为验证通过。

4.根据权利要求1所述的方法，其特征在于，所述当所述版本验证结果为验证通过时，解析所述待加载页面数据，确定所述待加载页面数据中的基础单元信息以及单元格信息包括：

当所述版本验证结果为验证通过时，解析所述待加载页面数据，确定所述待加载页面数据中的基础单元个数以及基础单元布局信息；

根据所述基础单元个数和所述基础单元布局信息，得到基础单元信息；

根据所述基础单元布局信息，确定与基础单元对应的单元格个数以及单元格布局信息；

根据所述单元格个数以及单元格布局信息，得到单元格信息。

5.根据权利要求1所述的方法，其特征在于，所述根据所述单元格信息中基础元素信息以及所述页面布局文件进行层叠样式表映射，生成单元格包括：

根据所述基础元素信息查询所述页面布局文件，确定与所述基础元素信息对应的层叠样式表元素以及层叠样式表元素值；

根据所述层叠样式表元素以及所述层叠样式表元素值进行层叠样式表映射，生成与所述基础元素信息对应的基础元素；

根据所述基础元素和所述单元格信息，对所述基础元素进行排布，生成单元格。

6.根据权利要求5所述的方法，其特征在于，所述根据所述层叠样式表元素以及所述层叠样式表元素值进行层叠样式表映射，生成与所述基础元素信息对应的基础元素包括：

根据所述层叠样式表元素、所述层叠样式表元素值以及预设的层叠样式表元素对应native映射规则进行层叠样式表映射，生成与所述基础元素信息对应的基础元素。

7.根据权利要求1所述的方法，其特征在于，所述根据所述单元格和所述基础单元信息，生成基础单元包括：

根据所述基础单元信息中基础单元与单元格之间的对应关系，确定与所述基础单元对应的目标单元格；

获取所述目标单元格的单元格高度；

根据所述单元格高度和所述基础单元信息，对所述目标单元格进行排布，生成所述基础单元。

8.一种页面加载装置，其特征在于，所述装置包括：

数据请求模块，用于响应页面加载请求，生成、并发送页面数据获取请求，所述页面数据获取请求携带预设的页面布局文件的版本信息以及待加载页面标识；

接收模块，用于接收反馈的待加载页面数据以及版本验证结果；

解析模块，用于当所述版本验证结果为验证通过时，解析所述待加载页面数据，确定所述待加载页面数据中的基础单元信息以及单元格信息；

映射模块，用于根据所述单元格信息中基础元素信息以及所述页面布局文件进行层叠样式表映射，生成单元格，并根据所述单元格和所述基础单元信息，生成基础单元；

加载模块，用于根据所述基础单元进行页面加载。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。

10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

Images