CN105824874A - 移动终端及其网页渲染方法、装置 - Google Patents

Abstract

一种移动终端及其网页渲染方法、装置，其中，所述方法包括：在当前显示网页模式下监听模式切换事件；根据模式切换事件获取当前显示网页所需的层叠样式表CSS信息，CSS信息携带有欲切换成的目标模式的渲染参数；根据CSS信息中的渲染参数渲染当前显示网页，包括：按顺序渲染当前显示网页可视化区域的页面和非可视化区域的页面，可视化区域为移动终端屏幕所在区域。减少了一次性同时渲染的网页内容，提高了可视化区域页面的模式切换速度。由于非可视化区域的页面在可视化区域的页面之后渲染，因此，能够提高可视化区域页面的渲染效率，降低了发生闪屏现象的概率。

Description

移动终端及其网页渲染方法、装置

技术领域

本发明涉及移动互联网技术领域，具体涉及一种移动终端及其网页渲染方法、装置。

背景技术

利用层叠样式表(CascadingStyleSheets，CSS)是目前改变网页样式的常用方式，利用CSS样式表可以减少开发工作量，在很大程度上提高了工作效率。CSS可以作为外部文件单独存在，也可以包含在网页源代码文件中。使用CSS设置网页样式，可以实现网页的内容与表现形式分离，网页内容存放在HTML文档中，而用于定义网页表现形式的CSS样式表存放在另外的文件中。这样做的好处在于使得网页的外观更容易维护和修改，并且可以使HTML文件更加简练，缩短浏览器加载网页的时间。为了简化HTML文件，提高使得网页内容和网页样式的可维护性，提高网页加载速度，较多的采用将JavaScript和CSS放在外部文件中而不是放在页面本身的方式。通过编辑CSS文档，让网页加载该文档，使得网站中的所有元素自动地更新，从而改变网页外观。

然而，当网页上的元素较多时，加载CSS文件后，需要对网页中的元素进行重新加载显示，由于切换速度的限制，在一定程度上影响了渲染效率，此外，加载过慢可能会导致“闪屏”现象。

发明内容

本发明要解决的技术问题在于现有技术中在切换网页浏览模式时，由于网页中的元素较多，需要加载过多的层叠样式表CSS信息，从而限制了模式切换速度，降低了渲染效率，并导致闪屏现象的发生。

为解决上述技术问题，根据第一方面，本发明实施例公开了一种移动终端网页渲染方法，包括：

在当前显示网页模式下监听模式切换事件；根据模式切换事件获取当前显示网页所需的层叠样式表CSS信息，CSS信息携带有欲切换成的目标模式的渲染参数；根据CSS信息中的渲染参数渲染当前显示网页，包括：按顺序渲染当前显示网页可视化区域的页面和非可视化区域的页面，可视化区域为移动终端屏幕所在区域。

进一步，按顺序渲染当前显示网页可视化区域的页面和非可视化区域的页面包括：渲染当前显示网页可视化区域的页面；渲染可视化区域的页面之后的页面；渲染可视化区域的页面之前的页面。

进一步，渲染参数包括：网页HTML底层纹理和网页HTML标签；在根据CSS信息中的渲染参数渲染当前显示网页中，依次根据网页HTML底层纹理和网页HTML标签渲染当前显示网页。

进一步，网页HTML标签包括：图像标签、不动元素标签和静态文本中的至少一种。

进一步，在根据CSS信息中的渲染参数渲染当前显示网页之后，还包括：获取浏览器缓存的除当前显示网页外的至少一组CSS信息；根据获取的各组CSS信息中的渲染参数渲染与各组CSS信息映射的网页，其中，每组CSS信息分别映射一个网页。

根据第二方面，本发明实施例公开了一种移动终端网页渲染装置，包括：

监听单元，用于在当前显示网页模式下监听模式切换事件；第一CSS信息获取单元，用于根据模式切换事件获取当前显示网页所需的层叠样式表CSS信息，CSS信息携带有欲切换成的目标模式的渲染参数；第一渲染单元，用于根据CSS信息中的渲染参数渲染当前显示网页，包括：按顺序渲染当前显示网页可视化区域的页面和非可视化区域的页面，可视化区域为移动终端屏幕所在区域。

进一步，第一渲染单元用于渲染当前显示网页可视化区域的页面；渲染可视化区域的页面之后的页面；渲染可视化区域的页面之前的页面。

进一步，还包括：第二CSS信息获取单元，用于获取浏览器缓存的除当前显示网页外的至少一组CSS信息；第二渲染单元，用于根据获取的各组CSS信息中的渲染参数渲染与各组CSS信息映射的网页，其中，每组CSS信息分别映射一个网页。

根据第三方面，本发明实施例公开了一种移动终端，包括：

通信模块，用于从服务器获取网页内容；显示屏，用于可视化呈现网页内容；处理器，用于执行程序实现上述的方法。

本发明技术方案，具有如下优点：

本发明实施例提供的移动终端网页渲染方法和装置，由于在根据CSS信息中的渲染参数渲染当前显示网页时，按顺序渲染当前显示网页可视化区域的页面和非可视化区域的页面，从而，减少了一次性同时渲染的网页内容，提高了可视化区域页面的模式切换速度。由于非可视化区域的页面在可视化区域的页面之后渲染，因此，能够提高可视化区域页面的渲染效率，降低了发生闪屏现象的概率。

作为优选的技术方案，在渲染当前显示网页之后，获取浏览器缓存的至少一组CSS信息，渲染与各组CSS信息映射的网页。能够充分利用在显示当前网页的时间渲染缓存的网页，从而，在显示缓存页面时，能够进一步缩短缓存页面的渲染时间，提高了缓存也面的渲染效率。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例中一种移动终端网页渲染方法流程图；

图2为本发明实施例中一种移动终端网页渲染装置结构示意图；

图3为本发明实施例中一种移动终端结构示意图。

具体实施方式

下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

此外，下面所描述的本发明不同实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互结合。

为提高切换网页浏览模式时的模式切换速度，提高渲染效率，本实施例公开了一种移动终端网页渲染方法，请参考图1，为该移动终端网页渲染方法流程图，该移动终端网页渲染方法包括如下步骤：

步骤S100，在当前显示网页模式下监听模式切换事件。通常，浏览器中都会预置不同的浏览模式，以保护用户的用眼健康。例如，在亮度模式时，网页为浅色背景，深色字体；当设置为低亮度模式时，网页背景变为深色，字体变为暖色。本实施例中，在当前显示网页模式下，可以启动系统广播，以监听切换网页模式的事件。

步骤S200，根据模式切换事件获取当前显示网页所需的层叠样式表CSS信息，其中，CSS信息携带有欲切换成的目标模式的渲染参数。在具体实施例中，在监听到欲切换的网页目标模式，获取与之对应的CSS信息，具体地，CSS信息携带的渲染参数包括：网页HTML底层纹理(BaseLayer纹理)和网页HTML标签，其中，网页HTML标签可以包括图像标签、不动元素标签、静态文本标签、超链接标签等中的一种或多种。在本实施例中，在获取当前显示网页所需的层叠样式表CSS信息时，同时也获得了这些渲染参数的值。

步骤S300，根据CSS信息中的渲染参数渲染当前显示网页，具体地，包括：按顺序渲染当前显示网页可视化区域的页面和非可视化区域的页面，可视化区域为移动终端屏幕所在区域。本实施例中，分阶段对当前显示网页进行渲染，首先对当前显示网页可视化区域的页面进行渲染，而后，对当前显示网页非可视化区域的页面进行渲染，由此，可以使得当前向用户呈现的页面快速地渲染完成，从而减少了一次性同时渲染的网页内容，提高了可视化区域页面的模式切换速度。

根据用户浏览网页的习惯，通常浏览当前显示网页可视化区域的页面，而后浏览该页面之后的页面。因此，在优选的实施例中，可以首先渲染当前显示网页可视化区域的页面；然后，渲染可视化区域的页面之后(例如下方)的页面；最后，渲染可视化区域的页面之前(例如上方)的页面。由此，符合了用户的习惯，提高渲染效率。

在优选的实施例中，在执行步骤S300时，应依次根据网页HTML底层纹理(BaseLayer纹理)和网页HTML标签渲染当前显示网页。在对网页HTML底层纹理(BaseLayer纹理)进行切换渲染后，可以快速地切换网页页面的底层纹理，例如呈现出目标模式的背景；而后再对网页中的其它元素进行切换渲染。需要说明的是，在对网页HTML标签渲染时，应优先渲染速度快的标签，例如地址栏样式、导航视图样式、搜索框样式、菜单栏样式等；而后渲染较耗时的标签(如图像标签的颜色矩阵变换)。需要说明的是，在优选的实施例中，可以不必渲染视频标签。

在优选的实施例中，在执行步骤S300之后，还包括如下步骤：

步骤S400，获取浏览器缓存的除当前显示网页外的至少一组CSS信息。通常，浏览器中会缓存一些网页，本实施例中，可以获取若干组与这些网页分别对应的CSS信息。

步骤S500，根据获取的各组CSS信息中的渲染参数渲染与各组CSS信息映射的网页，其中，每组CSS信息分别映射一个网页。由此，在对当前显示网页渲染完成后，可以对缓存的网页进行渲染，从而当显示缓存的网页时，能更快速、更有效地切换为目标模式。

本实施例还公开了一种移动终端网页渲染装置，请参考图2，该移动终端网页渲染装置包括：监听单元100、第一CSS信息获取单元200和第一渲染单元300，其中：

监听单元100用于在当前显示网页模式下监听模式切换事件；第一CSS信息获取单元200用于根据所述模式切换事件获取当前显示网页所需的层叠样式表CSS信息，所述CSS信息携带有欲切换成的目标模式的渲染参数；第一渲染单元300用于根据所述CSS信息中的渲染参数渲染所述当前显示网页，包括：按顺序渲染所述当前显示网页可视化区域的页面和非可视化区域的页面，所述可视化区域为移动终端屏幕所在区域。

在优选的实施例中，第一渲染单元用于渲染所述当前显示网页可视化区域的页面；渲染所述可视化区域的页面之后的页面；渲染所述可视化区域的页面之前的页面。

在优选的实施例中，该移动终端网页渲染装置还包括：第二CSS信息获取单元，用于获取浏览器缓存的除当前显示网页外的至少一组CSS信息；第二渲染单元，用于根据获取的各组CSS信息中的渲染参数渲染与各组CSS信息映射的网页，其中，每组CSS信息分别映射一个网页。

本实施例还公开了一种移动终端，请参考图3，该移动终端包括：通信模块1、显示屏2和处理器3，其中：

通信模块1用于从服务器获取网页内容；显示屏2用于可视化呈现网页内容；处理器3用于执行程序实现上述实施例公开的移动终端网页渲染方法。

本发明实施例提供的移动终端网页渲染方法和装置，由于在根据CSS信息中的渲染参数渲染当前显示网页时，按顺序渲染当前显示网页可视化区域的页面和非可视化区域的页面，从而，减少了一次性同时渲染的网页内容，提高了可视化区域页面的模式切换速度。由于非可视化区域的页面在可视化区域的页面之后渲染，因此，能够提高可视化区域页面的渲染效率，降低了发生闪屏现象的概率。

在优选的实施例中，在渲染当前显示网页之后，获取浏览器缓存的至少一组CSS信息，渲染与各组CSS信息映射的网页。能够充分利用在显示当前网页的时间渲染缓存的网页，从而，在显示缓存页面时，能够进一步缩短缓存页面的渲染时间，提高了缓存也面的渲染效率。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，上述实施例仅仅是为清楚地说明所作的举例，而并非对实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。而由此所引伸出的显而易见的变化或变动仍处于本发明创造的保护范围之中。

Claims (9)

1.一种移动终端网页渲染方法，其特征在于，包括如下步骤：

在当前显示网页模式下监听模式切换事件；

根据所述模式切换事件获取当前显示网页所需的层叠样式表CSS信息，所述CSS信息携带有欲切换成的目标模式的渲染参数；

根据所述CSS信息中的渲染参数渲染所述当前显示网页，包括：

按顺序渲染所述当前显示网页可视化区域的页面和非可视化区域的页面，所述可视化区域为移动终端屏幕所在区域。

2.如权利要求1所述的移动终端网页渲染方法，其特征在于，所述按顺序渲染所述当前显示网页可视化区域的页面和非可视化区域的页面包括：

渲染所述当前显示网页可视化区域的页面；

渲染所述可视化区域的页面之后的页面；

渲染所述可视化区域的页面之前的页面。

3.如权利要求1或2所述的移动终端网页渲染方法，其特征在于，所述渲染参数包括：网页HTML底层纹理和网页HTML标签；

在所述根据所述CSS信息中的渲染参数渲染所述当前显示网页中，依次根据所述网页HTML底层纹理和所述网页HTML标签渲染所述当前显示网页。

4.如权利要求3所述的移动终端网页渲染方法，其特征在于，所述网页HTML标签包括：图像标签、不动元素标签和静态文本中的至少一种。

5.如权利要求1-4任意一项所述的移动终端网页渲染方法，其特征在于，在所述根据所述CSS信息中的渲染参数渲染所述当前显示网页之后，还包括：

获取浏览器缓存的除当前显示网页外的至少一组CSS信息；

根据获取的各组CSS信息中的渲染参数渲染与各组CSS信息映射的网页，其中，每组CSS信息分别映射一个网页。

6.一种移动终端网页渲染装置，其特征在于，包括：

监听单元，用于在当前显示网页模式下监听模式切换事件；

第一CSS信息获取单元，用于根据所述模式切换事件获取当前显示网页所需的层叠样式表CSS信息，所述CSS信息携带有欲切换成的目标模式的渲染参数；

第一渲染单元，用于根据所述CSS信息中的渲染参数渲染所述当前显示网页，包括：按顺序渲染所述当前显示网页可视化区域的页面和非可视化区域的页面，所述可视化区域为移动终端屏幕所在区域。

7.如权利要求6所述的移动终端网页渲染装置，其特征在于，所述第一渲染单元用于渲染所述当前显示网页可视化区域的页面；渲染所述可视化区域的页面之后的页面；渲染所述可视化区域的页面之前的页面。

8.如权利要求6或7所述的移动终端网页渲染装置，其特征在于，还包括：

第二CSS信息获取单元，用于获取浏览器缓存的除当前显示网页外的至少一组CSS信息；

第二渲染单元，用于根据获取的各组CSS信息中的渲染参数渲染与各组CSS信息映射的网页，其中，每组CSS信息分别映射一个网页。

9.一种移动终端，其特征在于，包括：

通信模块，用于从服务器获取网页内容；

显示屏，用于可视化呈现网页内容；

处理器，用于执行程序实现如权利要求1-5任意一项所述的方法。