网页渲染方法、装置、电子设备及计算机可读存储介质与流程

1.本技术涉及计算机技术领域，特别是涉及一种网页渲染方法、装置、电子设备及计算机可读存储介质。


背景技术：

2.随着信息时代的来临，用户对于信息的获取途径逐渐向网页倾斜，同时用户对于网页渲染的速度也提出了更高的要求。现有技术中，网页对应的模板脚本通常集成有多种功能的完整代码，以致模板脚本的体积较大，进而在进行网页渲染时执行网页对应的模板脚本所需的网络带宽要求高，网页渲染的时间长。有鉴于此，如何提高网页渲染的效率，减少网页渲染时间成为亟待解决的问题。


技术实现要素：

3.本技术主要解决的技术问题是提供一种网页渲染方法、装置、电子设备及计算机可读存储介质，能够提高网页渲染的效率，减少网页渲染时间。
4.为解决上述技术问题，本技术第一方面提供一种网页渲染方法，所述网页渲染方法包括：获取到网页对应的模板脚本，将所述模板脚本对应的标识发送至转发服务器；藉由所述转发服务器从后端服务器获取与所述标识对应的配置文件，基于所述配置文件生成载荷数据标签并将所述载荷数据标签与所述模板脚本拼接；执行所述模板脚本，从所述转发服务器获取所述模板脚本对应的多个模块脚本；基于所述模板脚本中的所述载荷数据标签，获取所述载荷数据标签对应的载荷数据实体并写入到对应的所述模块脚本中；执行包括所述载荷数据实体的所有所述模块脚本，以使所述网页完成渲染。
5.为解决上述技术问题，本技术第二方面提供一种网页渲染装置，所述网页渲染装置包括：转发模块、拼接模块、处理模块、写入模块和渲染模块。其中，转发模块用于获取到网页对应的模板脚本，将所述模板脚本对应的标识发送至转发服务器；拼接模块用于藉由所述转发服务器从后端服务器获取与所述标识对应的配置文件，基于所述配置文件生成载荷数据标签并将所述载荷数据标签与所述模板脚本拼接；处理模块用于执行所述模板脚本，从所述转发服务器获取所述模板脚本对应的多个模块脚本；写入模块用于基于所述模板脚本中的所述载荷数据标签，获取所述载荷数据标签对应的载荷数据实体并写入到对应的所述模块脚本中；渲染模块用于执行包括所述载荷数据实体的所有所述模块脚本，以使所述网页完成渲染。
6.为解决上述技术问题，本技术第三方面提供一种电子设备，包括相互耦接的存储器和处理器，其中，所述存储器存储有程序指令，所述处理器调用所述程序指令以实现上述第一方面的网页渲染方法。
7.为解决上述技术问题，本技术第四方面提供一种计算机可读存储介质，其上存储有程序指令，所述程序指令被处理器执行时实现上述第一方面的网页渲染方法。
8.本技术的有益效果是：本技术设立有转发服务器，在获取到网页对应的模板脚本
后，将模板脚本的标识发送至转发服务器，以使转发服务器获取与标识对应的配置文件，基于配置文件生成载荷数据标签将载荷数据标签与模板脚本拼接，以使模板脚本知悉有哪些载荷数据实体，进而执行模板脚本从转发服务器获取模板脚本对应的多个模块脚本，从而将模板脚本拆分为多个模块脚本，并基于载荷数据标签获取对应的载荷数据实体从写入到模块脚本中，以使载荷数据实体这类代码体积较大的数据由多个模块脚本来执行，从而提高网页渲染的效率，减少网页渲染时间。
附图说明
9.为了更清楚地说明本技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。其中：
10.图1是本技术网页渲染方法一实施例的流程示意图；
11.图2是本技术网页渲染方法另一实施例的流程示意图；
12.图3是本技术网页渲染装置一实施例的框架示意图；
13.图4是本技术电子设备一实施例的框架示意图；
14.图5是本技术计算机可读存储介质一实施例的框架示意图。
具体实施方式
15.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性的劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
16.本文中术语“系统”和“网络”在本文中常被可互换使用。本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。此外，本文中的“多”表示两个或者多于两个。
17.请参阅图1，图1是本技术网页渲染方法一实施例的流程示意图。
18.具体而言，可以包括如下步骤：
19.s101：获取到网页对应的模板脚本，将模板脚本对应的标识发送至转发服务器。
20.具体地，当用户打开网页后，获得网页对应的模板脚本和模板脚本对应的标识，将模板脚本对应的标识发送给转发服务器，以使转发服务器接收模板脚本对应的标识，其中，转发服务器用于响应网页端的请求以及用于将数据发送至网页端。
21.在一应用方式中，每个网页基于一个模板脚本生成，在生成网页时将网页的路径地址末尾的参数作为模板脚本对应的标识，当用户打开网页后，获取网页的路径地址，基于网页的路径地址末尾的参数获取网页对应的模板脚本和模板脚本对应的标识，将模板脚本对应的标识发送至转发服务器。
22.s102：藉由转发服务器从后端服务器获取与标识对应的配置文件，基于配置文件生成载荷数据标签并将载荷数据标签与模板脚本拼接。
23.具体地，模板脚本所对应的配置文件存储在后端服务器上，通过转发服务器从后端服务器上获取与模板脚本的标识所对应的配置文件，以获得模板脚本对应的配置文件，基于配置文件中用于实现不同功能的载荷数据实体生成载荷数据标签，其中，载荷数据标签包括载荷数据实体的名称和/或位置和/或索引等信息，以使模板脚本中拼接载荷数据标签后，模板脚本在执行时能够知悉有哪些载荷数据实体。其中，每个载荷数据实体对应的代码用于实现一种类型的功能，载荷数据实体对应的代码执行后可为网页提供图像、文本、音频等不同类型的数据，也可以为网页提供弹窗、悬浮窗等不同功能的模块。
24.在一应用方式中，模板脚本包括多种类型的模块脚本，每个模块脚本经过预先编译存储在转发服务器上，在配置对应的模块脚本时，转发服务器将对应的模块脚本发送给后端服务器，运维人员在后端服务器上生成模块脚本对应的配置文件并保存，其中，配置文件对应有一个模块主函数，模块主函数中包括至少一个用于实现一种类型的功能的子函数，子函数中对应有多行需要逐行执行的代码，每个子函数即为载荷数据实体。
25.在一应用场景中，藉由转发服务器获取标识对应的模板脚本，基于模板脚本所包括的模块脚本，通过转发服务器从后端服务器获取每个模块脚本对应的配置文件，提取配置文件中的载荷数据实体，基于载荷数据实体在配置文件中的位置生成载荷数据标签，即基于子函数在模块主函数中的位置生成载荷数据标签，将载荷数据标签拼接至模板脚本的末尾。
26.在另一应用场景中，藉由转发服务器获取标识对应的模板脚本，基于模板脚本所包括的模块脚本，通过转发服务器从后端服务器获取每个模块脚本对应的配置文件，提取配置文件中的载荷数据实体，基于载荷数据实体在配置文件中的索引生成载荷数据标签，即基于子函数相对模块主函数的索引值生成载荷数据标签，将载荷数据标签拼接至模板脚本的末尾。
27.s103：执行模板脚本，从转发服务器获取模板脚本对应的多个模块脚本。
28.具体地，响应用户打开网页的请求，解释并执行模板脚本，获取模板脚本对应的所有模块脚本，其中，在生成网页时网页上不同类型的功能对应有一个模块脚本，模块脚本预先存储在转发服务器上，执行模板脚本进而从转发服务器上获取模板脚本对应的多个模块脚本。
29.s104：基于模板脚本中的载荷数据标签，获取载荷数据标签对应的载荷数据实体并写入到对应的模块脚本中。
30.具体地，根据模板脚本中拼接的载荷数据标签获取与载荷数据标签相对应的载荷数据实体，将载荷数据实体写入到对应的模块脚本中。
31.在一应用方式中，获取与载荷数据标签相对应的载荷数据实体，将载荷数据实体所对应的代码复制并写入到对应的模块脚本中。
32.在一应用场景中，载荷数据标签为载荷数据实体在配置文件中的位置，且配置文件与模块脚本相对应，基于载荷数据标签从配置文件对应的模块主函数中提取对应位置的子函数，将子函数名称及子函数中的代码写入配置文件对应的模块脚本中。
33.在另一应用场景中，载荷数据标签为载荷数据实体对应的索引，且配置文件与模块脚本相对应，基于载荷数据标签从配置文件对应的模块主函数中查找到对应的子函数，将子函数名称及子函数中的代码写入配置文件对应的模块脚本中。
34.s105：执行包括载荷数据实体的所有模块脚本，以使网页完成渲染。
35.具体地，执行所有模块脚本，在执行模块脚本时将包括脚本中的载荷数据实体也一并执行，以使网页完成渲染。其中，模块脚本执行时可以并行执行，由于拆分了模块脚本，单个模块脚本的代码体积较小，从而在执行模块脚本时能够更快更流畅地完成网页渲染。
36.在一应用方式中，每个模块脚本中的代码逐行执行，且每个模块脚本并行执行从而提高不同类型的模块脚本之间的执行效率，提高网页渲染速度。
37.上述方案，设立有转发服务器，在获取到网页对应的模板脚本后，将模板脚本的标识发送至转发服务器，以使转发服务器获取与标识对应的配置文件，基于配置文件生成载荷数据标签将载荷数据标签与模板脚本拼接，以使模板脚本知悉有哪些载荷数据实体，进而执行模板脚本从转发服务器获取模板脚本对应的多个模块脚本，从而将模板脚本拆分为多个模块脚本，并基于载荷数据标签获取对应的载荷数据实体从写入到模块脚本中，以使载荷数据实体这类代码体积较大的数据由多个模块脚本来执行，从而提高网页渲染的效率，减少网页渲染时间。
38.请参阅图2，图2是本技术网页渲染方法另一实施例的流程示意图。
39.具体而言，可以包括如下步骤：
40.s201：获取到网页对应的模板脚本，将模板脚本对应的标识发送至转发服务器。
41.具体地，获得网页对应的模板脚本和模板脚本对应的标识，从网页端将标识发送给转发服务器。
42.在一应用方式中，每个网页基于一个模板脚本生成，在生成网页时在模板脚本内插入一个唯一标识，当用户打开网页后获取网页对应的模板脚本，提取模板脚本中的标识，将模板脚本对应的标识发送至转发服务器。
43.s202：藉由转发服务器获取标识对应的模板脚本，基于模板脚本包括的所有模块脚本从后端服务器获取模块脚本对应的配置文件。
44.具体地，模板脚本包括多种类型的模块脚本，每个模块脚本编译完成后存储在转发服务器上，且每个模块脚本对应有配置文件，配置文件存储在后端服务器上。
45.进一步地，模块脚本内包括空置的用于放置载荷数据实体的载荷数据插槽，在编译模块脚本时，在载荷数据插槽内添加伪造的载荷数据，其中伪造的载荷数据的代码体积小于载荷数据实体，伪造的载荷数据用于先占据载荷数据插槽，进而编写模块脚本的逻辑，将伪造的载荷数据与模块脚本的逻辑压缩编译打包，以生成模块脚本并存储在转发服务器上。在网页生成阶段，为实现在后台配置什么，就在网页前端展示什么的目的，也即为了实现所见即所得功能，在引入了任一类型的功能模块之后将从转发服务器上获取该功能模块对应的模块脚本，转发服务器将对应的模块脚本发送至后台服务器，运维人员在后台服务器上设置配置文件，其中配置文件包括载荷数据实体以用于后续填充载荷数据插槽，在完成配置文件的设置后即可实现所见即所得的能力。
46.在一应用方式中，转发服务器根据标识即可快速确定对应的模板脚本，根据模板脚本中所包括的所有模块脚本，藉由转发服务器从后端服务器上获取与模块脚本相对应的配置文件，其中，配置文件中的载荷数据实体中包括多行代码，在后续用于填充载荷数据插槽，配置文件存储在后端服务器上以供调用，减小了模板脚本和模块脚本的代码体积，提高了模板脚本和模块脚本的执行效率。
47.s203：遍历所有模块脚本对应的配置文件，以获得所有配置文件中的载荷数据实体，将载荷数据实体转化成载荷数据标签。
48.具体地，分别提取模板脚本包括的所有模块脚本对应的配置文件，从配置文件中获取载荷数据实体，将载荷数据实体转换为载荷数据标签，其中载荷数据标签的代码体积远小于载荷数据实体，进而后续执行模板脚本时提高模板脚本的执行效率。
49.在一应用方式中，在后端服务器上依次查找模块脚本对应的配置文件中的载荷数据实体，生成载荷数据实体的索引并将载荷数据实体的索引作为载荷数据标签。
50.s204：将载荷数据标签和所有模块脚本在转发服务器上的地址拼接至模板脚本的末尾。
51.具体地，将载荷数据标签和所有模块脚本在转发服务器上的地址一同拼接至模板脚本的末尾，进而模板脚本能够基于载荷数据标签获取对应的载荷数据实体，以及基于模块脚本在转发服务器上的地址获取模块脚本，模板脚本中集成的载荷数据标签和模块脚本在转发服务器上的地址的数据量远小于载荷数据实体，从而在执行模板脚本时能够大大提高模板脚本执行时的效率。
52.在一应用方式中，将模块脚本在转发服务器上的地址拼接至模板脚本的末尾并将模板脚本序列化；将载荷数据标签加密后拼接至序列化后的模板脚本的末尾。
53.具体地，将模块脚本在转发服务器上的地址拼接至模板脚本的末尾，进而将模板脚本序列化，以使模板脚本便于传输，将载荷数据标签加密后拼接至序列化后的模板脚本末尾，以提高载荷数据标签对应的载荷数据实体的安全性。
54.在一应用场景中，将载荷数据标签利用安全散列算法(secure hash algorithm 1，sha
‑
1)加密后拼接至序列化后的模板脚本的末尾，其中，sha
‑
1是一种密码散列函数，可以生成一个被称为消息摘要的160位散列值，散列值通常的呈现形式为40个十六进制数。在其他应用场景用也可以采用其他加密算法，本技术对此不做具体限定。
55.s205：执行模板脚本，从转发服务器获取模板脚本对应的多个模块脚本。
56.具体地，执行网页对应的模板脚本，以获得网页对应的基础逻辑和底层图像渲染；基于模块脚本包括的所有模块脚本在转发服务器上的地址，从转发服务器上获取模板脚本对应的所有模块脚本。
57.其中，响应用户打开网页的请求，解释执行模板脚本，从而获得网页的基础逻辑并等待底层图像渲染完毕，执行到模板脚本的末尾时，提取模板脚本末尾所包含的模块脚本在转发服务器上的地址，基于模块脚本在转发服务器上的地址提取对应位置的模块脚本，从而完成模板脚本的执行，以快速响应用户打开网页的请求，完成网页的基础逻辑执行和底层图像渲染并查找到模板脚本对应的模块脚本。
58.s206：从模板脚本的末尾提取载荷数据标签，基于载荷数据标签获取对应的载荷数据实体。
59.具体地，从模板脚本的末尾提取出载荷数据的标签，根据载荷数据标签匹配对应的载荷数据实体。
60.在一应用方式中，载荷数据标签为载荷数据实体的索引，根据载荷数据实体的索引从后端服务器上的配置文件中获取对应的载荷数据实体对应的多行代码。
61.s207：将载荷数据实体写入对应的模块脚本的头部。
62.具体地，载荷数据实体与载荷数据标签对应，通过载荷数据标签可以获得对应的模块脚本，进而将载荷数据实体写入对应的模块脚本的头部，以用于优先执行并获取载荷数据实体。
63.在一应用方式中，载荷数据插槽设置在模板脚本的头部，利用载荷数据实体对应的多行代码代替伪造的载荷数据，从而将载荷数据实体写入对应的模块脚本的头部。
64.s208：执行包括载荷数据实体的所有模块脚本，以使网页完成渲染。
65.具体地，执行包括载荷数据实体的所有模块脚本，在基础逻辑和底层图像渲染上，基于载荷数据实体对网页进行渲染。其中，包括载荷数据实体的所有模块脚本可以依次执行也可以并行执行。
66.在一应用方式中，载荷数据实体对应的多行代码存储在载荷数据插槽中，在网页的基础逻辑和底层图像渲染上，逐行执行模块脚本的载荷数据插槽中的代码从而对网页进行渲染，以使载荷数据实体对应的功能在网页上显示，其中，至少部分模块脚本并行执行，进而其他模块脚本依次并行执行直至所有模块脚本执行完毕。
67.在本实施例中，设立有转发服务器，通过转发服务器来获取模板脚本包括的所有模块脚本的配置文件，基于配置文件生成载荷数据标签，将载荷数据标签和模块脚本在转发服务器上的地址拼接至模板脚本的末尾，以减小模板脚本的代码体积，进而执行模板脚本以提高模板脚本的执行效率，通过模块脚本在转发服务器上的地址获取模块脚本，通过载荷数据标签获取载荷数据实体，将载荷数据实体写入对应的模块脚本，执行所有的模块脚本以完成网页渲染，通过将模板脚本分成多个模块脚本来执行，以提高网页渲染的效率。
68.请参阅图3，图3是本技术网页渲染装置一实施例的框架示意图。网页渲染装置30包括转发模块300、拼接模块302、处理模块304、写入模块306和渲染模块308。其中，转发模块300用于获取到网页对应的模板脚本，将模板脚本对应的标识发送至转发服务器；拼接模块302用于藉由转发服务器从后端服务器获取与标识对应的配置文件，基于配置文件生成载荷数据标签并将载荷数据标签与模板脚本拼接；处理模块304用于执行模板脚本，从转发服务器获取模板脚本对应的多个模块脚本；写入模块306用于基于模板脚本中的载荷数据标签，获取载荷数据标签对应的载荷数据实体并写入到对应的模块脚本中；渲染模块308用于执行包括载荷数据实体的所有模块脚本，以使网页完成渲染。
69.上述方案，设立有转发服务器，转发模块300在获取到网页对应的模板脚本后，将模板脚本的标识发送至转发服务器，以使转发服务器获取与标识对应的配置文件，拼接模块302基于配置文件生成载荷数据标签将载荷数据标签与模板脚本拼接，以使模板脚本知悉有哪些载荷数据实体，进而处理模块304执行模板脚本从转发服务器获取模板脚本对应的多个模块脚本，从而将模板脚本拆分为多个模块脚本，写入模块306基于载荷数据标签获取对应的载荷数据实体从写入到模块脚本中，并由渲染模块308执行包括载荷数据实体的模块脚本，以使载荷数据实体这类代码体积较大的数据由多个模块脚本来执行，从而提高网页渲染的效率，减少网页渲染时间。
70.在一些实施例中，模板脚本包括多种类型的模块脚本，每个模块脚本编译完成后存储在转发服务器上，且每个模块脚本对应有配置文件，配置文件存储在后端服务器上。拼接模块302还可以用于：藉由转发服务器获取标识对应的模板脚本，基于模板脚本包括的所有模块脚本从后端服务器获取模块脚本对应的配置文件。
71.在一些实施例中，拼接模块302还可以用于：遍历所有模块脚本对应的配置文件，以获得所有配置文件中的载荷数据实体，将载荷数据实体转化成载荷数据标签；将载荷数据标签和所有模块脚本在转发服务器上的地址拼接至模板脚本的末尾。
72.在一些实施例中，拼接模块302还可以用于：将模块脚本在转发服务器上的地址拼接至模板脚本的末尾并将模板脚本序列化；将载荷数据标签加密后拼接至序列化后的模板脚本的末尾。
73.在一些实施例中，写入模块306还可以用于：从模板脚本的末尾提取载荷数据标签，基于载荷数据标签获取对应的载荷数据实体；将载荷数据实体写入对应的模块脚本的头部。
74.在一些实施例中，处理模块304还可以用于：执行网页对应的模板脚本，以获得网页对应的基础逻辑和底层图像渲染；基于模块脚本包括的所有模块脚本在转发服务器上的地址，从转发服务器上获取模板脚本对应的所有模块脚本。
75.在一些实施例中，渲染模块308还可以用于：执行包括载荷数据实体的所有模块脚本，在基础逻辑和底层图像渲染上，基于载荷数据实体和模块脚本对应的配置文件对网页进行渲染。
76.请参阅图4，图4是本技术电子设备一实施例的框架示意图。电子设备40包括相互耦接的存储器401和处理器402，存储器401存储有程序指令，处理器402调用程序指令以实现上述任一网页渲染方法实施例的步骤。
77.具体而言，处理器402用于控制其自身以及存储器401以实现上述任一网页渲染方法实施例的步骤。处理器402还可以称为cpu(central processing unit，中央处理单元)。处理器402可能是一种集成电路芯片，具有信号的处理能力。处理器402还可以是通用处理器、数字信号处理器(digital signal processor,dsp)、专用集成电路(application specific integrated circuit,asic)、现场可编程门阵列(field
‑
programmable gate array,fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。另外，处理器402可以由集成电路芯片共同实现。
78.上述方案，处理器402能够通过设立转发服务器，减少网页对应的模板脚本的代码体积，从而提高网页渲染的效率，减少网页渲染时间。
79.请参阅图5，图5是本技术计算机可读存储介质一实施例的框架示意图。计算机可读存储介质50存储有能够被处理器运行的程序指令500，程序指令500被处理器执行时实现上述任一网页渲染方法实施例的步骤。
80.在本技术所提供的几个实施例中，应该理解到，所揭露的方法、装置，可以通过其它的方式实现。例如，以上所描述的装置实施方式仅仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性、机械或其它的形式。
81.作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到网络单元
上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施方式方案的目的。
82.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
83.集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本技术各个实施方式方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read
‑
only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。