CN114139083B - 网页渲染方法、装置及电子设备 - Google Patents

Abstract

本公开提供了一种网页渲染方法、装置及电子设备，涉及计算机技术领域，具体涉及网页技术领域。具体实现方案为：检测所述网页的运行信息，所述运行信息包括所述网页的运行状态，所述网页包括M个元素，M为正整数；在检测到所述网页的运行状态从第一状态切换至第二状态的情况下，基于所述网页的层叠样式表CSS信息，确定所述M个元素在所述第二状态下的目标动画信息，所述CSS信息包括所述M个元素在所述网页的各个运行状态下的动画信息；基于所述目标动画信息，对所述网页进行渲染。

Description

网页渲染方法、装置及电子设备

技术领域

本公开涉及计算机技术领域，尤其涉及网页技术领域，具体涉及一种网页渲染方法、装置及电子设备。

背景技术

随着计算机技术的高速发展，网页得到了人们广泛的使用，用户可以基于网页实现各种各样的设计。比如，可以基于网页实现对战游戏的设计。

目前，在网页设计时，通常是基于即时编译型的编程语言如JavaScript(JS)来控制网页上的元素移动，并通过网页渲染来实现网页的动画。

发明内容

本公开提供了一种网页渲染方法、装置及电子设备。

根据本公开的第一方面，提供了一种网页渲染方法，包括：

检测所述网页的运行信息，所述运行信息包括所述网页的运行状态，所述网页包括M个元素，M为正整数；

在检测到所述网页的运行状态从第一状态切换至第二状态的情况下，基于所述网页的层叠样式表CSS信息，确定所述M个元素在所述第二状态下的目标动画信息，所述CSS信息包括所述M个元素在所述网页的各个运行状态下的动画信息；

基于所述目标动画信息，对所述网页进行渲染。

根据本公开的第二方面，提供了一种网页渲染装置，包括：

检测模块，用于检测所述网页的运行信息，所述运行信息包括所述网页的运行状态，所述网页包括M个元素，M为正整数；

确定模块，用于在检测到所述网页的运行状态从第一状态切换至第二状态的情况下，基于所述网页的层叠样式表CSS信息，确定所述M个元素在所述第二状态下的目标动画信息，所述CSS信息包括所述M个元素在所述网页的各个运行状态下的动画信息；

渲染模块，用于基于所述目标动画信息，对所述网页进行渲染。

根据本公开的第三方面，提供了一种电子设备，包括：

至少一个处理器；以及

与至少一个处理器通信连接的存储器；其中，

存储器存储有可被至少一个处理器执行的指令，该指令被至少一个处理器执行，以使至少一个处理器能够执行第一方面中的任一项方法。

根据本公开的第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，该计算机指令用于使计算机执行第一方面中的任一项方法。

根据本公开的第五方面，提供了一种计算机程序产品，包括计算机程序，该计算机程序在被处理器执行时实现第一方面中的任一项方法。

根据本公开的技术解决了网页渲染而导致的网页运行卡顿的问题，提高了网页运行的流畅度。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1是根据本公开第一实施例的网页渲染方法的流程示意图；

图2是根据本公开第二实施例的网页渲染装置的结构示意图；

图3是用来实施本公开的实施例的示例电子设备的示意性框图。

具体实施方式

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

第一实施例

如图1所示，本公开提供一种网页渲染方法，包括如下步骤：

步骤S101：检测所述网页的运行信息，所述运行信息包括所述网页的运行状态，所述网页包括M个元素。

本实施例中，网页渲染方法涉及计算机技术领域，尤其涉及网页技术领域，其可以广泛应用于网页设计场景下。本公开实施例的网页渲染方法，可以由本公开实施例的网页渲染装置执行。本公开实施例的网页渲染装置可以配置在任意电子设备中，以执行本公开实施例的网页渲染方法。该电子设备可以为服务器，也可以为终端设备，这里不进行具体限定。

M为正整数。

该步骤中，该网页可以为单页面的网页，即该网页不存在页面的跳转，整个运行过程是在一个页面中，该网页可以为多元化的网页，即网页上的内容呈现多元化，包括特性不同的多种对象如图像、文本等的组合。

该网页可以具备H5特性，H5特性可以指的是可以运行在某一应用程序中的网页链接或者二维码，通过网页链接或者二维码可以进入至该网页的运行页面。

该网页可以为游戏页面如对战游戏页面，也可以为广告页面，亦或是其他页面，这里不进行具体限定。

该网页可以包括M个元素，元素可以为超文本标记语言(HyperText MarkupLanguage，HTML)标签，每个HTML标签表示一个可显示在网页页面的对象，该M个元素可以包括网页页面可显示的所有对象，该元素可以通过图像、文本、HTML文件或HTML5文件等来表征。

运行信息可以指的是该网页进入至运行页面后该网页运行过程中的信息，可以包括网页的运行状态，该网页以对战游戏页面为例，该网页可以包括多种运行状态，比如，可以包括加载状态、对手匹配状态、对手匹配成功状态、对战状态、对战结束状态等。

运行信息也可以包括网页在运行状态下的运行情况。比如，网页的运行状态为对战状态时，根据对战的情况不同，运行情况不同，如答题错误为一运行情况，答题正确为一运行情况，连续答对多道题为一运行情况等。

网页页面的显示设备可以监控用户对网页链接和网页页面的输入，将输入的事件发送给网页渲染装置，相应的，网页渲染装置可以基于用户的输入检测到该网页的运行信息。

比如，当网页页面的显示设备监控到用户对网页链接的输入并将该事件发送给网页渲染装置时，网页渲染装置可以基于该输入确定网页进入至加载状态。

又比如，当网页页面的显示设备监控到用户对网页页面显示的内容进行点击并将该事件发送给网页渲染装置时，网页渲染装置也可以基于用户的输入检测到该网页的运行信息。

网页渲染装置也可以根据网页页面的运动时间，来检测网页的运行信息，比如，在一场景中，网页的每一运行状态的运行时间均是预先设定的，通过网页页面的运行时间，网页渲染装置即可获知到网页页面当前的运行状态。

网页渲染装置还可以根据信息匹配情况，来检测网页的运行信息。比如，在对战游戏页面中，网页渲染装置可以根据对手匹配情况，确定该网页处于哪一种运行状态，在未匹配到对手的情况下，可以确定该网页处于对手匹配状态，在匹配到对手的情况下，可以确定该网页处于对手匹配成功状态。

网页渲染装置可以实时或周期检测网页的运行信息，这里不进行具体限定。

步骤S102：在检测到所述网页的运行状态从第一状态切换至第二状态的情况下，基于所述网页的层叠样式表CSS信息，确定所述M个元素在所述第二状态下的目标动画信息，所述CSS信息包括所述M个元素在所述网页的各个运行状态下的动画信息。

该步骤中，网页渲染装置可以根据检测到的网页的运行状态，确定网页的运行状态是否进行了切换，比如，在检测到网页的运行状态从关闭至加载状态的情况下，可以确定网页的运行状态发生了切换。

又比如，若检测到网页的运行状态从对手匹配状态切换至对手匹配成功状态，可以确定网页的运行状态发生了切换。

在检测到网页的运行状态从第一状态切换至第二状态的情况下，可以基于层叠样本表(Cascading Style Sheets，CSS)信息，确定M个元素在所述第二状态下的目标动画信息。

其中，CSS信息中可以包括M个元素在网页的各个运行状态下的动画信息。比如，CSS信息中可以包括M个元素分别在加载状态、对手匹配状态、对手匹配成功状态、对战状态等的动画信息。

其中，CSS信息中M个元素在网页的不同运行状态的动画信息可以相同，也可以不同，这里不进行具体限定。

在一运行状态下的该动画信息可以包括M个元素在该运行状态下页面上的可见性变化动画，以及显示在页面上的元素的样式变化动画。

M个元素在页面上的可见性变化动画可以指的是M个元素在页面上从一种显示组合逐渐变为另一种显示组合。比如，在一时刻，页面上显示M个元素的一种显示组合，该显示组合包括元素A、元素B和元素C，这些元素在该页面上是可见的，而其他元素是不可见的；在另一时刻，页面上显示M个元素的另一种显示组合，该显示组合包括元素B、元素C和元素D，可见性变化动画包括关键帧，该关键帧可以包含M个元素在特定时间的显示组合。

显示在页面上的元素的样式变化动画可以指的是元素在页面上从一种样式逐渐变为另一种样式，样式可以包括对象的字体、间距、颜色、图像大小等中至少一项。该样式变化动画也可以包括关键帧，该关键帧可以包含显示在页面上的元素在特定时间所拥有的样式。

比如，针对某一元素，在一时刻，页面上显示的样式为大图，在另一时刻，页面上显示的样式为小图，从大图变化至小图，从而实现样式的变化。

可以从CSS信息中确定M个元素在第二状态下关联的动画信息，得到第一动画信息，可以将第一动画信息确定为目标动画信息，第一动画信息也可以结合其他的动画信息确定目标动画信息，如结合显示参数的变化动画确定目标动画信息，这里不进行具体限定。

步骤S103：基于所述目标动画信息，对所述网页进行渲染。

该步骤中，可以基于目标动画信息，确定每一帧中显示在页面上的元素、显示在页面上的元素的样式、以及显示在页面上的元素的显示参数等信息，基于所确定的信息进行网页渲染，从而实现网页的动画实现。

在具体实现时，可以基于万维网联盟W3C标准，对于HTML、HTML5、JS、CSS信息、图像、文本等文件格式的解析及渲染，从而可以动态更新页面内容，实现网页的动画。

需要说明的是，当检测到网页的运行状态从第二状态切换至第三状态时，可以确定M个元素在第三状态下的动画信息，可以基于M个元素在第三状态下的动画信息进行网页渲染，从而可以根据不同运行状态去触发不同的动画效果，实现新一轮的动画效果。整个动画效果连续执行，不存在页面跳转而损坏用户体验的效果。

本实施例中，通过检测所述网页的运行信息，所述运行信息包括所述网页的运行状态，所述网页包括M个元素；在检测到所述网页的运行状态从第一状态切换至第二状态的情况下，基于所述网页的层叠样式表CSS信息，确定所述M个元素在所述第二状态下的目标动画信息，所述CSS信息包括所述M个元素在所述网页的各个运行状态下的动画信息；基于所述目标动画信息，对所述网页进行渲染。如此，可以通过CSS实现网页的动画，动画实现简单，相对于基于JS频繁控制页面上的元素移动，可以避免网页运行卡顿，提高网页运行的流畅度。

并且，可以减少对动画工具flash和canvas的依赖，从而可以减少对系统版本的依赖，提升网页动画渲染的适用性，且可以采用小程序的形式来实现，提升用户的覆盖面。

可选的，所述步骤S102具体包括：

从所述CSS信息中获取所述M个元素在所述第二状态关联的动画信息，得到第一动画信息；

基于所述第一动画信息确定所述目标动画信息。

本实施方式中，可以从CSS信息中获取M个元素在第二状态下关联的动画信息，得到第一动画信息，第一动画信息可以包括M个元素在该运行状态下页面上的可见性变化动画，以及显示在页面上的元素的样式变化动画。

可以将第一动画信息确定为目标动画信息，第一动画信息也可以结合其他动画信息如显示参数的变化动画来确定目标动画信息，这里不进行具体限定。如此，可以实现目标动画信息的确定。

可选的，所述基于所述第一动画信息确定所述目标动画信息之前，还包括：

获取所述M个元素在所述第二状态下的显示参数信息；

基于所述显示参数信息生成所述M个元素在所述第二状态下的第二动画信息；

所述基于所述第一动画信息确定所述目标动画信息，包括：

将所述第一动画信息和所述第二动画信息进行融合，得到所述目标动画信息。

本实施方式中，第一动画信息可以结合其他动画信息来确定目标动画信息。第一动画信息可以结合第二动画信息，来确定目标动画信息。

第二动画信息可以包括显示参数的变化动画，显示参数的变化动画可以指的是元素在页面上从一种显示参数逐渐变为另一种显示参数，显示参数可以包括元素的显示透明度、元素在网页的页面中的显示位置、元素的显示分辨率等的至少一项。

比如，针对某一元素，在一时刻，在页面上的显示透明度为60，显示位置的坐标为坐标A，在另一时刻，在页面上的显示透明度为70，显示位置的坐标为坐标B，从而实现显示参数的变化。

不同运行状态下，M个元素的显示参数信息可能不同，因此，可以获取M个元素在第二状态下的显示参数信息，其获取方式包括但不限于获取预先存储的第二状态下关联的显示参数信息，或者接收其他设备发送的第二状态下的显示参数信息，或者基于预设规则生成第二状态下的显示参数信息。

显示参数信息可以包括一种类型的显示参数(如显示透明度)，也可以包括两种类型的显示参数(如显示透明度和显示位置)，甚至是多种类型的显示参数。

并且，针对每种类型的显示参数，显示参数信息可以包括至少一个参数值，该至少一个参数值可以用离散的参数值来表征，比如，显示参数信息包括显示透明度，其参数值分别为100、90、…、10。该至少一个参数值也可以用预设公式来表征，比如，显示参数信息包括显示位置，其参数值按照某一预设公式呈线性变化，这里不进行具体限定。

可以基于所述显示参数信息生成所述M个元素在所述第二状态下的第二动画信息。在一可选实施方式中，可以基于M个元素在某一时刻的显示参数以及参数值，生成动画帧，一系列的动画帧即可构成第二动画信息。

比如，第二动画信息可以实现显示在页面的元素从清晰逐渐变化至模糊的动画，又比如，第二动画信息可以实现显示在页面的元素的显示位置从左侧逐渐移动至页面中心的动画。

可以将所述第一动画信息和所述第二动画信息进行融合，得到所述目标动画信息，可以按照动画时间，将第一动画信息和第二动画信息中相同动画时间的动画帧进行合成，得到目标动画信息中的动画帧。

这样，基于该目标动画信息，可以实现可见性变化动画、样式变化动画和显示参数的变化动画中至少一种。比如，在网页的对手匹配成功状态，基于该目标动画信息，可以实现动画：头像逐渐缩小像左侧滑动，继续或者对战等字样逐渐展现出现。

又比如，在网页的加载状态，基于该目标动画信息，可以实现动画：一元素如用于倒计时的云彩可以左右移动，以增加加载的动态效果，另一元素如背景图像中的云彩可以左右晃动。

还比如，在网页的对战状态(该网页为答题对战游戏的网页)，基于该目标动画信息，可以实现动画：一元素如题型逐渐消失，题干出现，根据题型可以展示不同的题干样式，包含填空题、判断题等，题目的选项依次逐渐显示出来。

本实施方式中，通过获取所述M个元素在所述第二状态下的显示参数信息；基于所述显示参数信息生成所述M个元素在所述第二状态下的第二动画信息；将所述第一动画信息和所述第二动画信息进行融合，得到所述目标动画信息。如此，基于该目标动画信息对网页进行渲染时，可以实现更加丰富的动画效果，提高网页页面的动画效果。

可选的，显示参数信息包括以下至少一项：

元素的显示透明度；

元素在所述网页中的显示位置。

本实施方式中，显示参数信息可以包括一种类型的显示参数(如显示透明度)，也可以包括两种类型的显示参数(如显示透明度和显示位置)，甚至是多种类型的显示参数。

并且，针对每种类型的显示参数，显示参数信息可以包括至少一个参数值，该至少一个参数值可以用离散的参数值来表征，比如，显示参数信息包括显示透明度，其参数值分别为100、90、…、10。该至少一个参数值也可以用预设公式来表征，比如，显示参数信息包括显示位置，其参数值按照某一预设公式呈线性变化，这里不进行具体限定。

如此，在显示参数信息中包括显示透明度，可以实现元素透明度的变化动画，如逐渐出现，逐渐消失等，在显示参数信息中包括显示位置，可以实现元素的位置移动的动画。

可选的，所述运行信息包括所述网页在所述第二状态下的运行情况，所述基于所述目标动画信息，对所述网页进行渲染，包括：

从所述目标动画信息中获取所述M个元素在所述运行情况下的第三动画信息；

基于所述第三动画信息进行网页渲染。

本实施方式中，运行信息还可以包括网页在所述第二状态下的运行情况，比如，在网页的对战状态，网页的运行情况可以指的是对战情况，如该网页为答题对战游戏的网页，可以根据答题的情况不同，动画效果也不同，答题正确的情况下，有一种动画效果，答题错误的情况下，又有一种动画效果，在连续答对的情况下，还有一种动画效果。

因此，可以根据运行情况确定M个元素在该运行情况下的第三动画信息，具体可以从所述目标动画信息中获取所述M个元素在所述运行情况下的第三动画信息。其中，目标动画信息中可以包括M个元素在第二状态的各个运行情况下的动画信息。

之后，可以基于第三动画信息进行网页渲染，如此可以实现根据不同运行情况去触发不同的动画效果，从而达到网页动画的连续性。

可选的，所述M个元素包括目标图像，所述目标图像为针对所述网页的内容进行裁剪的图像。

本实施方式中，M个元素可以包括目标图像，该目标图像可以为针对网页的内容进行裁剪的图像，可以采用HTML、JS、CSS技术来实现裁切交互功能，其图片裁切技术低成本，且可以灵活有效得实现图片交互问题，这样可以对网页页面的显示设备性能配置要求比较宽容。并且，可以减少图片格式gif图片的使用，从而可以减少小程序包的大小。

第二实施例

如图2所示，本公开提供一种网页渲染装置200，包括：

检测模块201，用于检测所述网页的运行信息，所述运行信息包括所述网页的运行状态，所述网页包括M个元素，M为正整数；

确定模块202，用于在检测到所述网页的运行状态从第一状态切换至第二状态的情况下，基于所述网页的层叠样式表CSS信息，确定所述M个元素在所述第二状态下的目标动画信息，所述CSS信息包括所述M个元素在所述网页的各个运行状态下的动画信息；

渲染模块203，用于基于所述目标动画信息，对所述网页进行渲染。

可选的，所述确定模块202包括：

动画获取单元，用于从所述CSS信息中获取所述M个元素在所述第二状态关联的动画信息，得到第一动画信息；

动画确定单元，用于基于所述第一动画信息确定所述目标动画信息。

可选的，还包括：

获取模块，用于获取所述M个元素在所述第二状态下的显示参数信息；

生成模块，用于基于所述显示参数信息生成所述M个元素在所述第二状态下的第二动画信息；

所述动画确定单元，具体用于将所述第一动画信息和所述第二动画信息进行融合，得到所述目标动画信息。

可选的，所述显示参数信息包括以下至少一项：

元素的显示透明度；

元素在所述网页的页面中的显示位置。

可选的，所述运行信息包括所述网页在所述第二状态下的运行情况，所述渲染模块203，具体用于：

从所述目标动画信息中获取所述M个元素在所述运行情况下的第三动画信息；

基于所述第三动画信息进行网页渲染。

可选的，所述M个元素包括目标图像，所述目标图像为针对所述网页的内容进行裁剪的图像。

本公开提供的网页渲染装置200能够实现网页渲染方法实施例实现的各个过程，且能够达到相同的有益效果，为避免重复，这里不再赘述。

本公开的技术方案中，所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

图3示出了可以用来实施本公开的实施例的示例电子设备的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图3所示，设备300包括计算单元301，其可以根据存储在只读存储器(ROM)302中的计算机程序或者从存储单元308加载到随机访问存储器(RAM)303中的计算机程序，来执行各种适当的动作和处理。在RAM 303中，还可存储设备300操作所需的各种程序和数据。计算单元301、ROM 302以及RAM 303通过总线304彼此相连。输入/输出(I/O)接口305也连接至总线304。

设备300中的多个部件连接至I/O接口305，包括：输入单元306，例如键盘、鼠标等；输出单元307，例如各种类型的显示器、扬声器等；存储单元308，例如磁盘、光盘等；以及通信单元309，例如网卡、调制解调器、无线通信收发机等。通信单元309允许设备300通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元301可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元301的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元301执行上文所描述的各个方法和处理，例如网页渲染方法。例如，在一些实施例中，网页渲染方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元308。在一些实施例中，计算机程序的部分或者全部可以经由ROM 302和/或通信单元309而被载入和/或安装到设备300上。当计算机程序加载到RAM 303并由计算单元301执行时，可以执行上文描述的网页渲染方法的一个或多个步骤。备选地，在其他实施例中，计算单元301可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行网页渲染方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

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

Claims (10)

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

检测所述网页的运行信息，所述运行信息包括所述网页的运行状态，所述网页包括M个元素，M为正整数，所述运行信息根据所述网页页面的运动时间或者信息匹配情况检测得到；

在检测到所述网页的运行状态从第一状态切换至第二状态的情况下，基于所述网页的层叠样式表CSS信息，确定所述M个元素在所述第二状态下的目标动画信息，所述CSS信息包括所述M个元素在所述网页的各个运行状态下的动画信息；

基于所述目标动画信息，对所述网页进行渲染；

其中，所述基于所述网页的层叠样式表CSS信息，确定所述M个元素在所述第二状态下的目标动画信息，包括：

从所述CSS信息中获取所述M个元素在所述第二状态关联的动画信息，得到第一动画信息；

基于所述第一动画信息确定所述目标动画信息；

所述基于所述第一动画信息确定所述目标动画信息之前，还包括：

获取所述M个元素在所述第二状态下的显示参数信息；

基于所述显示参数信息生成所述M个元素在所述第二状态下的第二动画信息；

所述基于所述第一动画信息确定所述目标动画信息，包括：

将所述第一动画信息和所述第二动画信息进行融合，得到所述目标动画信息，所述第一动画信息包括所述M个元素在所述运行状态下页面上的可见性变化动画，以及显示在页面上的元素的样式变化动画，所述第二动画信息包括显示参数的变化动画，所述显示参数的变化动画指的是元素在页面上从一种显示参数逐渐变为另一种显示参数，所述显示参数包括元素的显示透明度、元素在网页的页面中的显示位置、元素的显示分辨率的至少一项，所述目标动画信息用于实现可见性变化动画、样式变化动画和显示参数的变化动画中至少一种；

所述将所述第一动画信息和所述第二动画信息进行融合，得到所述目标动画信息，包括：

按照动画时间，将所述第一动画信息和所述第二动画信息中相同动画时间的动画帧进行合成，得到所述目标动画信息中的动画帧。

2.根据权利要求1所述的方法，其中，所述显示参数信息包括以下至少一项：

元素的显示透明度；

元素在所述网页的页面中的显示位置。

3.根据权利要求1所述的方法，其中，所述运行信息包括所述网页在所述第二状态下的运行情况，所述基于所述目标动画信息，对所述网页进行渲染，包括：

从所述目标动画信息中获取所述M个元素在所述运行情况下的第三动画信息；

基于所述第三动画信息进行网页渲染。

4.根据权利要求1所述的方法，其中，所述M个元素包括目标图像，所述目标图像为针对所述网页的内容进行裁剪的图像。

5.一种网页渲染方装置，包括：

检测模块，用于检测所述网页的运行信息，所述运行信息包括所述网页的运行状态，所述网页包括M个元素，M为正整数，所述运行信息根据所述网页页面的运动时间或者信息匹配情况检测得到；

确定模块，用于在检测到所述网页的运行状态从第一状态切换至第二状态的情况下，基于所述网页的层叠样式表CSS信息，确定所述M个元素在所述第二状态下的目标动画信息，所述CSS信息包括所述M个元素在所述网页的各个运行状态下的动画信息；

渲染模块，用于基于所述目标动画信息，对所述网页进行渲染；

所述确定模块包括：

动画获取单元，用于从所述CSS信息中获取所述M个元素在所述第二状态关联的动画信息，得到第一动画信息；

动画确定单元，用于基于所述第一动画信息确定所述目标动画信息；

还包括：

获取模块，用于获取所述M个元素在所述第二状态下的显示参数信息；

生成模块，用于基于所述显示参数信息生成所述M个元素在所述第二状态下的第二动画信息；

所述动画确定单元，具体用于将所述第一动画信息和所述第二动画信息进行融合，得到所述目标动画信息，所述第一动画信息包括所述M个元素在所述运行状态下页面上的可见性变化动画，以及显示在页面上的元素的样式变化动画，所述第二动画信息包括显示参数的变化动画，所述显示参数的变化动画指的是元素在页面上从一种显示参数逐渐变为另一种显示参数，所述显示参数包括元素的显示透明度、元素在网页的页面中的显示位置、元素的显示分辨率的至少一项，所述目标动画信息用于实现可见性变化动画、样式变化动画和显示参数的变化动画中至少一种；

所述动画确定单元，具体用于按照动画时间，将所述第一动画信息和所述第二动画信息中相同动画时间的动画帧进行合成，得到所述目标动画信息中的动画帧。

6.根据权利要求5所述的装置，其中，所述显示参数信息包括以下至少一项：

元素的显示透明度；

元素在所述网页的页面中的显示位置。

7.根据权利要求5所述的装置，其中，所述运行信息包括所述网页在所述第二状态下的运行情况，所述渲染模块，具体用于：

从所述目标动画信息中获取所述M个元素在所述运行情况下的第三动画信息；

基于所述第三动画信息进行网页渲染。

8.根据权利要求5所述的装置，其中，所述M个元素包括目标图像，所述目标图像为针对所述网页的内容进行裁剪的图像。

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

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-4中任一项所述的方法。

10.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-4中任一项所述的方法。

Images