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

本申请涉及网络技术领域，尤其涉及一种页面渲染方法及装置。

背景技术：

随着网络技术的飞速发展，越来越多的用户从网上获取信息。用户通过终端上设置的浏览器向网站的服务器发送访问请求，服务器接收到访问请求后向浏览器反馈信息，浏览器在一个页面中展示服务器反馈的信息。页面的类型有很多种，筛选型列表页面是最为常见的一种类型，筛选型列表页面是指可以根据一定的筛选参数来筛选满足条件的内容的页面。

通常，筛选型列表页面中会包括多个区块，每个区块有筛选参数，每个筛选参数有多个参数值，按照相关的页面渲染方法，当浏览器检测到用户选择某个区块的筛选参数的参数值后，将当前页面包括的所有区块的筛选参数的参数值进行组合，得到筛选参数的参数值组合并发送给服务器；服务器从预先存储的参数值组合与区块代码的对应关系中查找接收到的参数值组合对应的区块信息，若查找到接收到的参数值组合对应的区块信息，则将查找到的区块信息发送给浏览器；浏览器接收服务器发送的区块信息，根据接收到的区块信息渲染页面中所有包括筛选参数的区块。

上述页面渲染方法中，首先，相关技术人员需要穷尽当前页面包括的所有区块的筛选参数的参数值组合，然后将各种参数值组合对应的区块信息预先编写出来，这就会耗费很大的人力资源，页面的可扩展性和可维护性都非常差，每个区块的可移植性和可重用性也非常差；并且，用户每次选择一个区块的筛选参数的参数值后，都需要与服务器交互才能获取到渲染页面需要的区块信息，这样就会消耗大量的网络资源，影响用户体验；同时，浏览器在获取参数值组合对应的区块信息后，需要渲染页面中所有包括筛选参数的区块，但实际上也许只有一个或两个区块的筛选参数的参数值改变，除了这一个或两个区块需要重新渲染外，其他区块并不需要重新渲染，但上述方法中需要渲染所有包括筛选参数的区块，这样既浪费系统资源，又影响用户体验。

技术实现要素：

本申请实施例提供一种页面渲染方法及装置，用以解决相关技术中存在的区块的可移 植性和可重用性差，消耗大量的网络和系统资源，以及影响用户体验的问题。

根据本申请实施例，提供一种页面渲染方法，应用在终端中，包括：

根据当前页面的页面数据完成所述当前页面的首次渲染；

接收所述当前页面包括的各个区块发送的注册请求，每个所述注册请求中携带对应区块的区块标识和筛选参数的参数名；

根据每个区块的区块标识为对应的区块分配响应函数，并对应保存每个区块的区块标识、筛选参数的参数名和响应函数；以及，

检测针对所述当前页面包括的各个区块的筛选参数的参数值修改操作；

若检测到针对所述当前页面包括的一个区块的筛选参数的参数值修改操作，则调用与所述一个区块的区块标识和筛选参数的参数名对应的响应函数根据所述当前页面的页面数据渲染所述一个区块。

具体的，根据每个区块的区块标识为对应的区块分配响应函数，具体包括：

获取区块标识与业务类型的对应关系；

从所述对应关系中查找每个区块的区块标识对应的业务类型，得到对应区块的业务类型；

根据每个区块的业务类型为对应区块分配响应函数。

具体的，对应保存每个区块的区块标识、筛选参数的参数名和响应函数，具体包括：

获取所述当前页面的设定元素；

在所述设定元素上注册每个区块的区块标识和筛选参数的参数名对应的响应函数。

具体的，调用与所述一个区块的区块标识和筛选参数的参数名对应的响应函数根据所述当前页面的页面数据渲染所述一个区块，具体包括：

在所述当前页面的设定元素上抛出所述一个区块的区块标识和筛选参数的参数名；

调用与所述一个区块的区块标识和筛选参数的参数名对应的响应函数、从所述当前页面的页面数据中获取与所述一个区块的区块标识对应的数据并执行获取的数据。

可选的，还包括：

获取所述一个区块的筛选参数修改后的的参数值；

将修改后的参数值添加在所述当前页面的第一统一资源定位符url的哈希值中，得到第二url；

保存所述第二url。

具体的，根据当前页面的页面数据完成所述当前页面的首次渲染，具体包括：

接收服务器发送的所述当前页面的页面数据；

根据所述当前页面的页面数据渲染所述当前页面；

从所述当前页面的第一url的哈希值中获取所述当前页面包括的各个区块的筛选参数的参数值；

根据获取的各个区块的筛选参数的参数值渲染对应区块。

根据本申请实施例，还提供一种页面渲染装置，应用在终端中，包括：

渲染单元，用于根据当前页面的页面数据完成所述当前页面的首次渲染；

接收单元，用于接收所述当前页面包括的各个区块发送的注册请求，每个所述注册请求中携带对应区块的区块标识和筛选参数的参数名；

分配单元，用于根据每个区块的区块标识为对应的区块分配响应函数，并对应保存每个区块的区块标识、筛选参数的参数名和响应函数；以及，

检测单元，用于检测针对所述当前页面包括的各个区块的筛选参数的参数值修改操作；

调用单元，用于若检测到针对所述当前页面包括的一个区块的筛选参数的参数值修改操作，则调用与所述一个区块的区块标识和筛选参数的参数名对应的响应函数根据所述当前页面的页面数据渲染所述一个区块。

具体的，所述分配单元，用于根据每个区块的区块标识为对应的区块分配响应函数，具体用于：

获取区块标识与业务类型的对应关系；

从所述对应关系中查找每个区块的区块标识对应的业务类型，得到对应区块的业务类型；

根据每个区块的业务类型为对应区块分配响应函数。

具体的，所述分配单元，用于对应保存每个区块的区块标识、筛选参数的参数名和响应函数，具体用于：

获取所述当前页面的设定元素；

在所述设定元素上注册每个区块的区块标识和筛选参数的参数名对应的响应函数。

具体的，所述调用单元，用于调用与所述一个区块的区块标识和筛选参数的参数名对 应的响应函数根据所述当前页面的页面数据渲染所述一个区块，具体用于：

在所述当前页面的设定元素上抛出所述一个区块的区块标识和筛选参数的参数名；

调用与所述一个区块的区块标识和筛选参数的参数名对应的响应函数、从所述当前页面的页面数据中获取与所述一个区块的区块标识对应的数据并执行获取的数据。

可选的，还包括：

获取单元，用于获取所述一个区块的筛选参数修改后的的参数值；

添加单元，用于将修改后的参数值添加在所述当前页面的第一统一资源定位符url的哈希值中，得到第二url；

保存单元，用于保存所述第二url。

具体的，所述渲染单元，用于根据当前页面的页面数据完成所述当前页面的首次渲染，具体用于：

接收服务器发送的所述当前页面的页面数据；

根据所述当前页面的页面数据渲染所述当前页面；

从所述当前页面的第一url的哈希值中获取所述当前页面包括的各个区块的筛选参数的参数值；

根据获取的各个区块的筛选参数的参数值渲染对应区块。

本申请实施例提供一种页面渲染方法及装置，根据当前页面的页面数据完成所述当前页面的首次渲染；接收所述当前页面包括的各个区块发送的注册请求，每个所述注册请求中携带对应区块的区块标识和筛选参数的参数名；根据每个区块的区块标识为对应的区块分配响应函数，并对应保存每个区块的区块标识、筛选参数的参数名和响应函数；以及，检测针对所述当前页面包括的各个区块的筛选参数的参数值修改操作；若检测到针对所述当前页面包括的一个区块的筛选参数的参数值修改操作，则调用与所述一个区块的区块标识和筛选参数的参数名对应的响应函数根据所述当前页面的页面数据渲染所述一个区块。该方案中，直接根据初次渲染当前页面时的页面数据渲染筛选参数的参数值修改的区块，无需预先编写各种参数值组合对应的区块信息，从而可以节省大量的人力资源，页面的可扩展性和可维护性很好，每个区块的可移植性和重用性也很好；并且，无需与服务器进行交互，从而可以节省网络资源，提升用户体验；同时，只针对筛选参数的参数值修改的区块进行渲染，无需渲染所有包括筛选参数的区块，从而可以节省系统资源，有效地提升用户体验。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

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

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

图3为本申请实施例中一种页面渲染装置的结构示意图；

图4为本申请实施例中另一种页面渲染装置的结构示意图。

具体实施方式

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

为了解决相关技术中存在的区块的可移植性和可重用性差，消耗大量的网络和系统资源，以及影响用户提样的问题，本申请实施例提供一种页面渲染方法，该方法可以但不限于应用在终端的浏览器中，该方法的流程如图1所示，具体包括如下步骤：

s11：根据当前页面的页面数据完成当前页面的首次渲染。

当用户需要打开某个页面时，该页面就是当前页面，在对当前页面进行首次渲染时，浏览器需要根据当前页面的页面数据来完成，页面数据通常是从服务器获取的，可以但不限于是代码。

浏览器对当前页面进行首次渲染后，用户可以看到当前页面的信息，然后可以根据需要进一步使用该页面的信息。

s12：接收当前页面包括的各个区块发送的注册请求，每个注册请求中携带对应区块的区块标识和筛选参数的参数名。

在完成当前页面的首次渲染后，当前页面的每个区块可以向浏览器发送注册请求，由于不同的区块可能包括相同的筛选参数，因此需要通过增加区块标识来区分各个区块的筛选参数，具体可以在注册请求中携带区块的区块标识和筛选参数的参数名。

s13：根据每个区块的区块标识为对应的区块分配响应函数，并对应保存每个区块的区块标识、筛选参数的参数名和响应函数。

不同的区块实现的业务不同，有的区块实现展示功能、有的区块实现排序功能等等， 这些区块需要的响应函数也不同，因此需要为每个区块分配响应函数。为了便于后续调用响应函数，浏览器需要对应保存每个区块的区块标识、筛选参数的参数名和响应函数。

s14：检测针对当前页面包括的各个区块的筛选参数的参数值修改操作。

完成响应函数的分配后，可以检测用户是否修改当前页面包括的各个区块的筛选参数的参数值，也就是检测用户是否针对当前页面包括的各个区块的筛选参数的参数值进行参数值修改操作。

s15：若检测到针对当前页面包括的一个区块的筛选参数的参数值修改操作，则调用与一个区块的区块标识和筛选参数的参数名对应的响应函数根据当前页面的页面数据渲染一个区块。

当检测到当前页面的一个区块的筛选参数的参数值被修改后，即检测到针对一个区块的筛选参数的参数值修改操作，这时可以调用该区块的区块标识和筛选参数的参数名对应的响应函数根据当前页面的数据来渲染该区块。

该方案中，直接根据初次渲染当前页面时的页面数据渲染筛选参数的参数值修改的区块，无需预先编写各种参数值组合对应的区块信息，从而可以节省大量的人力资源，页面的可扩展性和可维护性很好，每个区块的可移植性和重用性也很好；并且，无需与服务器进行交互，从而可以节省网络资源，提升用户体验；同时，只针对筛选参数的参数值修改的区块进行渲染，无需渲染所有包括筛选参数的区块，从而可以节省系统资源，有效地提升用户体验。

下面详细介绍上述方法中的各个步骤。

具体的，上述s13中的根据每个区块的区块标识为对应的区块分配响应函数的实现过程，具体包括：获取区块标识与业务类型的对应关系；从对应关系中查找每个区块的区块标识对应的业务类型，得到对应区块的业务类型；根据每个区块的业务类型为对应区块分配响应函数。

可以预先设置区块标识与业务类型的对应关系，该对应关系中包括多个表项，每个表项包括区块标识及其所属的区块的业务类型。当需要为区块分配响应函数时，可以从该对应关系中查找每个区块的业务类型，然后根据区块的业务类型为对应区块分配响应函数。响应函数根据页面数据使用的编写语言的不同来确定，例如，对于javascript语言，可以采用addeventlistener函数来实现。

具体的，上述s13中的对应保存每个区块的区块标识、筛选参数的参数名和响应函数，具体包括：获取当前页面的设定元素；在设定元素上注册每个区块的区块标识和筛选参数的参数名对应的响应函数。

相应地，上述s15中的调用与一个区块的区块标识和筛选参数的参数名对应的响应函数根据当前页面的页面数据渲染一个区块，具体包括：在当前页面的设定元素上抛出一个区块的区块标识和筛选参数的参数名；调用与一个区块的区块标识和筛选参数的参数名对应的响应函数、从当前页面的页面数据中获取与一个区块的区块标识对应的数据并执行获取的数据。

在本申请实施例中，可以在当前页面的设定元素上注册每个区块的区块标识和筛选参数的参数名对应的响应函数，相应地，当当前页面的某个区块的筛选参数的参数值被修改后，可以通过调用该响应函数来渲染该区块。其中，设定元素可以根据实际需要设定，对于超文本标记语言html类型的页面，设定元素可以是body元素。

在具体实现时，筛选参数的参数名可以表示两个含义：第一是代表筛选参数的名字，第二是代表筛选参数的修改事件的名字，当一个区块的筛选参数被修改后，也就相当于触发了该筛选参数的参数名的事件，这时可以在设定元素上抛出一个区块的区块标识和筛选参数的参数名，并调用一个区块的区块标识和筛选参数的参数名对应的响应函数处理该事件，即调用响应函数从当前页面的页面数据中获取与一个区块的区块标识对应的数据并执行获取的数据，由于在页面数据中包括实现每个区块的业务逻辑所需要的数据，因此，可以调用响应函数直接从页面数据中获取一个区块的数据并执行该数据，从而就可以实现渲染一个区块。

页面数据采用不同的编写语言，上述s15中调用与一个区块的区块标识和筛选参数的参数名对应的响应函数根据当前页面的页面数据渲染一个区块的实现过程中的使用函数也可能不同，例如，当编写语言为javascript时，要先通过createevent函数先创建一个事件，再使用initevent初始化该事件，最后通过dispatchevent函数将所述事件在body元素上进行触发。

本申请实施例还提供另一种页面渲染方法，该方法的流程如图2所示，在图1所示的方法的基础上，还包括：

s16：获取一个区块的筛选参数修改后的的参数值。

s17：将修改后的参数值添加在当前页面的第一统一资源定位符(uniformresourcelocation，url)的哈希值中，得到第二url。

s18：保存第二url。

相关技术中传递参数的方式是通过url的query部分来传递的参数，这也是url的query部分被设计出来的目的。url中还有一个部分--哈希(hash)值，相关技术中，哈希值的意义是用来在页面中进行定位的，例如url地 址”http://www.example.com/somepath/？a＝b#c”中，“？”和“#”之间的内容是query部分，用来传递参数，“#”之后的内容是哈希部分，用来定位。

而在本申请实施例中，参数是通过url中的哈希值来进行传递的，而不是像相关方式中那样通过url中的query部分来传递的。例如，在url:“http://www.example.com/somepath/？a＝b#c＝d,e＝f”中，参数是通过“#”之后的内容来传递的：参数c的值是d，参数e的值是f。

在获取到一个区块的筛选参数修改后的参数值后，可以将修改后的参数值添加到第一url的哈希值中，得到第二url，可以保存该第二url，当需要进行引流投放时，将该第二url在外部进行引流投放。

具体的，上述s11中的根据当前页面的页面数据完成当前页面的首次渲染的实现过程，具体包括：接收服务器发送的当前页面的页面数据；根据当前页面的页面数据渲染当前页面；从当前页面的第一url的哈希值中获取当前页面包括的各个区块的筛选参数的参数值；根据获取的各个区块的筛选参数的参数值渲染对应区块。

由于在本申请实施例中筛选参数的参数值是保存在哈希值中的，在对当前页面进行首次渲染时，可以从第一url的哈希值中获取每个区块的筛选参数的参数值，并根据获取的各个区块的筛选参数的参数值对相应区块进行渲染，渲染的结果有多种可能的情况，例如，某一区块可能显示为被选中的状态等等。

基于同一发明构思，本申请实施例还提供一种页面渲染装置，该装置可以但不限于应用在终端中，该装置的结构如3图所示，包括渲染单元31、接收单元32、分配单元33、检测单元34和调用单元35，其中：

上述渲染单元31，用于根据当前页面的页面数据完成当前页面的首次渲染；

上述接收单元32，用于接收当前页面包括的各个区块发送的注册请求，每个注册请求中携带对应区块的区块标识和筛选参数的参数名；

上述分配单元33，用于根据每个区块的区块标识为对应的区块分配响应函数，并对应保存每个区块的区块标识、筛选参数的参数名和响应函数；以及，

上述检测单元34，用于检测针对当前页面包括的各个区块的筛选参数的参数值修改操作；

上述调用单元35，用于若检测到针对当前页面包括的一个区块的筛选参数的参数值修改操作，则调用与一个区块的区块标识和筛选参数的参数名对应的响应函数根据当前页面的页面数据渲染一个区块。

该方案中，直接根据初次渲染当前页面时的页面数据渲染筛选参数的参数值修改的区 块，无需预先编写各种参数值组合对应的区块信息，从而可以节省大量的人力资源，页面的可扩展性和可维护性很好，每个区块的可移植性和重用性也很好；并且，无需与服务器进行交互，从而可以节省网络资源，提升用户体验；同时，只针对筛选参数的参数值修改的区块进行渲染，无需渲染所有包括筛选参数的区块，从而可以节省系统资源，有效地提升用户体验。

具体的，上述分配单元33，用于根据每个区块的区块标识为对应的区块分配响应函数，具体用于：

获取区块标识与业务类型的对应关系；

从对应关系中查找每个区块的区块标识对应的业务类型，得到对应区块的业务类型；

根据每个区块的业务类型为对应区块分配响应函数。

具体的，上述分配单元33，用于对应保存每个区块的区块标识、筛选参数的参数名和响应函数，具体用于：

获取当前页面的设定元素；

在设定元素上注册每个区块的区块标识和筛选参数的参数名对应的响应函数。

具体的，上述调用单元35，用于调用与一个区块的区块标识和筛选参数的参数名对应的响应函数根据当前页面的页面数据渲染一个区块，具体用于：

在当前页面的设定元素上抛出一个区块的区块标识和筛选参数的参数名；

调用与一个区块的区块标识和筛选参数的参数名对应的响应函数、从当前页面的页面数据中获取与一个区块的区块标识对应的数据并执行获取的数据。

本申请实施例还提供另一种页面渲染装置，该装置与如图3所示的装置相同的单元省略不表，该装置的结构如图4所示，在如图3所示的装置的基础上，还包括获取单元36、添加单元37和保存单元38，其中：

上述获取单元36，用于获取一个区块的筛选参数修改后的的参数值；

上述添加单元37，用于将修改后的参数值添加在所述当前页面的第一url的哈希值中，得到第二url；

上述保存单元38，用于保存第二url。

具体的，上述渲染单元31，用于根据当前页面的页面数据完成当前页面的首次渲染，具体用于：

接收服务器发送的当前页面的页面数据；

根据当前页面的页面数据渲染当前页面；

从当前页面的第一url的哈希值中获取当前页面包括的各个区块的筛选参数的参数值；

根据获取的各个区块的筛选参数的参数值渲染对应区块。

上述说明示出并描述了本申请的优选实施例，但如前所述，应当理解本申请并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本申请的精神和范围，则都应在本申请所附权利要求的保护范围内。