CN112287263A - 网页显示方法、装置、系统及终端、计算机可读存储介质 - Google Patents

Abstract

本申请提供了一种网页显示方法、装置、系统及终端、计算机可读存储介质，该网页显示方法应用于基于android操作系统的终端，该方法包括：从服务端获取待显示网页的网页数据；对网页数据进行处理，以得到待显示网页中图像内容的信息，图像内容的信息包括图像内容的显示位置及宽高信息；根据图像内容的信息构建图像硬解码组件，使图像硬解码组件的图像窗口位置及宽高信息与图像内容的显示位置及宽高信息一致；在显示待显示网页时，通过图像硬解码组件显示图像内容。本申请提供的网页显示方法，在显示网页时，可以利用图像硬解码组件显示网页中的图像内容，有利于减少终端对网页数据处理使用的内存和cpu资源，提高终端的使用流畅性。

Description

网页显示方法、装置、系统及终端、计算机可读存储介质

技术领域

本申请涉及网页处理技术领域，尤其涉及一种网页显示方法、装置、系统及终端、计算机可读存储介质。

背景技术

在目前基于android操作系统的终端(如手机、平板电脑、交互大屏)中，网页中的图像内容(如视频或静态图片)大都是通过web浏览器直接渲染播放，这种方式均是通过软件解码播放的，比较消耗终端的内存和cpu，特别是当图像内容的数据量较大的情况下，会造成终端的内存和cpu占用较高，容易影响终端的操控流畅性。

发明内容

基于上述现状，本申请的主要目的在于提供一种网页显示方法、装置、系统及终端、计算机可读存储介质，有利于提高终端在显示网页时的使用流畅性。

为实现上述目的，本申请采用的技术方案提供了一种网页显示方法，应用于基于android操作系统的终端，所述方法包括：

从服务端获取待显示网页的网页数据；

对所述网页数据进行处理，以得到所述待显示网页中图像内容的信息，所述图像内容的信息包括所述图像内容的显示位置及宽高信息；

根据所述图像内容的信息构建图像硬解码组件，使所述图像硬解码组件的图像窗口位置及宽高信息与所述图像内容的显示位置及宽高信息一致；

在显示所述待显示网页时，通过所述图像硬解码组件显示所述图像内容。

可选的，所述网页数据包括脚本文件和HTML文件，所述脚本文件包含所述图像内容的信息，所述HTML文件包含所述待显示网页中非图像内容的信息，且所述HTML文件中对应所述图像内容的区域的信息被设置为空白占位符。

可选的，所述方法还包括：在显示所述待显示网页时，通过WEB浏览器对所述HTML文件进行渲染处理，以显示所述非图像内容。

可选的，所述网页数据包括HTML文件，所述HTML文件包含所述图像内容的信息；

其中，所述对所述网页数据进行处理，以得到所述待显示网页中图像内容的信息包括：

对所述HTML文件进行解析；

在所述HTML文件包含图像标签的情况下，从所述图像标签内获取所述图像内容的信息。

可选的，从所述图像标签内获取所述图像内容的信息之后，所述方法还包括：

在所述HTML文件中删除所述图像标签，并将所述HTML文件中对应所述图像内容的区域的信息设置为空白占位符。

可选的，所述图像内容的信息还包括所述图像内容的存储路径。

为实现上述目的，本申请的技术方案还提供了一种网页显示装置，应用于基于android操作系统的终端，所述装置包括：

获取模块，用于从服务端获取待显示网页的网页数据；

网页数据处理模块，用于对所述网页数据进行处理，以得到所述待显示网页中图像内容的信息，所述图像内容的信息包括所述图像内容的显示位置及宽高信息；

设置模块，用于根据所述图像内容的信息构建图像硬解码组件，使所述图像硬解码组件的图像窗口位置及宽高信息与所述图像内容的显示位置及宽高信息一致；

显示处理模块，用于在显示所述待显示网页时，通过所述图像硬解码组件显示所述图像内容。

为实现上述目的，本申请的技术方案还提供了一种基于android操作系统的终端，包括至少一个处理器以及与所述至少一个处理器耦合的存储器，其中，所述至少一个处理器用于执行存储器中的指令，以实现上述任一种网页显示方法。

为实现上述目的，本申请的技术方案还提供了一种网页显示系统，包括服务端和上述的终端，其中，所述服务端存储有所述待显示网页的网页数据。

为实现上述目的，本申请的技术方案还提供了一种计算机可读存储介质，其存储有计算机程序，该程序被处理器执行时以实现上述任一种网页显示方法。

本申请提供的网页显示方法，在显示网页时，可以利用图像硬解码组件显示网页中的图像内容，有利于减少终端对网页数据处理使用的内存和cpu资源，提高终端的使用流畅性。

附图说明

通过以下参照附图对本申请实施例的描述，本申请的上述以及其它目的、特征和优点将更为清楚，在附图中：

图1是本申请实施例提供的一种网页显示方法的流程图；

图2是本申请实施例提供的一种HTML文件的示意图；

图3是本申请实施例提供的网页显示方法的界面效果示意图；

图4是本申请实施例提供的一种网页显示装置的示意图。

具体实施方式

以下基于实施例对本申请进行描述，但是本申请并不仅仅限于这些实施例。在下文对本申请的细节描述中，详尽描述了一些特定的细节部分，为了避免混淆本申请的实质，公知的方法、过程、流程、元件并没有详细叙述。

此外，本领域普通技术人员应当理解，在此提供的附图都是为了说明的目的，并且附图不一定是按比例绘制的。

除非上下文明确要求，否则整个说明书和权利要求书中的“包括”、“包含”等类似词语应当解释为包含的含义而不是排他或穷举的含义；也就是说，是“包括但不限于”的含义。

在本申请的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本申请的描述中，除非另有说明，“多个”的含义是两个或两个以上。

现有技术中，基于android操作系统的终端在显示网页时，均是通过软件解码的方式实现网页中图像的显示，而软件解码需要依赖终端的cpu，因此需要消耗终端较多的内存和cpu资源。本申请提供的网页显示方法，从服务端获取待显示网页的网页数据后，对该网页数据进行处理，得到待显示网页中图像内容的信息，然后根据得到的图像内容的信息构建图像硬解码组件，在显示网页时，通过构建的图像硬解码组件以硬件解码的方式显示网页中的图像内容，相比现有技术中通过软件解码显示网页中的图像内容的方式，能够充分利用终端的VPU芯片等视频处理单元的硬件性能，降低对终端的内存和cpu资源的占用，从而能够有效提高终端的使用流畅性和图像内容播放的稳定性。

本申请实施例提供了一种网页显示方法，应用于基于android操作系统的终端，该终端可以是手机、平板电脑或交互大屏等智能终端，参见图1，所述方法包括：

步骤S1：从服务端获取待显示网页的网页数据。

其中，网页数据为终端显示待显示网页所需的数据。例如，网页数据可以包括文字数据和图像数据，其中，图像数据可以包括静态图像数据和/或视频数据。

终端可以向服务端发送网页请求，服务端接收到网页请求后向终端发送待显示网页的网页数据。例如，终端可以根据网页浏览用户的指令向服务端发送网页请求，服务端在接收到网页请求后查找网页浏览用户所需网页的网页数据，然后将该网页数据发送至终端。

步骤S2：对步骤S1中获得的网页数据进行处理，以得到待显示网页中图像内容的信息，该图像内容的信息包括图像内容的显示位置及宽高信息。

即该图像内容的信息包括待显示网页上放置图像内容的位置和指示图像内容大小的宽度信息和高度信息。其中，待显示网页中图像内容可以包括待显示网页中的视频和/或静态图片等。

步骤S3：根据步骤S2中得到的图像内容的信息构建图像硬解码组件，使构建的图像硬解码组件的图像窗口位置及宽高信息与图像内容的显示位置及宽高信息一致。其中，图像硬解码组件采用硬件解码的方式对图像数据进行处理，实现图像内容的显示，相比现有技术中采用软件解码实现图像显示的方式，能够充分利用终端的VPU芯片等视频处理单元的硬件性能，降低对终端的内存和cpu资源的占用。

这里，可以根据图像内容的显示位置、宽度信息和高度信息在图像内容的显示位置构建一个与图像内容宽度和高度一致的图像硬解码组件。其中，该图像硬解码组件可以例如为VideoView控件或其他类型的播放器控件。

步骤S4：在显示待显示网页时，通过构建的图像硬解码组件显示待显示网页中的图像内容。

在步骤S4中，在显示待显示网页时，可以通过例如WEB浏览器进行渲染处理，从而显示待显示网页中的非图像内容，同时通过图像硬解码组件显示待显示网页中的图像内容，其中图像硬解码组件的图像窗口可以覆盖在WEB浏览器所显示界面中对应图像内容的区域上。

如此，本申请提供的网页显示方法，在显示网页时，可以利用图像硬解码组件显示网页中的图像内容，相比现有技术中通过软件解码显示网页中的图像内容的方式，能够充分利用终端的VPU芯片等视频处理单元的硬件性能，降低对终端的内存和cpu资源的占用，从而能够有效提高终端的使用流畅性和图像内容播放的稳定性。

在本申请一实施例中，终端从服务端获取的待显示网页的网页数据包括脚本文件和HTML文件，其中，该脚本文件包含待显示网页中图像内容的信息，即包括图像内容的显示位置及宽高信息。其中，该脚本文件可以是JS(JavaScript)文件或Python文件等。通过对脚本文件执行处理，可以得到待显示网页中图像内容的信息，并通过接口之间调用的方式实现图像硬解码组件的构建。该HTML文件可以包含待显示网页中非图像内容的信息，如网页中的标题、列表和文字等信息。其中，该HTML文件中对应图像内容的区域的信息可以被设置为空白占位符。例如，参见图2，HTML文件中对应图像内容的区域的信息10被设置为空白占位符，因此当该HTML文件被渲染处理时，所实现的显示界面中对应图像内容的区域为空白内容。此外，终端从服务端获取的待显示网页的网页数据还可以包括CSS文件，该CSS文件可以包含待显示网页中标题文字的字体大小、颜色和背景等信息中的一者或多者。

进一步地，当终端获取待显示网页的网页数据后，可以通过WEB浏览器渲染处理网页数据，通过网页数据中的脚本文件判断是否存在图像内容，若存在图像内容，则解析得到图像内容的显示位置及宽高信息，并启动本地的native组件，构造一个位置和宽高大小相同的图像硬解码组件，并在该图像硬解码组件中启动硬件编解码。例如，该图像硬解码组件可以包括android本地的VideoView控件，对于网页数据中的HTML文件，终端可以通过WEB浏览器对HTML文件进行渲染处理，从而显示待显示网页中的非图像内容，其中，WEB浏览器所显示界面中对应图像内容的区域为空白内容，同时通过图像硬解码组件显示待显示网页中图像内容，且图像硬解码组件实现的图像窗口覆盖在该空白内容的区域上，且位置、宽高信息与空白内容的区域均一致。即WEB浏览器不再对图像内容进行软解码，从而WEB浏览器的显示界面中对应图像内容的区域是空白的，通过将图像硬解码组件的图像窗口覆盖在该图像内容的区域上，用户看到的是通过图像硬解码组件实现的图像显示。例如，如图3所示，图像硬解码组件的图像窗口20覆盖在WEB浏览器所显示界面中对应图像内容的区域上，从而能够实现与现有技术(通过WEB浏览器渲染处理图像内容的方式)相同的界面效果，同时由于图像内容是通过本地硬件解码的方式进行处理，不会占用WEB浏览器使用的cpu和内存资源，从而可以有效增加web页面内其他内容的播放流畅性。

可以理解的是，在本实施例中，通过对网页数据的结构进行改变，将待显示网页中图像内容的信息设置在脚本文件中，并将HTML文件中对应图像内容的区域的信息设置为空白占位符，使得终端通过执行脚本文件即可得到图像内容的信息，图像内容的信息的获取不需要对HTML文件进行解析，这样有利于提高终端对网页数据的处理速度，能够进一步提高终端的使用流畅性。

在本申请另一实施例中，终端从服务端获取的网页数据仅包括HTML文件，待显示网页中图像内容的信息包含于该HTML文件中，图像内容的信息包括图像内容的显示位置及宽高信息。此外，该HTML文件还可以包含待显示网页中非图像内容的信息，如网页中的标题、列表等信息。此外，终端从服务端获取的待显示网页的网页数据还可以包括CSS文件，该CSS文件可以包含待显示网页中标题文字的字体大小、颜色和背景等信息中的一者或多者。

其中，终端可以通过以下方式对获取的网页数据进行处理，以得到待显示网页中图像内容的信息：可以通过对网页数据中的HTML文件进行解析，并识别HTML文件中的标签，在HTML文件中的标签中包括图像标签的情况下，从该图像标签内获取图像内容的信息。

例如，终端通过对从服务端获取的HTML文件进行解析，判断其中是否包含图像标签，若是，则从该图像标签内获取图像内容的信息。可以理解的是，HTML文件由一系列标签组成，例如图像标签和文本标签等，若网页数据中包含图像内容，则HTML文件一般需要通过图像标签对图像内容的信息进行定义。其中，图像标签可以包括图像起始子标签和图像终止子标签，起始子标签和终止子标签之间限定图像内容的信息，该图像内容的信息例如包括图像内容的显示位置、宽高信息及存储路径等信息。所述的从该图像标签内获取图像内容的信息，即获取起始子标签和终止子标签之间限定图像内容的信息。其中，该图像标签可以包括如图2所示的video标签和/或img标签。

可选地，在从HTML文件的图像标签内获取图像内容的信息之后，上述方法还包括：在HTML文件中删除图像标签，将HTML文件中对应图像内容的区域的信息设置为空白占位符。即，终端在从HTML文件的图像标签内获取图像内容的信息之后，可以在该HTML文件中删除该图像标签，并将HTML文件中对应该图像内容的区域的信息设置为空白占位符，使得终端在显示网页时就不会对HTML文件中的该图像标签进行处理，这样可以减少对HTML文件处理使用的cpu和内存资源，能够进一步提高终端的使用流畅性。

在从HTML文件的图像标签内获取图像内容的信息之后，终端根据得到的图像内容的信息构建图像硬解码组件，使图像硬解码组件的图像窗口位置及宽高信息与图像内容的显示位置及宽高信息一致。其中，该图像硬解码组件可以例如为android系统的VideoView控件或其他类型的播放器控件。

其中，对于上述被删除图像标签的HTML文件，终端可以通过WEB浏览器对该被删除图像标签的HTML文件进行渲染处理，从而显示待显示网页中的非图像内容。其中，WEB浏览器所显示界面中对应图像内容的区域为空白内容。同时，图像硬解码组件实现的图像窗口覆盖在该空白内容的区域上，且位置、宽高信息与空白内容的区域均一致，从而能够实现与现有技术相同的界面效果，同时由于图像内容是通过本地硬件解码的方式进行处理，不会占用WEB浏览器使用的cpu和内存资源，从而可以有效增加web页面内其他内容的播放流畅性，并有利于提高图像播放的效率。

可以理解的是，本实施例中，终端通过对HTML文件进行解析得到图像内容的信息，这样不需要对网页数据的结构进行改变，可以大大提高终端的兼容性，终端在接收到现有的网页数据后同样能够实现网页显示，并达到提高终端使用流畅性的效果。

需要说明的是，在上述终端对从服务端获取的HTML文件进行解析后，若判断HTML文件中未包含图像标签，则确认该待显示网页中未包含图像内容，无需进行图像处理，然后通过WEB浏览器对HTML文件渲染处理，实现网页页面显示。

此外，还需要说明的是，在本申请的上述实施例中，终端对从服务端获取的网页数据进行处理，所得到的图像内容的信息还可以包括图像内容的存储路径(如URL)。终端可以通过该存储路径获得图像内容的图像数据，进而通过构建的图像硬解码组件显示图像内容。

相应的，本申请实施例还提供了一种网页显示装置，应用于基于android操作系统的终端，参见图4，该网页显示装置包括：

获取模块1，用于从服务端获取待显示网页的网页数据；

网页数据处理模块2，用于对从服务端获取的网页数据进行处理，以得到待显示网页中图像内容的信息，该图像内容的信息包括图像内容的显示位置及宽高信息；

设置模块3，用于根据图像内容的信息构建图像硬解码组件，使图像硬解码组件的图像窗口位置及宽高信息与图像内容的显示位置及宽高信息一致；

显示处理模块4，用于在显示待显示网页时，通过构建的图像硬解码组件显示图像内容。

本申请实施例提供的网页显示装置，在显示网页时，可以利用图像硬解码组件显示网页中的图像内容，有利于减少终端对网页数据处理使用的内存和cpu资源，提高终端的使用流畅性。

作为可选的实施例，获取模块1从服务端获取的待显示网页的网页数据包括脚本文件和HTML文件，该脚本文件包含图像内容的信息，该HTML文件包含待显示网页中非图像内容的信息，且该HTML文件中对应图像内容的区域的信息被设置为空白占位符。

作为可选的实施例，网页显示装置还可以包括渲染处理模块，WEB浏览器通过该渲染处理模块用于对HTML文件进行渲染处理，以显示非图像内容。

作为可选的实施例，获取模块1从服务端获取的待显示网页的网页数据包括HTML文件，该HTML文件包含图像内容的信息，其中，网页数据处理模块2包括解析单元和获取单元；

其中，解析单元用于对HTML文件进行解析，获取单元用于在HTML文件包含图像标签的情况下，从图像标签内获取图像内容的信息。

作为可选的实施例，网页数据处理模块2还可以包括处理单元，该处理单元用于在获取单元从图像标签内获取图像内容的信息之后，在HTML文件中删除图像标签，并将HTML文件中对应图像内容的区域的信息设置为空白占位符。

作为可选的实施例，上述图像内容的信息还可以包括图像内容的存储路径。

本申请实施例还提供了一种基于android操作系统的终端，包括至少一个处理器以及与该至少一个处理器耦合的存储器，其中，该至少一个处理器用于执行存储器中的指令，以实现上述任一种网页显示方法。

例如，该终端可以是手机、平板电脑或交互大屏等智能终端。

本申请实施例还提供了一种网页显示系统，包括服务端和上述的终端，其中，该服务端存储有待显示网页的网页数据。

具体地，服务端与终端之间可以通过网络协议进行信息交互。终端向服务端发送网页请求后，服务器将待显示网页的网页数据通过网络协议发送到终端，终端对该网页数据进行处理，得到待显示网页中图像内容的信息，然后启动本地的native组件，构造一个位置和宽高大小相同的图像硬解码组件，并在该图像硬解码组件中启动硬件编解码。例如，该图像硬解码组件可以包括android本地的VideoView控件。之后，在通过WEB浏览器显示待显示网页中的非图像内容时，通过该图像硬解码组件显示图像内容，这样能够更好的利用终端的硬件性能，提高终端的使用流畅性。

例如，在一实施例中，终端从服务端获取的网页数据包括脚本文件，终端可以通过该脚本文件得到待显示网页中图像内容的信息，并构建图像硬解码组件，其中，服务端被配置为通过以下方式得到待显示网页的网页数据：

步骤A：获取待显示网页的网页制作信息，该网页制作信息包括网页中图像内容的信息，该图像内容的信息包括图像内容的显示位置及宽高信息。

步骤B：根据网页制作信息生成脚本文件，生成的脚本文件包含上述图像内容的信息。

其中，本实施例中的网页显示系统可以例如应用在信息发布场景下。具体地，管理用户可以将需要发布的图像内容、网页上放置该图像内容的位置、宽高大小等信息通过管理端提交给服务端，服务端接收到上述信息后，生成网页数据并存储，网页数据包括脚本文件、HTML文件，其中，脚本文件包含网页中图像内容的信息，即包括图像内容的显示位置及宽高信息，从而实现网页制作。例如，该脚本文件可以是JS(JavaScript)文件，也可以是Python文件。

网页浏览用户可以通过终端获取发布信息。具体地，终端可以根据网页浏览用户的指令向服务端发送网页请求，服务端在接收到网页请求后查找相应的网页数据，然后将该网页数据发送至终端，待终端将网页数据下载到本地后启动显示网页预览，并在开始预览时解析出该网页内的图像内容的位置、宽高大小、存储路径，将该信息转化成一个android本地的图像硬解码组件，并设置该控件的图像窗口位置及宽高大小与图像内容的显示位置及宽高大小一致，完成后通过WEB浏览器播放待显示网页中的非图像内容，同时通过图像硬解码组件播放图像内容，且图像硬解码组件的图像窗口覆盖在WEB浏览器界面的相应图像位置上，其中，该图像硬解码组件可以例如为VideoView控件或其他类型的播放器控件。

本申请实施例提供的网页显示系统，能够实现网页中图像内容及其他非图像内容的同时浏览，在实现与现有技术相同的界面效果情况下，终端所需的cpu和内存资源更小，可以大大提高终端在多网页任务下的流畅性。

本申请实施例还提供了一种计算机可读存储介质，其存储有计算机程序，该程序被处理器执行时以实现上述任一种网页显示方法。

本领域的技术人员能够理解的是，在不冲突的前提下，上述各可选方案可以自由地组合、叠加。

应当理解，上述的实施方式仅是示例性的，而非限制性的，在不偏离本申请的基本原理的情况下，本领域的技术人员可以针对上述细节做出的各种明显的或等同的修改或替换，都将包含于本申请的权利要求范围内。

Claims (10)

1.一种网页显示方法，应用于基于android操作系统的终端，其特征在于，所述方法包括：

从服务端获取待显示网页的网页数据；

对所述网页数据进行处理，以得到所述待显示网页中图像内容的信息，所述图像内容的信息包括所述图像内容的显示位置及宽高信息；

根据所述图像内容的信息构建图像硬解码组件，使所述图像硬解码组件的图像窗口位置及宽高信息与所述图像内容的显示位置及宽高信息一致；

在显示所述待显示网页时，通过所述图像硬解码组件显示所述图像内容。

2.根据权利要求1所述的方法，其特征在于，所述网页数据包括脚本文件和HTML文件，所述脚本文件包含所述图像内容的信息，所述HTML文件包含所述待显示网页中非图像内容的信息，且所述HTML文件中对应所述图像内容的区域的信息被设置为空白占位符。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

在显示所述待显示网页时，通过WEB浏览器对所述HTML文件进行渲染处理，以显示所述非图像内容。

4.根据权利要求1所述的方法，其特征在于，所述网页数据包括HTML文件，所述HTML文件包含所述图像内容的信息；

其中，所述对所述网页数据进行处理，以得到所述待显示网页中图像内容的信息包括：

对所述HTML文件进行解析；

在所述HTML文件包含图像标签的情况下，从所述图像标签内获取所述图像内容的信息。

5.根据权利要求4所述的方法，其特征在于，从所述图像标签内获取所述图像内容的信息之后，所述方法还包括：

在所述HTML文件中删除所述图像标签，并将所述HTML文件中对应所述图像内容的区域的信息设置为空白占位符。

6.根据权利要求1-5中任一项所述的方法，其特征在于，所述图像内容的信息还包括所述图像内容的存储路径。

7.一种网页显示装置，应用于基于android操作系统的终端，其特征在于，所述装置包括：

获取模块，用于从服务端获取待显示网页的网页数据；

网页数据处理模块，用于对所述网页数据进行处理，以得到所述待显示网页中图像内容的信息，所述图像内容的信息包括所述图像内容的显示位置及宽高信息；

设置模块，用于根据所述图像内容的信息构建图像硬解码组件，使所述图像硬解码组件的图像窗口位置及宽高信息与所述图像内容的显示位置及宽高信息一致；

显示处理模块，用于在显示所述待显示网页时，通过所述图像硬解码组件显示所述图像内容。

8.一种基于android操作系统的终端，其特征在于，包括至少一个处理器以及与所述至少一个处理器耦合的存储器，其中，所述至少一个处理器用于执行存储器中的指令，以实现权利要求1-6中任一项所述的方法。

9.一种网页显示系统，其特征在于，包括服务端和权利要求8所述的终端，其中，所述服务端存储有所述待显示网页的网页数据。

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

Images