页面渲染方法、装置、电子设备、存储介质和程序产品与流程

1.本公开涉及数据渲染技术领域，具体涉及一种页面渲染方法、装置、电子设备、存储介质和程序产品。


背景技术：

2.随着社会的进步和数据技术的发展，互联网技术越来越多地渗入到人们的生活中，人们的衣食住行也都越来越依赖手机等智能终端。手机页面通常包括多个页面元素，手机页面的显示是通过对于多个页面元素的渲染实现的。现有技术中，当页面元素有更新或新增时，整个页面需要等待新元素的新代码下载成功后再渲染整个页面，但该处理方式由于下载过程耗时较长，在新代码下载时用户会看到一段时间的白屏，进而导致页面渲染性能下降，并且用户还有可能因此以为程序卡顿而退出应用，更加达不到极速渲染的效果。


技术实现要素：

3.本公开实施例提供一种页面渲染方法、装置、电子设备、存储介质和程序产品。
4.第一方面，本公开实施例中提供了一种页面渲染方法。
5.具体的，所述页面渲染方法，包括：
6.响应于接收到目标页面加载命令，检测所述目标页面上的页面元素是否有变化；
7.当检测确定所述目标页面上的页面元素有变化时，获取所述目标页面的本地元素代码；
8.下载变化元素代码，并利用所述本地元素代码和变化元素代码对于所述目标页面进行分时渲染。
9.结合第一方面，本公开在第一方面的第一种实现方式中，所述变化元素包括更新元素和新增元素。
10.结合第一方面和第一方面的第一种实现方式，本公开实施例在第一方面的第二种实现方式中，所述下载变化元素代码，并利用所述本地元素代码和变化元素代码对于所述目标页面进行分时渲染，包括：
11.利用所述本地元素代码对于所述目标页面进行渲染；
12.下载变化元素代码；
13.响应于所述变化元素代码下载完成，利用所述变化元素代码对于所述目标页面进行更新渲染。
14.结合第一方面、第一方面的第一种实现方式和第一方面的第二种实现方式，本公开实施例在第一方面的第三种实现方式中，所述下载变化元素代码，包括：
15.确定变化元素标识信息；
16.向服务器发送变化元素代码下载请求消息，以根据所述变化元素标识信息从所述服务器下载所述变化元素代码，其中，所述变化元素代码下载请求消息携带有所述变化元素标识信息。
17.结合第一方面、第一方面的第一种实现方式、第一方面的第二种实现方式和第一方面的第三种实现方式，本公开实施例在第一方面的第四种实现方式中，所述利用所述变化元素代码对于所述目标页面进行更新渲染，包括：
18.确定变化元素在所述目标页面中的位置；
19.利用所述变化元素代码对于所述变化元素在所述目标页面中的位置进行更新渲染。
20.第二方面，本公开实施例中提供了一种页面渲染装置。
21.具体的，所述页面渲染装置，包括：
22.检测模块，被配置为响应于接收到目标页面加载命令，检测所述目标页面上的页面元素是否有变化；
23.获取模块，被配置为当检测确定所述目标页面上的页面元素有变化时，获取所述目标页面的本地元素代码；
24.渲染模块，被配置为下载变化元素代码，并利用所述本地元素代码和变化元素代码对于所述目标页面进行分时渲染。
25.结合第二方面，本公开在第二方面的第一种实现方式中，所述变化元素包括更新元素和新增元素。
26.结合第二方面和第二方面的第一种实现方式，本公开实施例在第二方面的第二种实现方式中，所述渲染模块被配置为：
27.利用所述本地元素代码对于所述目标页面进行渲染；
28.下载变化元素代码；
29.响应于所述变化元素代码下载完成，利用所述变化元素代码对于所述目标页面进行更新渲染。
30.结合第二方面、第二方面的第一种实现方式和第二方面的第二种实现方式，本公开实施例在第二方面的第三种实现方式中，所述下载变化元素代码的部分，被配置为：
31.确定变化元素标识信息；
32.向服务器发送变化元素代码下载请求消息，以根据所述变化元素标识信息从所述服务器下载所述变化元素代码，其中，所述变化元素代码下载请求消息携带有所述变化元素标识信息。
33.结合第二方面、第二方面的第一种实现方式、第二方面的第二种实现方式和第二方面的第三种实现方式，本公开实施例在第二方面的第四种实现方式中，所述利用所述变化元素代码对于所述目标页面进行更新渲染的部分，被配置为：
34.确定变化元素在所述目标页面中的位置；
35.利用所述变化元素代码对于所述变化元素在所述目标页面中的位置进行更新渲染。
36.第三方面，本公开实施例提供了一种电子设备，包括存储器和至少一个处理器，其中，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述至少一个处理器执行以实现上述页面渲染方法的方法步骤。
37.第四方面，本公开实施例提供了一种计算机可读存储介质，用于存储页面渲染装置所用的计算机指令，其包含用于执行上述页面渲染方法为页面渲染装置所涉及的计算机
指令。
38.第五方面，本公开实施例提供了一种计算机程序产品，包括计算机程序/指令，其中，该计算机程序/指令被处理器执行时实现上述页面渲染方法。
39.本公开实施例提供的技术方案可以包括以下有益效果：
40.上述技术方案在检测确定目标页面上的页面元素有变化时，以当前本地元素代码渲染页面的同时，下载变化元素代码，实现本地元素代码和变化元素代码的分时渲染。该技术方案能够避免页面渲染的中断，保障页面渲染的性能，实现极速渲染的效果。
41.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
42.结合附图，通过以下非限制性实施方式的详细描述，本公开的其它特征、目的和优点将变得更加明显。在附图中：
43.图1示出根据本公开一实施方式的页面渲染方法的流程图；
44.图2a示出根据本公开一实施方式的页面渲染示意图；
45.图2b示出根据本公开另一实施方式的页面渲染示意图；
46.图3示出根据本公开一实施方式的页面渲染装置的结构框图；
47.图4示出根据本公开一实施方式的电子设备的结构框图；
48.图5是适于用来实现根据本公开一实施方式的页面渲染方法的计算机系统的结构示意图。
具体实施方式
49.下文中，将参考附图详细描述本公开的示例性实施方式，以使本领域技术人员可容易地实现它们。此外，为了清楚起见，在附图中省略了与描述示例性实施方式无关的部分。
50.在本公开中，应理解，诸如“包括”或“具有”等的术语旨在指示本说明书中所公开的特征、数字、步骤、行为、部件、部分或其组合的存在，并且不欲排除一个或多个其他特征、数字、步骤、行为、部件、部分或其组合存在或被添加的可能性。
51.另外还需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。
52.本公开实施例提供的技术方案在检测确定目标页面上的页面元素有变化时，以当前本地元素代码渲染页面的同时，下载变化元素代码，实现本地元素代码和变化元素代码的分时渲染。该技术方案能够避免页面渲染的中断，保障页面渲染的性能，实现极速渲染的效果。
53.图1示出根据本公开一实施方式的页面渲染方法的流程图，如图1所示，所述页面渲染方法包括以下步骤s101-s103：
54.在步骤s101中，响应于接收到目标页面加载命令，检测所述目标页面上的页面元素是否有变化；
55.在步骤s102中，当检测确定所述目标页面上的页面元素有变化时，获取所述目标
页面的本地元素代码；
56.在步骤s103中，下载变化元素代码，并利用所述本地元素代码和变化元素代码对于所述目标页面进行分时渲染。
57.上文提及，随着社会的进步和数据技术的发展，互联网技术越来越多地渗入到人们的生活中，人们的衣食住行也都越来越依赖手机等智能终端。手机页面通常包括多个页面元素，手机页面的显示是通过对于多个页面元素的渲染实现的。现有技术中，当页面元素有更新或新增时，整个页面需要等待新元素的新代码下载成功后再渲染整个页面，但该处理方式由于下载过程耗时较长，在新代码下载时用户会看到一段时间的白屏，进而导致页面渲染性能下降，并且用户还有可能因此以为程序卡顿而退出应用，更加达不到极速渲染的效果。
58.考虑到上述缺陷，在该实施方式中，提出一种页面渲染方法，该方法在检测确定目标页面上的页面元素有变化时，以当前本地元素代码渲染页面的同时，下载变化元素代码，实现本地元素代码和变化元素代码的分时渲染。该技术方案能够避免页面渲染的中断，保障页面渲染的性能，实现极速渲染的效果。
59.在本公开一实施方式中，所述页面渲染方法可适用于计算机、计算设备、电子设备、智能终端等客户端。
60.在本公开一实施方式中，所述目标页面加载命令指的是用户发送的用于加载某一页面的命令。
61.在本公开一实施方式中，所述页面元素指的是组成一个可显示页面的内容元素，其中，所述页面元素可包括以下元素中的一种或多种：文字、图片、音频、动画、视频，等等。
62.在本公开一实施方式中，所述页面元素的变化指的是所述页面元素出现更新或新增，即所述变化元素可包括更新元素和新增元素。
63.在本公开一实施方式中，所述元素代码指的是用于渲染所述元素的代码，所述本地元素代码指的是已经从服务器中下载并存储在本地的元素代码。
64.在上述实施方式中，在接收到目标页面加载命令后，首先检测所述目标页面上的页面元素是否存在更新或新增等变化；若检测确定所述目标页面上的页面元素存在更新或新增等变化时，先行获取存储在本地的所述目标页面的元素代码，即所述目标页面的本地元素代码，同时进行变化元素代码的下载，然后利用获取的所述本地元素代码和下载的所述变化元素代码对于所述目标页面进行分时渲染，从而避免页面渲染的中断，保障页面渲染的性能，实现极速渲染的效果。
65.在本公开一实施方式中，所述步骤s103，即下载变化元素代码，并利用所述本地元素代码和变化元素代码对于所述目标页面进行分时渲染的步骤，可包括以下步骤：
66.利用所述本地元素代码对于所述目标页面进行渲染；
67.下载变化元素代码；
68.响应于所述变化元素代码下载完成，利用所述变化元素代码对于所述目标页面进行更新渲染。
69.为了避免页面渲染被中断，保障页面渲染的性能，实现极速渲染的效果，在该实施方式中，采用分时渲染的策略对于所述目标页面进行更新渲染。具体地，首先利用先前获取的所述本地元素代码对于所述目标页面进行渲染，与此同时，请求下载变化元素代码，并在
所述变化元素代码下载完成后，利用所述变化元素代码对于所述目标页面进行更新渲染，以实现所述目标页面内容的最新呈现，这样即使在页面元素有更新或新增时，也无需等待新元素的新代码下载成功后再去渲染整个页面，也不会由于新元素的新代码下载过程耗时较长，在新元素的新代码下载时用户会看到一段时间的白屏，即，可借助所述本地元素代码和变化元素代码的分时渲染，实现新旧目标页面的无感更新，从而保障了页面渲染的性能，提升了用户的使用体验。
70.在本公开一实施方式中，所述下载变化元素代码的步骤，可包括以下步骤：
71.确定变化元素标识信息；
72.向服务器发送变化元素代码下载请求消息，以根据所述变化元素标识信息从所述服务器下载所述变化元素代码，其中，所述变化元素代码下载请求消息携带有所述变化元素标识信息。
73.在该实施方式中，借助变化元素标识信息来准确获取所述变化元素的代码数据，具体地，首先确定所述变化元素的标识信息，其中，所述变化元素的标识信息比如可以为所述变化元素的id，可借助所述目标页面的加载数据获得；然后将所述变化元素的标识信息携带在变化元素代码下载请求消息中发送给服务器，以从所述服务器下载得到与所述变化元素标识信息对应的、准确的变化元素代码。
74.在本公开一实施方式中，所述利用所述变化元素代码对于所述目标页面进行更新渲染的步骤，可包括以下步骤：
75.确定变化元素在所述目标页面中的位置；
76.利用所述变化元素代码对于所述变化元素在所述目标页面中的位置进行更新渲染。
77.在该实施方式中，在利用所述变化元素代码对于所述目标页面进行更新渲染时，首先确定变化元素在所述目标页面中的位置，然后利用下载得到的所述变化元素代码对于所述变化元素在所述目标页面中的位置进行更新渲染，实现所述目标页面的无感更新。
78.图2a示出根据本公开一实施方式的页面渲染示意图，在该实施方式中，所述变化元素为更新元素，如图2a所示，之前待渲染的目标页面包括三个页面元素：页面元素1、页面元素2和页面元素3，其中，页面元素2为更新的页面元素，首先根据获取的目标页面的本地元素代码对于页面元素1、旧的页面元素2和页面元素3进行渲染，同时下载新的页面元素2的元素代码，下载成功后，利用新的页面元素2的元素代码对于旧的页面元素2进行渲染，得到新的页面元素2，进而得到更新后的目标页面。
79.图2b示出根据本公开另一实施方式的页面渲染示意图，在该实施方式中，所述变化元素为新增元素，如图2b所示，之前待渲染的目标页面包括两个页面元素：页面元素4和页面元素5，首先根据获取的目标页面的本地元素代码对于页面元素4和页面元素5进行渲染，同时下载新的页面元素6的元素代码，下载成功后，利用新的页面元素6的元素代码在所述目标页面对应的位置处进行渲染，得到包含有新的页面元素6的新的目标页面。
80.下述为本公开装置实施例，可以用于执行本公开方法实施例。
81.图3示出根据本公开一实施方式的页面渲染装置的结构框图，该装置可以通过软件、硬件或者两者的结合实现成为电子设备的部分或者全部。如图3所示，所述页面渲染装置包括：
82.检测模块301，被配置为响应于接收到目标页面加载命令，检测所述目标页面上的页面元素是否有变化；
83.获取模块302，被配置为当检测确定所述目标页面上的页面元素有变化时，获取所述目标页面的本地元素代码；
84.渲染模块303，被配置为下载变化元素代码，并利用所述本地元素代码和变化元素代码对于所述目标页面进行分时渲染。
85.上文提及，随着社会的进步和数据技术的发展，互联网技术越来越多地渗入到人们的生活中，人们的衣食住行也都越来越依赖手机等智能终端。手机页面通常包括多个页面元素，手机页面的显示是通过对于多个页面元素的渲染实现的。现有技术中，当页面元素有更新或新增时，整个页面需要等待新元素的新代码下载成功后再渲染整个页面，但该处理方式由于下载过程耗时较长，在新代码下载时用户会看到一段时间的白屏，进而导致页面渲染性能下降，并且用户还有可能因此以为程序卡顿而退出应用，更加达不到极速渲染的效果。
86.考虑到上述缺陷，在该实施方式中，提出一种页面渲染装置，该装置在检测确定目标页面上的页面元素有变化时，以当前本地元素代码渲染页面的同时，下载变化元素代码，实现本地元素代码和变化元素代码的分时渲染。该技术方案能够避免页面渲染的中断，保障页面渲染的性能，实现极速渲染的效果。
87.在本公开一实施方式中，所述页面渲染装置可实现为计算机、计算设备、电子设备、智能终端等客户端。
88.在本公开一实施方式中，所述目标页面加载命令指的是用户发送的用于加载某一页面的命令。
89.在本公开一实施方式中，所述页面元素指的是组成一个可显示页面的内容元素，其中，所述页面元素可包括以下元素中的一种或多种：文字、图片、音频、动画、视频，等等。
90.在本公开一实施方式中，所述页面元素的变化指的是所述页面元素出现更新或新增，即所述变化元素可包括更新元素和新增元素。
91.在本公开一实施方式中，所述元素代码指的是用于渲染所述元素的代码，所述本地元素代码指的是已经从服务器中下载并存储在本地的元素代码。
92.在上述实施方式中，在接收到目标页面加载命令后，首先检测所述目标页面上的页面元素是否存在更新或新增等变化；若检测确定所述目标页面上的页面元素存在更新或新增等变化时，先行获取存储在本地的所述目标页面的元素代码，即所述目标页面的本地元素代码，同时进行变化元素代码的下载，然后利用获取的所述本地元素代码和下载的所述变化元素代码对于所述目标页面进行分时渲染，从而避免页面渲染的中断，保障页面渲染的性能，实现极速渲染的效果。
93.在本公开一实施方式中，所述渲染模块303可被配置为：
94.利用所述本地元素代码对于所述目标页面进行渲染；
95.下载变化元素代码；
96.响应于所述变化元素代码下载完成，利用所述变化元素代码对于所述目标页面进行更新渲染。
97.为了避免页面渲染被中断，保障页面渲染的性能，实现极速渲染的效果，在该实施
方式中，采用分时渲染的策略对于所述目标页面进行更新渲染。具体地，首先利用先前获取的所述本地元素代码对于所述目标页面进行渲染，与此同时，请求下载变化元素代码，并在所述变化元素代码下载完成后，利用所述变化元素代码对于所述目标页面进行更新渲染，以实现所述目标页面内容的最新呈现，这样即使在页面元素有更新或新增时，也无需等待新元素的新代码下载成功后再去渲染整个页面，也不会由于新元素的新代码下载过程耗时较长，在新元素的新代码下载时用户会看到一段时间的白屏，即，可借助所述本地元素代码和变化元素代码的分时渲染，实现新旧目标页面的无感更新，从而保障了页面渲染的性能，提升了用户的使用体验。
98.在本公开一实施方式中，所述下载变化元素代码的部分，可被配置为：
99.确定变化元素标识信息；
100.向服务器发送变化元素代码下载请求消息，以根据所述变化元素标识信息从所述服务器下载所述变化元素代码，其中，所述变化元素代码下载请求消息携带有所述变化元素标识信息。
101.在该实施方式中，借助变化元素标识信息来准确获取所述变化元素的代码数据，具体地，首先确定所述变化元素的标识信息，其中，所述变化元素的标识信息比如可以为所述变化元素的id，可借助所述目标页面的加载数据获得；然后将所述变化元素的标识信息携带在变化元素代码下载请求消息中发送给服务器，以从所述服务器下载得到与所述变化元素标识信息对应的、准确的变化元素代码。
102.在本公开一实施方式中，所述利用所述变化元素代码对于所述目标页面进行更新渲染的部分，可被配置为：
103.确定变化元素在所述目标页面中的位置；
104.利用所述变化元素代码对于所述变化元素在所述目标页面中的位置进行更新渲染。
105.在该实施方式中，在利用所述变化元素代码对于所述目标页面进行更新渲染时，首先确定变化元素在所述目标页面中的位置，然后利用下载得到的所述变化元素代码对于所述变化元素在所述目标页面中的位置进行更新渲染，实现所述目标页面的无感更新。
106.本公开还公开了一种电子设备，图4示出根据本公开一实施方式的电子设备的结构框图，如图4所示，所述电子设备400包括存储器401和处理器402；其中，
107.所述存储器401用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器402执行以实现上述方法步骤。
108.图5是适于用来实现根据本公开一实施方式的页面渲染方法的计算机系统的结构示意图。
109.如图5所示，计算机系统500包括处理单元501，其可以根据存储在只读存储器(rom)502中的程序或者从存储部分508加载到随机访问存储器(ram)503中的程序而执行上述实施方式中的各种处理。在ram503中，还存储有计算机系统500操作所需的各种程序和数据。处理单元501、rom502以及ram503通过总线504彼此相连。输入/输出(i/o)接口505也连接至总线504。
110.以下部件连接至i/o接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；
以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至i/o接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。其中，所述处理单元501可实现为cpu、gpu、tpu、fpga、npu等处理单元。
111.特别地，根据本公开的实施方式，上文描述的方法可以被实现为计算机软件程序。例如，本公开的实施方式包括一种计算机程序产品，其包括有形地包含在及其可读介质上的计算机程序，所述计算机程序包含用于执行所述畅通信息确定方法的程序代码。在这样的实施方式中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。
112.附图中的流程图和框图，图示了按照本公开各种实施方式的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，路程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
113.描述于本公开实施方式中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定。
114.作为另一方面，本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施方式中所述装置中所包含的计算机可读存储介质；也可以是单独存在，未装配入设备中的计算机可读存储介质。计算机可读存储介质存储有一个或者一个以上程序，所述程序被一个或者一个以上的处理器用来执行描述于本公开的方法。
115.以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离所述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。