CN115455325A - 页面渲染方法、装置、设备、介质以及程序产品 - Google Patents

Abstract

本公开提供了一种页面渲染方法，可以应用于计算机网页开发技术领域。该页面渲染方法包括：在第一页面的销毁阶段，获取第二页面的第二页面参数，其中，所述第二页面是所述第一页面的下一页面，所述第一页面的销毁阶段包括销毁所述第一页面挂载的第一页面参数；在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据；以及基于所述第二渲染数据执行页面渲染。本公开还提供了一种页面渲染装置、设备、存储介质和程序产品。

Description

页面渲染方法、装置、设备、介质以及程序产品

技术领域

本公开涉及计算机网页开发技术领域，具体地涉及一种页面渲染方法、装置、设备、介质和程序产品。

背景技术

在页面项目开发的技术领域中，通常存在一个现象：通过一个页面跳转至另外一个页面时，当待加载页面中的信息量较大，且有数据复杂逻辑处理的情况下，往往会导致页面渲染慢或者出现页面短暂空白的情况。

因此，如何避免发生页面渲染慢或者出现页面短暂空白的情况，以提升用户体验，成为亟待解决的技术问题。

发明内容

鉴于上述问题，本公开提供了提高页面渲染效率的页面渲染方法、装置、设备、介质和程序产品。

根据本公开的第一个方面，提供了一种页面渲染方法，包括：在第一页面的销毁阶段，获取第二页面的第二页面参数，其中，所述第二页面是所述第一页面的下一页面，所述第一页面的销毁阶段包括销毁所述第一页面挂载的第一页面参数；在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据；以及基于所述第二渲染数据执行页面渲染。

根据本公开的实施例，其中，所述获取第二页面的第二页面参数，包括：响应于用户对所述第一页面的交互操作，得到第二页面ID项；以及基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

根据本公开的实施例，其中，在第一页面的销毁阶段，获取到的所述第二页面参数是存储在容器中的，其中，所述容器用以存储全局数据，所述全局数据能够被多个页面调用。

根据本公开的实施例，其中，所述在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据，包括：判断所述容器中是否存储有所述第二页面参数；在所述容器中存储有所述第二页面参数的情况下，调取所述第二页面参数；以及在所述第二页面参数调取成功的情况下，基于所述预设的业务场景规则解析所述第二页面参数，得到所述第二渲染数据。

根据本公开的实施例，其中，在所述判断所述容器中是否存储有所述第二页面参数后，还包括：在所述容器中未存储有所述第二页面参数的情况下，基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

根据本公开的实施例，其中，所述基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据包括：对所述第二页面参数执行格式化处理和字符串拼接处理，得到所述第二渲染数据。

本公开的第二个方面，提供了一种页面渲染装置，包括：页面参数获取模块，用于在第一页面的销毁阶段，获取第二页面的第二页面参数，其中，所述第二页面是所述第一页面的下一页面，所述第一页面的销毁阶段包括销毁所述第一页面挂载的第一页面参数；页面参数解析模块，用于在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据；以及页面渲染模块，用于基于所述第二渲染数据执行页面渲染。

根据本公开的实施例，其中，所述页面参数获取模块，还用于响应于用户对所述第一页面的交互操作，得到第二页面ID项；以及基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

根据本公开的实施例，其中，在第一页面的销毁阶段，获取到的所述第二页面参数是存储在容器中的，其中，所述容器用以存储全局数据，所述全局数据能够被多个页面调用。

根据本公开的实施例，其中，所述页面参数解析模块，用于判断所述容器中是否存储有所述第二页面参数；在所述容器中存储有所述第二页面参数的情况下，调取所述第二页面参数；以及在所述第二页面参数调取成功的情况下，基于所述预设的业务场景规则解析所述第二页面参数，得到所述第二渲染数据。

根据本公开的实施例，其中，所述页面参数获取模块，还用于在所述容器中未存储有所述第二页面参数的情况下，基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

根据本公开的实施例，其中，所述页面参数解析模块，还用于对所述第二页面参数执行格式化处理和字符串拼接处理，得到所述第二渲染数据。

本公开的第三个方面，提供了一种电子设备，包括：一个或多个处理器；存储器，用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得一个或多个处理器执行上述页面渲染方法。

本公开的第四个方面，还提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行上述页面渲染方法。

本公开的第五个方面，还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述页面渲染方法。

在本公开的实施例中，利用当前页面中组件的销毁，到下一页面中初始化的时间差，提前获取页面参数，只需要将获取到的数据进行渲染即可，使得异步请求在初始化前即可完成，之后的页面加载只需关注业务逻辑即可极大的加快了数据的启动速度，保证了用户体验。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述内容以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开实施例的页面渲染方法的应用场景图；

图2示意性示出了根据本公开实施例的页面渲染方法的流程图；

图3A示意性示出了根据本公开实施例的页面渲染方法的流程图；

图3B示意性示出了根据本公开实施例的页面渲染方法的流程图；

图4示意性示出了根据本公开实施例的页面渲染方法的全流程图；

图5示意性示出了根据本公开实施例的页面跳转时序图；

图6示意性示出了根据本公开实施例的页面渲染装置的结构框图；以及

图7示意性示出了根据本公开实施例的适于实现页面渲染方法的电子设备的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

在对本公开的实施例进行详细揭示之前，对本公开的实施例中将要用到的关键技术术语进行一一说明，如下所示：

vue：是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

vuex：专门在vue中实现集中式状态管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理，也是一种组件间通信的方式，且适用于任意组件间通信。

created：是vue中生命周期钩子函数之一，在实例创建完成后被同步调用，此时，实例已被创建，但还未被挂载，该生命周期中也是可以进行接口数据请求最早的时机。

beforeDestory：是vue中生命周期钩子函数之一，实例销毁之前调用，在这一步，实例仍然完全可用。

store：vuex中的一种管理数据的容器，其中存储有全局数据。

在页面开发的现有技术中，以列表页面和详情页为例，在进行页面加载时，即从商品列表页(以下简称为A列表)点击“查看”按钮跳转至商品详情页(以下简称为B详情页面)，通常采用以下方案：点击A列表行数据“查看”按钮，拿到相应的商品ID(以下简称为rowID)，进行页面路由跳转(this.$router.push({name：‘detail’，id：rowID}))，跳转至B详情页面后，再通过例如created或mounted等函数挂载相应的资源，最后完成页面的再渲染。

在通过上述页面加载的方法时，一旦出现详请信息量较大且存在数据复杂逻辑处理的情况下，会导致页面加载效率降低、页面出现短暂空白等问题，徒增等待时间，严重影响用户体验。

为解决现有技术中存在的技术问题，本公开的实施例提供了一种页面加载的方法，在第一页面的销毁阶段，获取第二页面的第二页面参数，其中，所述第二页面是所述第一页面的下一页面，所述第一页面的销毁阶段包括销毁所述第一页面挂载的第一页面参数；在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据；以及基于所述第二渲染数据执行页面渲染。

在本公开的实施例中，利用当前页面中组件的销毁，到下一页面中初始化的时间差，提前获取页面参数，只需要将获取到的数据进行渲染即可，使得异步请求在初始化前即可完成，之后的页面加载只需关注业务逻辑即可极大的加快了数据的启动速度，保证了用户体验。

图1示意性示出了根据本公开实施例的页面渲染方法的应用场景图。

如图1所示，根据该实施例的应用场景100可以包括终端设备101、102、103、网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

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

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

需要说明的是，本公开实施例所提供的页面渲染方法一般能够被终端设备101、102、103执行。相应地，本公开实施例所提供的页面渲染装置一般可以设置于终端设备101、102、103中。

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

以下将基于图1描述的场景，通过图2～图5对公开实施例的页面渲染方法进行详细描述。

图2示意性示出了根据本公开实施例的页面渲染方法的流程图。

图5示意性示出了根据本公开实施例的页面跳转时序图。

如图2所示，该实施例中的页面渲染方法包括操作S210～操作S230，该页面渲染方法能够被终端设备101、102、103执行。

在操作S210中，在第一页面的销毁阶段，获取第二页面的第二页面参数，其中，所述第二页面是所述第一页面的下一页面，所述第一页面的销毁阶段包括销毁所述第一页面挂载的第一页面参数。

根据本公开的实施例，其中，所述获取第二页面的第二页面参数，包括：响应于用户对所述第一页面的交互操作，得到第二页面ID项；以及基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

其中，“所述第二页面是所述第一页面的下一页面”是指，第一页面与第二页面之间的页面路径关系是由上至下且相互之间不存在间隔的页面。具体的，第一页面和第二页面的关系是：通过用户在第一页面执行一些交互操作，该交互操作可以是点击第一页面中的某个事件项或者元素，可以使得页面跳转至第二页面。例如，用户在第一页面点击“查看详情”，则能够使得页面跳转至详情页第二页面。其中，第二页面ID项可以是与该事件项或元素对应的ID，通过该第二页面ID项，可以至少执行该页面的接口请求，以获取到第二页面将要加载的数据，该数据最终可以由页面进行渲染，最终得到面向用户的页面。

如图5所示，不同页面有都具有生命周期，每个页面的生命周期中包括至少包括创建阶段和销毁阶段。现有技术中，在页面的创建阶段，通过调用接口请求(以获取后端的数据，进而形成实例)，并对该实例进行挂载，实现页面数据的加载。而在销毁阶段，目的在于销毁挂载的实例，一般情况下，销毁阶段是指从“即将销毁”到“初始化”这一阶段，也即销毁阶段开始于“即将销毁”时，结束于“初始化”开始时，其中，“即将销毁”对应于第一页面(或称当前页面)，“初始化”对应于第二页面(或称下一页面)。

当然，还需要说明的是，在实际的页面请求过程中，不同的阶段则是由不同的函数调用节点间隔开来。例如，在某一阶段是由调用函数A的时刻算起，从调用函数B的时刻截止。又例如，在某一阶段是由调用函数A的时刻算起，从调用函数D的时刻截止，其中，可能在该阶段还包括调用函数B和调用函数C。当然，在调用函数A的时刻算起，从调用函数B的时刻截止的情况下，若调用函数B是在调用函数A截止的情况下及时发生的，则该阶段的时间开销也可看做是执行函数A所花费的时间开销。

基于上述对页面生命周期的描述，便可以理解，现有技术中在页面的创建阶段，调用接口请求以取得后端的数据和对实施例进行挂载这两个操作，都具有一定的时间开销。其中，调用接口请求主要受网络情况和请求对应数据复杂度影响。

进而，研发人员发现，一般情况下，销毁阶段(即从第一页面的“即将销毁”的时间节点到第二页面的“初始化”时间节点)的时间开销略大于调用接口请求获取到数据的时间开销，例如，销毁阶段的时间开销大约需要500ms，调用接口请求的时间开销大约需要30ms-400ms。由此，至少在大部分场景中，销毁阶段的时间开销给了将接口请求前置到销毁阶段的必要条件，可以利用这个页面的阶段的时间开销进行接口请求。

根据本公开的实施例中，其中，在第一页面的销毁阶段，获取到的所述第二页面参数是存储在容器中的，其中，所述容器用以存储全局数据，所述全局数据能够被多个页面调用。

获取到的第二页面参数缓存到全局可用的容器中，该容器能够被多个页面调用，在需要使用该第二页面参数的时候，再取出该第二页面参数以做进一步的处理，实现数据获取与使用之间分离。并且，采用能够全局可用的容器，不同于局部可用的容器，全局可用的容器增加的该容器中数据使用的灵活性。

在操作S220中，在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据。

可以理解的是，不同的页面参数有着不同的处理规则，而这些处理规则则是基于不同的业务场景指定的，为了得到第二渲染数据使得页面可以直接使用，需要通过相应的业务场景规则对第二页面参数进行解析。

图3A示意性示出了根据本公开实施例的页面渲染方法的流程图。

如图3A所示，该实施例的页面渲染方法包括操作S310～操作S330，上述操作S310～操作S330至少可以部分执行上述操作S220。

在操作S310，判断所述容器中是否存储有所述第二页面参数。

在操作S320，在所述容器中存储有所述第二页面参数的情况下，调取所述第二页面参数。

在操作S330，在所述第二页面参数调取成功的情况下，基于所述预设的业务场景规则解析所述第二页面参数，得到所述第二渲染数据。

其中，上述操作S310用来判断容器中是否存储有第二页面参数的方法，是判断能够成功获取该容器中的第二页面参数的方法。

在第一页面销毁时进行网络请求时，在网络正常且第一页面销毁阶段的时间开销足够支撑获取第二页面参数的时间开销的情况下，能够正常调取到第二页面参数，并存储至容器当中。进而，解析得到符合页面渲染要求的第二渲染数据，以实现页面渲染。

当然，在大部分情况下，销毁阶段的时间开销是大于调用接口请求的时间开销。但是，在网络异常时，会出现第一页面销毁阶段的时间开销不能够支撑获取第二页面参数的时间开销的情况，此时，则需要在第二页面的创建阶段重新调用接口，以直接获取第二页面参数。

图3B示意性示出了根据本公开实施例的页面渲染方法的流程图。

如图3B所示，该实施例的页面渲染方法除了上述操作S310～操作S330，还包括操作S340。

在操作S340中，在所述容器中未存储有所述第二页面参数的情况下，基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

其中，上述操作S340执行于上述操作S310之后。

需要说明的是，在销毁阶段的时间开销大于调用接口请求的时间开销时，仍然可以将存储在预设的容器之中的。

根据本公开的实施例，其中，所述基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据包括：对所述第二页面参数执行格式化处理和字符串拼接处理，得到所述第二渲染数据。

其中，预设的业务场景规则是基于不同的业务场景由研发人员自定义的，不同业务场景下的数据有不同的数据格式，预设的业务场景规则是将不同数据格式的后端数据转化为对应前端可用的数据格式，因此，其主要的目的还是在于将后端格式转化为前端格式。具体的，有时候接口返回的数据格式前端不能直接使用，需要对接口返回的数据进行再加工，再加工过程包含：格式化、字符串拼接等，例如：(1)一个时间字段接口返回的是时间戳，但是页面展示的是年月日，前端就需要把后端返回的时间戳转换为年月日格式，从而使页面正确渲染。(2)接口返回的是[‘周一’、‘周二’、‘周三’]，页面需要把数据平铺展示为：周一、周二、周三，就需要对数据进行格式化，最后，使得数据的格式能够适配于前端。

在操作S230中，基于所述第二渲染数据执行页面渲染。

具体的，上述第二渲染数据则是前端中页面可以直接进行操作的数据类型，进而，通过生命周期函数中的相关函数，对该第二渲染数据进行渲染，则可以得到最终呈现给用户侧的页面。

可以理解的是，上述操作S210～操作S230应用于前端中。

在本公开的实施例中，利用当前页面中组件的销毁，到下一页面中初始化的时间差，提前获取页面参数，只需要将获取到的数据进行渲染即可，使得异步请求在初始化前即可完成，之后的页面加载只需关注业务逻辑即可极大的加快了数据的启动速度，保证了用户体验。

图4示意性示出了根据本公开实施例的页面渲染方法的全流程图。

如图4所示，该实施例的页面渲染方法包括操作S410～操作S480。

以下，将以列表页和详情页为例，对本公开实施例的页面渲染方法的全流程进行详细揭示，需要说明的是，下述操作S410～操作S480可以执行于vue框架中。

在操作S410中，响应于A列表中的列表单项的查看指令，保存所述列表单项的ID。

例如，用户在进行网络购物时，从A列表(商品列表)点击某项商品的“查看”按钮，以跳转至B详情页，在此过程中，保存B详情页的ID(即B详情页对应商品的ID)。

在操作S420中，在A列表的“beforeDestroy”执行过程中进行接口请求，以获取返回的详情数据。

由于触发了“查看”按钮，此时，页面需要从A列表跳转到B详情页，在此过程中，需要先将A列表所挂载的数据进行销毁，调用生命周期钩子函数“beforeDestroy”以执行销毁逻辑。在调用“beforeDestroy”函数的整个生命周期中，都可以执行接口请求。例如，可以在开始调用“beforeDestroy”的同时调用接口请求，以保证能够有充足的时间获取到调用的B详情页的详情数据。

需要说明的是，生命周期钩子函数包括：beforeCreate(即将初始化)、created(初始化)、beforeMount(即将挂载)、mounted(挂载后)、beforeUpdate(即将更新)、updated(更新)、activated(即将激活)、deactivated(激活后)、beforeDestroy(即将销毁)和destroyed(销毁)。结合图5所示，上述生命周期钩子函数可以理解为不同的节点，进而，可以根据不同的节点之间总结为不同的阶段，不同的阶段存在不同的时间开销。而在本公开实施例中，采用“beforeDestroy”和“created”作为重要的时间节点，通过这两个函数的执行时间节点定义销毁阶段，进而在此阶段执行数据的调取。

可以理解的是，在从当前页面的“beforeDestroy”到下一页面的“created”中，会经历多个生命周期函数，上述的销毁阶段则是指“beforeDestroy”到“created”的时间段，上述的初始化阶段则是指“created”函数的从开始到结束的整个执行周期。

在操作S430中，将返回的详情数据存储到“store”中。

例如，在“beforeDestroy”函数的执行过程中，将接口返回的数据定义为“res”，则执行回调函数“this.$store.commit(‘saveDetail’，res)”，以返回详情数据。而该“res”是返回在容器“store”当中的，该容器“store”为预先定义的用于存储全局数据的容器。

在操作S440中，页面路由跳转至B详情页。

在操作S450中，在B详情页的“created”中，从store获取详情数据。

在操作S460中，在详情数据获取成功的情况下，解析详情数据，处理业务逻辑。

同样的，从“store”获取详情数据的操作，也可以是在整个“created”的执行周期中执行。例如，在B详情页的“created”生命周期时从“store”中获取已存数据“this.$store.state.detailData”。

在操作S470中，在详情数据获取失败的情况下，进行接口请求，以获取详情数据。

当然，此种情况则是直接获取相应的详情数据。

在操作S480中，渲染详情页。

在本公开的实施例中，利用当前页面中组件的销毁，到下一页面中初始化的时间差，提前获取页面参数，只需要将获取到的数据进行渲染即可，使得异步请求在初始化前即可完成，之后的页面加载只需关注业务逻辑即可极大的加快了数据的启动速度，保证了用户体验。

基于上述页面渲染方法，本公开还提供了一种页面渲染装置。以下将结合图6对该装置进行详细描述。

图6示意性示出了根据本公开实施例的页面渲染装置的结构框图。

如图6所示，该实施例的页面渲染装置600包括页面参数获取模块610、页面参数解析模块620和页面渲染模块630。

所述页面参数获取模块610用于在第一页面的销毁阶段，获取第二页面的第二页面参数，其中，所述第二页面是所述第一页面的下一页面，所述第一页面的销毁阶段包括销毁所述第一页面挂载的第一页面参数。在一实施例中，所述页面参数获取模块610可以用于执行前文描述的操作S210，在此不再赘述。

所述页面参数解析模块620用于在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据。在一实施例中，所述页面参数解析模块620可以用于执行前文描述的操作S220，在此不再赘述。

所述页面渲染模块630用于基于所述第二渲染数据执行页面渲染。在一实施例中，所述页面渲染模块630可以用于执行前文描述的操作S230，在此不再赘述。

根据本公开的实施例，其中，所述页面参数获取模块，还用于响应于用户对所述第一页面的交互操作，得到第二页面ID项；以及基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

根据本公开的实施例，其中，在第一页面的销毁阶段，获取到的所述第二页面参数是存储在容器中的，其中，所述容器用以存储全局数据，所述全局数据能够被多个页面调用。

根据本公开的实施例，其中，所述页面参数解析模块，用于判断所述容器中是否存储有所述第二页面参数；在所述容器中存储有所述第二页面参数的情况下，调取所述第二页面参数；以及在所述第二页面参数调取成功的情况下，基于所述预设的业务场景规则解析所述第二页面参数，得到所述第二渲染数据。

根据本公开的实施例，其中，所述页面参数获取模块，还用于在所述容器中未存储有所述第二页面参数的情况下，基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

根据本公开的实施例，其中，所述页面参数解析模块，还用于对所述第二页面参数执行格式化处理和字符串拼接处理，得到所述第二渲染数据。

根据本公开的实施例，所述页面参数获取模块610、所述页面参数解析模块620和所述页面渲染模块630中的任意多个模块可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，所述页面参数获取模块610、所述页面参数解析模块620和所述页面渲染模块630中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，所述页面参数获取模块610、所述页面参数解析模块620和所述页面渲染模块630中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

在本公开的实施例中，利用当前页面中组件的销毁，到下一页面中初始化的时间差，提前获取页面参数，只需要将获取到的数据进行渲染即可，使得异步请求在初始化前即可完成，之后的页面加载只需关注业务逻辑即可极大的加快了数据的启动速度，保证了用户体验。

图7示意性示出了根据本公开实施例的适于实现页面渲染方法的电子设备的方框图。

如图7所示，根据本公开实施例的电子设备700包括处理器701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。处理器701例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))等等。处理器701还可以包括用于缓存用途的板载存储器。处理器701可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 703中，存储有电子设备700操作所需的各种程序和数据。处理器701、ROM702以及RAM 703通过总线704彼此相连。处理器701通过执行ROM 702和/或RAM 703中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 702和RAM 703以外的一个或多个存储器中。处理器701也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，电子设备700还可以包括输入/输出(I/O)接口705，输入/输出(I/O)接口705也连接至总线704。电子设备700还可以包括连接至I/O接口705的以下部件中的一项或多项：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 702和/或RAM 703和/或ROM 702和RAM 703以外的一个或多个存储器。

本公开的实施例还包括一种计算机程序产品，其包括计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。当计算机程序产品在计算机系统中运行时，该程序代码用于使计算机系统实现本公开实施例所提供的方法。

在该计算机程序被处理器701执行时执行本公开实施例的系统/装置中限定的上述功能。根据本公开的实施例，上文描述的系统、装置、模块、单元等可以通过计算机程序模块来实现。

在一种实施例中，该计算机程序可以依托于光存储器件、磁存储器件等有形存储介质。在另一种实施例中，该计算机程序也可以在网络介质上以信号的形式进行传输、分发，并通过通信部分709被下载和安装，和/或从可拆卸介质711被安装。该计算机程序包含的程序代码可以用任何适当的网络介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被处理器701执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

根据本公开的实施例，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例提供的计算机程序的程序代码，具体地，可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。程序设计语言包括但不限于诸如Java，C++，python，“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (10)

1.一种页面渲染方法，包括：

在第一页面的销毁阶段，获取第二页面的第二页面参数，其中，所述第二页面是所述第一页面的下一页面，所述第一页面的销毁阶段包括销毁所述第一页面挂载的第一页面参数；

在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据；以及

基于所述第二渲染数据执行页面渲染。

2.根据权利要求1所述的方法，其中，所述获取第二页面的第二页面参数，包括：

响应于用户对所述第一页面的交互操作，得到第二页面ID项；以及

基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

3.根据权利要求2所述的方法，其中，

在第一页面的销毁阶段，获取到的所述第二页面参数是存储在容器中的，其中，所述容器用以存储全局数据，所述全局数据能够被多个页面调用。

4.根据权利要求3所述的方法，其中，所述在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据，包括：

判断所述容器中是否存储有所述第二页面参数；

在所述容器中存储有所述第二页面参数的情况下，调取所述第二页面参数；以及

在所述第二页面参数调取成功的情况下，基于所述预设的业务场景规则解析所述第二页面参数，得到所述第二渲染数据。

5.根据权利要求4所述的方法，其中，在所述判断所述容器中是否存储有所述第二页面参数后，还包括：

在所述容器中未存储有所述第二页面参数的情况下，基于所述第二页面ID项调用接口请求，以获取所述第二页面参数。

6.根据权利要求1-5任一项所述的方法，其中，所述基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据包括：

对所述第二页面参数执行格式化处理和字符串拼接处理，得到所述第二渲染数据。

7.一种页面渲染装置，包括：

页面参数获取模块，用于在第一页面的销毁阶段，获取第二页面的第二页面参数，其中，所述第二页面是所述第一页面的下一页面，所述第一页面的销毁阶段包括销毁所述第一页面挂载的第一页面参数；

页面参数解析模块，用于在第二页面的创建阶段，基于预设的业务场景规则解析所述第二页面参数，得到第二渲染数据；以及

页面渲染模块，用于基于所述第二渲染数据执行页面渲染。

8.一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行根据权利要求1～6中任一项所述的方法。

9.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行根据权利要求1～6中任一项所述的方法。

10.一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现根据权利要求1～6中任一项所述的方法。

Images