CN113515328A - 页面渲染的方法、装置、电子设备和存储介质 - Google Patents

Abstract

本发明公开了页面渲染的方法、装置、电子设备和存储介质，涉及计算机技术领域。该方法的一具体实施方式包括：根据待显示页面的页面数据中的占位图信息，渲染待显示页面的占位图；根据页面数据中静态资源信息获取并运行静态资源文件，以及根据业务资源信息获取业务资源文件；检测目标事件是否被触发；若是，则通过运行业务资源文件的结果，渲染待显示页面，使渲染后的待显示页面代替占位图。该实施方式能够避免在运行业务资源文件时静态资源文件尚未生成完成，从而导致业务资源文件运行出错，页面无法完成渲染的问题。

Description

页面渲染的方法、装置、电子设备和存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面渲染的方法、装置、电子设备和存储介质。

背景技术

在页面显示技术中，为了优化用户体验，在用户等待最终页面渲染完成前，通常会先显示占位图，以缓解用户等待过程。在页面渲染占位图后，再运行静态资源文件和业务资源文件，得出最终渲染的页面。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

由于业务资源文件的运行需要依靠静态资源文件才能完成，所以通常静态资源文件会先于业务资源文件生成。但是在一些场景中，在运行业务资源文件时静态资源文件尚未生成完成，从而导致业务资源文件运行出错，页面停留在显示占位图的状态，进而导致页面无法完成渲染。

发明内容

有鉴于此，本发明实施例提供一种页面渲染的方法、装置、系统和存储介质，能够避免在运行业务资源文件时静态资源文件尚未生成完成，从而导致业务资源文件运行出错，页面无法完成渲染的问题。

为实现上述目的，根据本发明实施例的一个方面，提供了一种页面渲染的方法。

本发明实施例的一种页面渲染的方法包括：根据待显示页面的页面数据中的占位图信息，渲染所述待显示页面的占位图；根据所述页面数据中静态资源信息获取并运行静态资源文件，以及根据所述业务资源信息获取业务资源文件；检测目标事件是否被触发，其中，在所述静态资源文件运行完成且所述业务资源文件获取完成时，所述目标事件被触发；若是，则通过运行所述业务资源文件的结果，渲染所述待显示页面，使渲染后的待显示页面代替所述占位图。

在一个实施例中，在所述检测目标事件是否被触发之前，还包括：

在所述静态资源文件运行完成且所述业务资源文件获取完成之后，将目标参数的值变更为目标值；

所述检测目标事件是否被触发，包括：

检测所述目标参数的值是否为所述目标值；

若是，则所述目标事件被触发；若否，则所述目标事件未被触发。

在又一个实施例中，所述目标参数包括第一目标参数和第二目标参数，所述目标值包括第一目标和第二目标值；

所述将目标参数的值变更为目标值，包括：

当所述静态资源文件运行完成时，将所述第一目标参数的值变更为所述第一目标值；

当所述业务资源文件获取完成时，将所述第二目标参数的值变更为所述第二目标值。

在又一个实施例中，所述目标事件包括第一事件和第二事件，所述第一事件表示所述静态资源文件运行完成，所述第二事件表示所述业务资源文件获取完成；

所述检测目标事件是否被触发，包括：

检测所述第一事件和所述第二事件是否均被触发；

若是，则所述目标事件被触发；若否，则所述目标事件未被触发。

在又一个实施例中，所述第一事件表示所述静态资源文件运行完成，所述第二事件表示所述业务资源文件获取完成；

在所述检测目标事件是否被触发之前，还包括：

当所述静态资源文件运行完成时，触发所述第一事件；

当所述业务资源文件获取完成时，触发所述第二事件；

当检测到所述第一事件和所述第二事件均被触发时，触发所述目标事件。

在又一个实施例中，在所述根据待显示页面的页面数据中占位图信息，渲染所述待显示页面的占位图之前，还包括：

在所述页面数据中配置第一事件，所述第一事件用于在所述静态资源文件运行结束后触发；

在所述业务资源文件结束配置设置第二事件，所述第二事件用于在所述业务资源文件获取结束后触发；

配置目标事件，所述目标事件用于在所述第一事件和所述第二事件均被触发后触发。

为实现上述目的，根据本发明的另一方面，提供了一种页面渲染的装置。

本发明的一种页面渲染的装置包括：渲染单元，用于根据待显示页面的页面数据中的占位图信息，渲染所述待显示页面的占位图；处理单元，用于根据所述页面数据中静态资源信息获取并运行静态资源文件，以及根据所述业务资源信息获取业务资源文件；检测单元，用于检测目标事件是否被触发，其中，在所述静态资源文件运行完成且所述业务资源文件获取完成时，所述目标事件被触发；若是，则所述渲染单元，还用于通过运行所述业务资源文件的结果，渲染所述待显示页面，使渲染后的待显示页面代替所述占位图。

在一个实施例中，还包括：

调整单元，用于在所述静态资源文件运行完成且所述业务资源文件获取完成之后，将目标参数的值变更为目标值；

所述检测单元，具体用于：

检测所述目标参数的值是否为所述目标值；

若是，则所述目标事件被触发；若否，则所述目标事件未被触发。

在又一个实施例中，所述目标参数包括第一目标参数和第二目标参数，所述目标值包括第一目标和第二目标值；

所述调整单元，具体用于：

当所述静态资源文件运行完成时，将所述第一目标参数的值变更为所述第一目标值；

当所述业务资源文件获取完成时，将所述第二目标参数的值变更为所述第二目标值。

在又一个实施例中，所述目标事件包括第一事件和第二事件，所述第一事件被触发表示所述静态资源文件运行完成，所述第二事件被触发表示所述业务资源文件获取完成；

所述检测单元，具体用于：

检测所述第一事件和所述第二事件是否均被触发；

若是，则所述目标事件被触发；若否，则所述目标事件未被触发。

在又一个实施例中，所述第一事件表示所述静态资源文件运行完成，所述第二事件表示所述业务资源文件获取完成；

所述装置还包括触发单元，用于：当所述静态资源文件运行完成时，触发所述第一事件；

当所述业务资源文件获取完成时，触发所述第二事件；

当检测到所述第一事件和所述第二事件均被触发时，触发所述目标事件。

在又一个实施例中，所述装置还包括配置单元，用于：

在所述页面数据中配置第一事件，所述第一事件用于在所述静态资源文件运行结束后触发；

在所述业务资源文件结束配置设置第二事件，所述第二事件用于在所述业务资源文件获取结束后触发；

配置目标事件，所述目标事件用于在所述第一事件和所述第二事件均被触发后触发。

为实现上述目的，根据本发明实施例的再一个方面，提供了一种电子设备。

本发明实施例的一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例提供的页面渲染的方法。

为实现上述目的，根据本发明实施例的又一个方面，提供了一种计算机可读介质。

本发明实施例的一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例提供的页面渲染的方法。

上述发明中的一个实施例具有如下优点或有益效果：本发明实施例中，在待显示页面渲染占位图后，可以分别获取静态资源文件和业务资源文件，并运行静态资源文件，然后通过检测目标事件是否被触发来判断述静态资源文件运行、业务资源文件获取的流程是否完成，在目标事件被触发后再运行业务资源文件，以实现对待显示页面的渲染。如此本发明实施例中，通过检测目标事件是否被触发的方式来判断静态资源文件是否完成运行和业务资源文件是否获取完成，并在静态资源文件完成运行和业务资源文件获取完成后，在运行业务资源文件，从而保证在运行业务资源文件时静态资源文件已经完成运行，避免因静态资源文件未完成运行导致业务资源文件运行出错的问题，进而避免页面停留在显示占位图的状态，无法完成渲染的问题。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的页面渲染的方法的一种主要流程的示意图；

图2是根据本发明实施例的页面渲染的方法的又一种主要流程的示意图；

图3是根据本发明实施例的页面渲染的装置的主要单元的示意图；

图4是本发明实施例可以应用于其中的一种示例性系统架构图；

图5是适于用来实现本发明实施例的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

需要指出的是，在不冲突的情况下，本发明中的实施例以及实施例中的特征可以互相组合。

本发明实施例提供一种页面渲染的方法，该方法可以用于在获取到待显示页面的页面数据后进行页面渲染显示的场景中。具体的，本发明实施例中，一种页面渲染的方法所适用的系统架构可以包括客户端和服务器，其中客户端与服务器之间进行交互，客户端可以向服务器发送页面显示请求，服务器根据客户端发送的请求返回客户端所请求的待显示页面的页面数据，客户端在接收到页面数据后，可以根据页面数据对待显示页面进行渲染，从而实现页面显示。

本发明实施例中，为了提高用户体验，客户端在待显示页面中会先进行占位图渲染，以便于缓解用户等待的页面显示的心情。在显示占位图之后，客户端会获取并运行静态资源文件和业务资源文件，从而实现对待显示页面的渲染要显示的内容。由于业务资源文件在运行时需要依赖静态资源文件，所以为了保证业务资源文件在运行时静态资源文件已经运行完成，本发明实施例中，在业务资源文件和渲染过程中均设置触发事件和监控事件，以实现在静态资源文件获取并运行完成、并且业务资源文件获取完成后可触发目标事件。以目标事件被触发表示静态资源文件获取并运行完成、并且业务资源文件获取完成，即在静态资源文件运行完成且业务资源文件获取完成时，如此在客户端检测到触发目标事件后，可以运行业务资源文件，从而可以保证静态资源文件和业务资源文件的运行顺序，即避免业务资源文件在执行时因静态资源文件未运行完成而出错，导致页面不能完成渲染的问题。

本发明实施例提供了一种页面渲染的方法，该方法可由客户端执行，如图1所示，该方法包括以下步骤。

S101：根据待显示页面的页面数据中的占位图信息，渲染待显示页面的占位图。

其中，客户端在需要对页面进行显示时，可以向服务端发送待显示页面的页面请求，以请求待显示页面的页面数据，服务端根据客户端的页面请求将待显示页面的页面数据发送给客户端，通常服务端返回的页面数据为html。客户端接收到页面数据后，可以先根据其中占位图信息，对占位图进行渲染，使待显示页面显示占位图。

本发明实施例中，占位图可以包括多种，例如占位图可以具体为骨架屏。

S102：根据页面数据中静态资源信息获取并运行静态资源文件，以及根据业务资源信息获取业务资源文件。

其中，在客户端渲染占位图后，客户端可以根据页面数据中静态资源信息来获取静态资源文件，并在获取静态资源文件后运行静态资源文件，以及客户端还可以根据业务资源信息获取业务资源文件。由于业务资源文件的运行需要依赖静态资源文件，所以在获取业务资源文件后，需要先确定静态资源文件是否完成运行，在确定静态资源文件完成运行后，再运行业务资源文件。

本发明实施例中，本步骤可以具体执行为：根据页面数据中静态资源信息和业务资源信息，生成静态资源标签和业务资源标签；根据静态资源标签获取并运行静态资源文件，以及根据业务资源标签获取业务资源文件。

静态资源信息可以包括静态资源的代码，通过运行静态资源代码可以生成静态资源标签。静态资源标签中包括用于获取静态资源文件的链接，所以客户端根据静态资源标签可以获取到静态资源文件。业务资源信息可以包括业务资源的代码，通过运行业务资源代码可以生成业务资源标签。业务资源标签中包括用于获取业务资源文件的链接，所以客户端根据业务资源标签可以获取到业务资源文件。

客户端在生成静态资源标签和业务资源标签后，可以将其放在html文件的<body>标签底部，以便于运行静态资源标签和业务资源标签。

需要说明的是，本发明实施例中，静态资源文件可以包括JS(JavaScript，一种具有函数优先的轻量级，解释型或即时编译型的编程语言)文件和CSS(Cascading StyleSheets，层叠样式表)文件。

S103：检测目标事件是否被触发。

其中，目标事件被触发表示静态资源文件运行完成且业务资源文件获取完成。目标事件为预先配置。

本发明实施例中，在静态资源文件运行完成且业务资源文件获取完成后可以触发目标事件，所以本步骤中客户端可以通过检测目标事件是否触发，来判断静态资源文件运行是否完成且业务资源文件获取是否完成。在目标事件被触发时，说明静态资源文件运行完成且业务资源文件获取完成；在目标事件未被触发时，说明静态资源文件运行未完成或业务资源文件获取未完成，此时可以等待检测到目标事件被触发后再执行后续步骤。

本发明实施例的一种实施方式中，可以通过调整目标事件对应目标参数的值来体现目标事件是否被触发。具体的，可以在目标事件未被触发时的参数值为一个默认值，在目标事件被触发时的参数值为目标值，默认值与目标值不同。

所以，在执行完步骤S102后，由于静态资源文件运行完成且业务资源文件获取完成，所以可以将目标参数的值变更为目标值。本步骤中也可以通过检测目标参数的值来判断目标事件是否被触发。具体过程为：检测目标参数的值是否为目标值；若是，则目标事件被触发；若否，则目标事件未被触发。即检测到目标参数的值为目标值，表示静态资源文件运行完成且业务资源文件获取完成；检测到目标参数的值不为目标值，表示静态资源文件运行未完成或业务资源文件获取未完成。

具体的，本发明实施例中，目标参数还可以包括第一目标参数和第二目标参数，所述目标值包括第一目标值和第二目标值，则将目标参数的值变更为目标值的步骤具体执行为：当静态资源文件运行完成时，将第一目标参数的值变更为第一目标值；当业务资源文件获取完成时，将第二目标参数的值变更为第二目标值。

通过第一目标参数的值来表示静态资源文件运行是否完成，若第一目标参数的值为第一目标值，则表示静态资源文件运行完成；若第一目标参数的值不为第一目标值，则表示静态资源文件运行未完成。通过第二目标参数的值来表示业务资源文件获取是否完成，若第二目标参数的值为第二目标值，则表示业务资源文件获取完成；若第二目标参数的值不为第二目标值，则表示业务资源文件获取未完成。所以本发明实施例中，通过当静态资源文件运行完成时，将第一目标参数的值变更为第一目标值，当业务资源文件获取完成时，将第二目标参数的值变更为第二目标值，以便于后续目标事件的检测。第一目标值和第二目标值可以相同也可以不同。

本发明实施例的又一种实施方式中，静态资源文件运行完成且业务资源文件获取完成可以拆分为两个事件分别进行控制。具体的，目标事件可以包括第一事件和第二事件，其中，第一事件被触发表示静态资源文件运行完成，第二事件被触发表示业务资源文件获取完成。

基于此，本步骤可以具体执行为：检测第一事件和第二事件是否均被触发；若是，则目标事件被触发；若否，则目标事件未被触发。

在客户端运行静态资源文件完成后，客户端可以触发第一事件，所以通过检测第一事件是否被触发来判断静态资源文件是否运行完成。在客户端获取业务资源文件完成后，客户端可以触发第二事件，所以通过检测第二事件是否被触发来判断业务资源文件是否获取完成。本步骤中检测目标事件是否被触发可以通过检测第一事件和第二事件均被触发来实现，第一事件和第二事件均被触发表示静态资源文件运行完成且业务资源文件获取完成。

本发明实施例中，静态资源文件可以包括JS文件和CSS文件，第一事件包括JS文件运行完成事件和CSS文件运行完成事件，所以检测第一事件和第二事件是否均被触发，具体执行为：检测JS文件运行完成事件、CSS文件运行完成事件和第二事件是否均被触发。

本发明实施例的又一种实施方式中，还可以配置第一事件被触发表示静态资源文件运行完成，第二事件被触发表示业务资源文件获取完成，并配置在第一事件和第二事件均被触发时触发目标事件。所以本步骤之前，客户端可以当静态资源文件运行完成时，触发第一事件；当业务资源文件获取完成时，触发第二事件；当检测到第一事件和第二事件均被触发时，触发目标事件，然后本步骤中可以检测目标事件是否被触发。

本发明实施例中，为了实现上述过程，可以在数据开发时对页面数据进行配置。具体可以为，在页面数据中配置第一事件，第一事件用于在静态资源文件运行结束后触发；在业务资源文件结束配置设置第二事件，第二事件用于在业务资源文件获取结束后触发；在页面数据中配置目标事件，目标事件用于在第一事件和第二事件均被触发后触发。

由于业务资源文件在获取成功后不能立即运行，所以在业务资源文件中代码的最后配置第二事件，以便于在业务资源文件获取结束后触发第二事件。同时，由于在目标事件触发后，业务资源文件才能够运行，需要在业务资源文件中代码的最前面配置监听事件，以便于检测目标事件是否被触发，并在目标事件被触发后运行业务资源文件。由于静态资源文件获取完成后直接运行，所以可以直接在页面数据中配置触发第一事件的逻辑，即在页面数据中配置第一事件，以便于在静态资源文件运行完成后触发第一事件。在第一事件和第二事件均被触发后，可以触发目标事件，所以在页面数据中配置触发目标事件的逻辑。

S104：若是，则通过运行业务资源文件的结果，渲染待显示页面，使渲染后的待显示页面代替占位图。

其中，步骤S103检测目标事件是否被触发后，如果确定目标事件被触发，则表示可以运行业务资源文件，此时可以运行业务资源文件，并通过运行业务资源文件的结果，渲染待显示页面。由于待显示页面中通过执行步骤S101显示了占位图，所以在本步骤渲染待显示页面后，渲染的内容会代替占位图。

本发明实施例中，通过检测目标事件是否被触发的方式来判断静态资源文件是否完成运行和业务资源文件是否获取完成，并在静态资源文件完成运行和业务资源文件获取完成后，在运行业务资源文件，从而保证在运行业务资源文件时静态资源文件已经完成运行，从而避免因静态资源文件未完成运行导致业务资源文件运行出错的问题，进而避免页面停留在显示占位图的状态，无法完成渲染的问题。

本发明实施例中，以静态资源文件包括依赖JS文件和CSS文件，业务资源文件为业务JS文件为例。并以配置依赖JS文件运行完成触发事件C、变更事件C中参数X为目标值，CSS文件运行完成触发事件C、变更事件C中参数Y为目标值，业务JS文件获取完成后触发事件B，并在触发事件B触发后触发事件C、变更事件C中参数Z为目标值，在事件C中参数X、Y、Z均为目标值后触发事件A，并在事件A被触发后运行业务JS文件为例，对图1所示的实施例进行具体说明。

在上述配置中，事件B需要配置在业务JS文件的代码中，即在业务JS文件中代码的最后增加事件B，以便于获取业务JS文件完成后触发事件B，同时还需要在业务JS文件中代码最前面配置监听逻辑，用来检测事件A是否被触发，以便于在事件A被触发后运行业务JS文件。并且，在页面数据的配置监听函数，以便于检测依赖JS文件获取运行完成、CSS文件运行完成、事件B被触发、事件C被触发等事件，并在检测到依赖JS文件获取运行完成时，变更事件C中参数X为目标值；在检测到CSS文件获取运行完成时，变更事件C中参数Y为目标值；在检测到事件B被触发时，变更事件C中参数Z为目标值；在检测到事件爱你C被触发，即事件C中参数X、Y、Z的值均为目标值时，触发事件A。

需要说明的是，本发明实施例中，上述配置过程可以通过Webpack打包开发的依赖JS文件、CSS文件和业务JS文件，其中，对业务JS代码的配置可以使用NodeJS读写技术完成业务JS文件中代码配置，即在业务JS文件的代码最前面增加事件监听逻辑，用来监听事件A，在业务JS代码最后面增加触发事件B。之所以要在业务代码最后面增加触发事件B，是因为必须要等到业务代码加载完毕之后，才能获取监听事件A定义的执行函数，否则有可能无法获取监听事件A的执行函数而报错。通过上述处理，由Webpack打包生成的业务JS代码，就会被监听事件A所包裹，从而客户端获取业务JS文件后，并不会立即执行业务JS文件。在业务JS文件最后增加触发事件B，这样获取完成业务JS文件后就会触发事件B。

下面结合图1所示的实施例以及上述的说明，对本发明实施例中页面渲染的方法进行具体说明。如图2所示，该方法包括以下步骤。

S201：从服务端获取待显示页面的页面数据。

其中，客户端可以根据用户输入的指令向服务端发送页面请求，页面请求中可以包括待显示页面的URL，服务端在接收页面请求后，会向客户端返回待显示页面的页面数据，页面数据通常为html。

需要说明的是，服务端返回的页面数据中已经完成上述关于触发事件和监控函数等的配置。

S202：在待显示页面中渲染骨架屏。

其中，客户端在接收到页面数据后，可以先根据页面数据中骨架屏信息渲染骨架屏，使待显示页面显示骨架屏。

本发明实施例中，为了缓解用户等待页面渲染的心情，可以先渲染出骨架屏，然后再进行静态资源文件和业务资源文件的获取和运行。

S203：生成依赖JS标签、CSS标签、业务JS标签并添加到页面数据的body标签底部。

其中，待显示页面渲染骨架屏后，可以动态生成依赖JS标签、CSS标签、业务JS标签并将这些标签添加到页面数据的<body>标签底部。

由于本发明实施例中先进行骨架屏的渲染，所以依赖JS标签、CSS标签、业务JS标签均需要客户端在页面渲染过程中生成，并将生成的依赖JS标签、CSS标签、业务JS标签添加到页面数据html的<body>标签底部。这些标签中包括能够获取对应文件的连接等信息，所以客户端运行这些标签即可加载对应的文件。

S204：获取并运行依赖JS文件和CSS文件，以及获取业务JS文件。

本步骤中，分别通过运行依赖JS标签、CSS标签和业务JS标签，可以获取到依赖JS文件、CSS文件和业务JS。依赖JS文件和CSS文件在获取完成后直接运行，而业务JS文件获取完成后，需要等待事件A被触发后再运行。

S205：检测依赖JS文件运行完成，变更事件C中参数X的值为目标值。

其中，页面数据中配置了监控函数，所以在检测到依赖JS文件运行完成后，可以执行触发事件C，即将事件C中参数X的值变更为目标值。

S206：检测CSS文件运行完成，变更事件C中参数Y的值为目标值。

其中，页面数据中配置了监控函数，所以在检测到CSS文件运行完成后，可以执行触发事件C，即将事件C中参数Y的值变更为目标值。

S207：检测业务JS文件完成后触发事件B。

业务JS文件中代码配置了事件B，则在获取业务JS文件后可以触发事件B。

本发明实施例中触发事件B的方式可以为将事件B包括参数调整为预设值，以表示事件B被触发。

S208：检测事件B被触发后，变更事件C中参数Z的值为目标值。

其中，页面数据中配置了监控函数，所以在检测到事件B被触发后，可以执行触发事件C，即将事件C中参数Z的值变更为目标值。

本发明实施例中，目标值的具体值可以根据场景设置，例如可以设置为true。

S209：检测事件C被触发后，触发事件A。

事件C被触发是指事件C中参数X、Y和Z的值均为目标值，所以在检测到事件C中参数X、Y和Z的值均为目标值后，可以确定时间C被触发，此时可以触发事件A。

S210：检测事件A被触发后运行业务JS文件。

业务JS文件中代码配置了时间A的监控事件，所以监控事件在检测到事件A被触发后，即可运行业务JS文件，得出运行业务JS文件的结果。

S211：根据运行业务JS文件的结果渲染待显示页面。

在得出运行业务JS文件的结果时，对待显示页面进行渲染，使待显示页面中替换最初显示的骨架屏，显示要显示的内容。

本发明实施例中，通过检测目标事件是否被触发的方式来判断静态资源文件是否完成运行和业务资源文件是否获取完成，并在静态资源文件完成运行和业务资源文件获取完成后，在运行业务资源文件，从而保证在运行业务资源文件时静态资源文件已经完成运行，从而避免因静态资源文件未完成运行导致业务资源文件运行出错的问题，进而避免页面停留在显示占位图的状态，无法完成渲染的问题。

为了解决现有技术存在的问题，本发明实施例提供了一种页面渲染的装置300，如图3所示，该装置300包括：

渲染单元301，用于根据待显示页面的页面数据中的占位图信息，渲染所述待显示页面的占位图；

处理单元302，用于根据所述页面数据中静态资源信息获取并运行静态资源文件，以及根据所述业务资源信息获取业务资源文件；

检测单元303，用于检测目标事件是否被触发，其中，在所述静态资源文件运行完成且所述业务资源文件获取完成时，所述目标事件被触发；

若是，则所述渲染单元301，还用于通过运行所述业务资源文件的结果，渲染所述待显示页面，使渲染后的待显示页面代替所述占位图。

应理解的是，实施本发明实施例的方式与实施图2所示实施例的方式相同，在此不再赘述。

本发明实施例的一种实现方式中，所述装置300还包括：

调整单元，用于在所述静态资源文件运行完成且所述业务资源文件获取完成之后，将目标参数的值变更为目标值；

所述检测单元303，具体用于：

检测所述目标参数的值是否为所述目标值；

若是，则所述目标事件被触发；若否，则所述目标事件未被触发。

本发明实施例的又一种实现方式中，所述目标参数包括第一目标参数和第二目标参数，所述目标值包括第一目标和第二目标值；

所述调整单元，具体用于：

当所述静态资源文件运行完成时，将所述第一目标参数的值变更为所述第一目标值；

当所述业务资源文件获取完成时，将所述第二目标参数的值变更为所述第二目标值。

本发明实施例的又一种实现方式中，所述目标事件包括第一事件和第二事件，所述第一事件被触发表示所述静态资源文件运行完成，所述第二事件被触发表示所述业务资源文件获取完成；

所述检测单元303，具体用于：

检测所述第一事件和所述第二事件是否均被触发；

若是，则所述目标事件被触发；若否，则所述目标事件未被触发。

本发明实施例的又一种实现方式中，所述第一事件表示所述静态资源文件运行完成，所述第二事件表示所述业务资源文件获取完成；

所述装置300还包括触发单元，用于：

当所述静态资源文件运行完成时，触发所述第一事件；

当所述业务资源文件获取完成时，触发所述第二事件；

当检测到所述第一事件和所述第二事件均被触发时，触发所述目标事件。

在又一个实施例中，所述装置300还包括配置单元，用于：

在所述页面数据中配置第一事件，所述第一事件用于在所述静态资源文件运行结束后触发；

在所述业务资源文件结束配置设置第二事件，所述第二事件用于在所述业务资源文件获取结束后触发；

配置目标事件，所述目标事件用于在所述第一事件和所述第二事件均被触发后触发。

应理解的是，实施本发明实施例的方式与实施图1或图2所示实施例的方式相同，在此不再赘述。

本发明实施例中，通过检测目标事件是否被触发的方式来判断静态资源文件是否完成运行和业务资源文件是否获取完成，并在静态资源文件完成运行和业务资源文件获取完成后，在运行业务资源文件，从而保证在运行业务资源文件时静态资源文件已经完成运行，从而避免因静态资源文件未完成运行导致业务资源文件运行出错的问题，进而避免页面停留在显示占位图的状态，无法完成渲染的问题。

根据本发明的实施例，本发明还提供了一种电子设备和一种可读存储介质。

本发明的电子设备包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器执行本发明实施例所提供的页面渲染的方法。

图4示出了可以应用本发明实施例的页面渲染的方法或页面渲染的装置的示例性系统架构400。

如图4所示，系统架构400可以包括至少一个终端设备(图4中示出终端设备401、终端设备402和终端设备403三个)。以终端设备401为例进行说明，终端设备401可以为具有显示屏并且支持页面显示的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等，终端设备401中可以通过安装用于页面显示的客户端或应用，来实现页面显示时的页面渲染功能。终端设备401运行时，可以向服务端405发送页面数据请求，以从服务器405获取待显示页面的页面数据，并进行页面数据的渲染。

系统架构400还可以包括服务器405，服务器405可以为对用户利用终端设备401、402、403所浏览的页面提供支持的后台管理服务器(仅为示例)后台管理服务器可以对接收到的页面数据请求等数据进行分析等处理，并将处理结果(例如页面数据--仅为示例)反馈给终端设备。

如图4所示，系统架构400还可以包括网络404。网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。用户可以使用终端设备401、402、403通过网络404与服务器405交互，以接收或发送消息等。

需要说明的是，本发明实施例所提供的页面渲染的方法一般由终端设备401、402、403执行，相应地，页面渲染的装置一般设置于终端设备401、402、403中。

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

下面参考图5，其示出了适于用来实现本发明实施例的计算机系统500的结构示意图。图5示出的计算机系统仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(CPU)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有系统500操作所需的各种程序和数据。CPU 501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

以下部件连接至I/O接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CPU)501执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

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

描述于本发明实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括渲染单元、处理单元和检测单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，渲染单元还可以被描述为“渲染单元的功能的单元”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备执行本发明所提供的页面渲染的方法。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种页面渲染的方法，其特征在于，包括：

根据待显示页面的页面数据中的占位图信息，渲染所述待显示页面的占位图；

根据所述页面数据中静态资源信息获取并运行静态资源文件，以及根据所述业务资源信息获取业务资源文件；

检测目标事件是否被触发，其中，在所述静态资源文件运行完成且所述业务资源文件获取完成时，所述目标事件被触发；

若是，则通过运行所述业务资源文件的结果，渲染所述待显示页面，使渲染后的待显示页面代替所述占位图。

2.根据权利要求1所述的方法，其特征在于，在所述检测目标事件是否被触发之前，还包括：

在所述静态资源文件运行完成且所述业务资源文件获取完成之后，将目标参数的值变更为目标值；

所述检测目标事件是否被触发，包括：

检测所述目标参数的值是否为所述目标值；

若是，则所述目标事件被触发；若否，则所述目标事件未被触发。

3.根据权利要求2所述的方法，其特征在于，所述目标参数包括第一目标参数和第二目标参数，所述目标值包括第一目标值和第二目标值；

所述将目标参数的值变更为目标值，包括：

当所述静态资源文件运行完成时，将所述第一目标参数的值变更为所述第一目标值；

当所述业务资源文件获取完成时，将所述第二目标参数的值变更为所述第二目标值。

4.根据权利要求1所述的方法，其特征在于，所述目标事件包括第一事件和第二事件，所述第一事件被触发表示所述静态资源文件运行完成，所述第二事件被触发表示所述业务资源文件获取完成；

所述检测目标事件是否被触发，包括：

检测所述第一事件和所述第二事件是否均被触发；

若是，则所述目标事件被触发；若否，则所述目标事件未被触发。

5.根据权利要求1所述的方法，其特征在于，所述第一事件表示所述静态资源文件运行完成，所述第二事件表示所述业务资源文件获取完成；

在所述检测目标事件是否被触发之前，还包括：

当所述静态资源文件运行完成时，触发所述第一事件；

当所述业务资源文件获取完成时，触发所述第二事件；

当检测到所述第一事件和所述第二事件均被触发时，触发所述目标事件。

6.根据权利要求5所述的方法，其特征在于，在所述根据待显示页面的页面数据中占位图信息，渲染所述待显示页面的占位图之前，还包括：

在所述页面数据中配置第一事件，所述第一事件用于在所述静态资源文件运行结束后触发；

在所述业务资源文件结束配置设置第二事件，所述第二事件用于在所述业务资源文件获取结束后触发；

在所述页面数据中配置目标事件，所述目标事件用于在所述第一事件和所述第二事件均被触发后触发。

7.一种页面渲染的装置，其特征在于，包括：

渲染单元，用于根据待显示页面的页面数据中的占位图信息，渲染所述待显示页面的占位图；

处理单元，用于根据所述页面数据中静态资源信息获取和运行静态资源文件，以及根据所述业务资源信息获取业务资源文件；

检测单元，用于检测目标事件是否被触发，其中，在所述静态资源文件运行完成且所述业务资源文件获取完成时，所述目标事件被触发；

若是，则所述渲染单元，还用于通过运行所述业务资源文件的结果，渲染所述待显示页面，使渲染后的待显示页面代替所述占位图。

8.根据权利要求7所述的装置，其特征在于，还包括：

变更单元，用于在所述静态资源文件运行完成且所述业务资源文件获取完成之后，将目标参数的值变更为目标参数；

所述检测单元具体用于：

检测所述目标参数的值是否为所述目标参数；

若是，则所述目标事件被触发；若否，则所述目标事件未被触发。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

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

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的方法。

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

Images