CN107544970B - 用于浏览器的动态局部渲染的装置和方法 - Google Patents

Abstract

提供一种用于浏览器的动态局部渲染的装置和方法，所述装置包括：缓存模块，用于缓存浏览器请求的网页的网页数据；解析模块，用于对缓存的网页数据进行预解析，以确定网页数据中的第一渲染数据，通知缓存模块将第一渲染数据提供给浏览器的渲染引擎，并且指示浏览器的渲染引擎以第一渲染模式对第一渲染数据进行渲染，其中，第一渲染数据表示在浏览器中进行第一屏显示所需的网页数据中的部分数据。

Description

用于浏览器的动态局部渲染的装置和方法

技术领域

本发明涉及数据渲染领域，更具体地讲，涉及一种用于浏览器的动态局部渲染的装置和方法。

背景技术

随着互联网技术的不断完善，浏览器已经成为我们与整个世界交互的必要的窗口和工具，为我们提供了便捷、安全、快速的网上冲浪体验。网页的加载速度是使用浏览器最直观的体验感受，对浏览器的用户体验影响最大。同时，它对浏览器能耗有着至关重要的影响，从而影响整个电子设备的用户体验。

然而，网页加载速度除了受制于网速外，和浏览器页面的渲染加载机制有着紧密的关联。在现有的浏览器渲染页面和加载页面的机制中，浏览器下载网页数据和渲染的顺序均为从上到下，下载和渲染是同时进行的。例如，当浏览器获得一个HTML文件时，会自上而下加载，并在加载过程中进行解析渲染。渲染引擎开始解析网页数据(例如，HTML数据)，并将标签转化为内容树中的文档对象模型(DOM，Document Object Model)节点。随后，渲染引擎解析外部层叠样式表单(CSS)文件及Style标签中的样式信息，这些样式信息以及HTML数据中的可见性指令将被用来构建另一棵树：渲染(Render)树。Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步是绘制，即遍历Render树，并使用UI后端层绘制每个节点。值得注意的是，整个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早地将内容呈现到屏幕上，并不会等到所有的HTML数据都解析完成之后再去构建和布局Render树，而是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

现有的浏览器页面加载技术没有对页面加载过程进行控制，为了保证用户体验，浏览器在接收到网页数据资源后，会全力地进行网页内容的渲染和显示，使得页面内容尽快显示在屏幕上。这样虽然保证了用户体验，但在全力进行网页渲染过程中，电子设备的硬件(诸如CPU、GPU、RAM)都处于高负载状态，造成极大的额外能耗，在长时间使用浏览器后，对终端设备的待机时间带来极大的挑战。

发明内容

本发明的示例性实施例的目的在于提供一种用于浏览器的动态局部渲染的装置和方法，以实现在保证浏览器性能的前提下节能的目的。

根据本发明示例性实施例的一个方面，提供一种用于浏览器的动态局部渲染的方法，所述方法包括：缓存浏览器请求的网页的网页数据；对缓存的网页数据进行预解析，以确定网页数据中的第一渲染数据；将第一渲染数据提供给浏览器的渲染引擎，以第一渲染模式对第一渲染数据进行渲染，其中，第一渲染数据表示在浏览器中进行第一屏显示所需的网页数据中的部分数据。

可选地，所述方法还包括：响应于浏览器的渲染引擎完成以第一渲染模式对第一渲染数据的渲染，将缓存的网页数据中除了第一渲染数据之外的剩余数据提供给浏览器的渲染引擎，以第二渲染模式对所述剩余数据进行渲染，其中，第二渲染模式消耗的硬件资源小于第一渲染模式消耗的硬件资源。

可选地，所述方法还包括：识别针对在浏览器中显示的页面的操作请求；如果操作请求指示页面向上滑动，则确定所述剩余数据是否渲染完成，其中，当所述剩余数据中存在尚未被渲染的数据时，指示浏览器的渲染引擎以第一渲染模式对所述剩余数据中尚未被渲染的数据进行渲染。

可选地，如果操作请求指示页面被关闭，则指示浏览器的渲染引擎停止渲染，并且清除缓存的网页数据。

可选地，所述预解析对缓存的网页数据进行网页长度和标签节点的分析，以便确定网页数据的适当的分割点，并且根据分割点获得第一渲染数据。

根据本发明示例性实施例的另一方面，提供一种用于浏览器的动态局部渲染的装置，所述装置包括：缓存模块，用于缓存浏览器请求的网页的网页数据；解析模块，用于对缓存的网页数据进行预解析以确定网页数据中的第一渲染数据，通知缓存模块将第一渲染数据提供给浏览器的渲染引擎，并且指示浏览器的渲染引擎以第一渲染模式对第一渲染数据进行渲染，其中，第一渲染数据表示在浏览器中进行第一屏显示所需的网页数据中的部分数据。

可选地，响应于浏览器的渲染引擎完成以第一渲染模式对第一渲染数据的渲染，解析模块可通知缓存模块将缓存的网页数据中除了第一渲染数据之外的剩余数据提供给浏览器的渲染引擎，并且指示浏览器的渲染引擎以第二渲染模式对所述剩余数据进行渲染，第二渲染模式消耗的硬件资源可小于第一渲染模式消耗的硬件资源。

可选地，所述装置还包括：识别模块，用于识别针对在浏览器中显示的页面的操作请求，其中，如果操作请求指示页面向上滑动，则识别模块可从解析模块获取所述剩余数据是否渲染完成，其中，当所述剩余数据中存在尚未被渲染的数据时，识别模块可向解析模块发送反馈信号，并且解析模块基于反馈信号指示浏览器的渲染引擎以第一渲染模式对所述剩余数据中尚未被渲染的数据进行渲染；其中，解析模块还监测所述剩余数据的渲染是否完成。

可选地，所述装置还包括：识别模块，用于识别针对在浏览器中显示的页面的操作请求，其中，如果操作请求指示页面向上滑动，则识别模块可向解析模块发送反馈信号，其中，当接收到反馈信号时，解析模块确定所述剩余数据中是否存在尚未被渲染的数据，当所述剩余数据中存在尚未被渲染的数据时，解析模块可指示浏览器的渲染引擎以第一渲染模式对所述剩余数据中尚未被渲染的数据进行渲染。

可选地，如果操作请求指示页面被关闭，则识别模块可通知解析模块指示浏览器的渲染引擎停止渲染，并且识别模块可指示缓存模块清除缓存的网页数据。

可选地，所述预解析可对缓存的网页数据进行网页长度和标签节点的分析，以便确定网页数据的适当的分割点，并且根据分割点获得第一渲染数据。

附图说明

通过下面结合附图对示例实施例进行的详细描述，本发明的示例实施例的上述和其它目的、特征和优点将会变得更加清楚，其中：

图1示出根据本发明的示例实施例的用于浏览器的动态局部渲染的装置的方框图；

图2示出根据本发明示例性实施例的用于浏览器的动态局部渲染的方法的流程图；

图3A和图3B是示出使用根据本发明示例性实施例的用于浏览器的动态局部渲染的方法的示例的示意图。

贯穿附图和具体实施方式，除非另外描述或提供，否则相同的附图参考标号将被理解为表示相同的元件、特征和结构。附图可不按比例绘制，并且为了清楚、说明和方便，附图中的元件的相对大小、比例和描绘可被夸大。

具体实施方式

提供以下详细描述以帮助读者获得对这里描述的方法、设备和/或系统的全面的理解。然而，这里描述的系统、设备和/或方法的各种改变、修改和等同物对于本领域普通技术人员将会是清楚的。所描述的处理步骤和/或操作的进展是示例；然而，除了必须以特定顺序发生的步骤和/或操作以外，步骤和/或操作的顺序不限于这里阐明的顺序，而是可以如本领域公知的那样改变。此外，为了更加清楚和简明，可省略本领域普通技术人员公知的功能和构造的描述。

这里描述的特征可以以不同形式来实施，不应被解释为限于这里描述的示例。相反地，提供这里描述的示例以使本公开将是彻底的和完全的，并且将向本领域普通技术人员传达本公开的完整范围。

这里使用的术语只为描述示例性实施例的目的，不意图限制本发明构思。如在这里使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式。将会理解的是，当在这里使用诸如“包括”、“具有”的术语时，说明存在陈述的特征、整体、步骤、操作、元件、组件、或它们的组合，但是不排除存在或添加一个或更多个其它特征、整体、步骤、操作、元件、组件、或它们的组合。

图1示出根据本发明的示例实施例的用于浏览器的动态局部渲染的装置100的方框图。作为示例，这里的浏览器是电子设备上的浏览器，所述电子设备可以是移动终端，但不限于此。移动终端可以是智能电话、笔记本电脑、平板电脑、手持游戏机、企业数字助理(EDA)、个人数字助理(PDA)、数字多媒体播放器等。

参照图1，根据示例实施例的用于浏览器的动态局部渲染的装置100可包括缓存模块10、解析模块20和识别模块30。

当浏览器请求打开一个网页时，缓存模块10可将从web服务器上获取的关于该网页的全部网页数据(例如，HTML数据)进行缓存。缓存模块10可在解析模块20的控制下将网页数据发送至浏览器的渲染引擎。

在这里，缓存模块10可被实现为随机存取存储器(RAM)和闪存(FLASH)等，但不限于此。此外，缓存模块10还可以是外部存储器，诸如致密闪存(CF)装置、安全数字(SD)卡、微型安全数字(Micro-SD)卡、迷你安全数字(Mini-SD)卡、极端数字(xD)卡或记忆棒等。

解析模块20可对获取的网页数据进行预解析，以确定需要在浏览器的第一屏中显示的数据长度。例如，预解析可表示对缓存的网页数据进行网页长度和标签节点的分析，以便确定网页数据的适当的分割点，并且根据分割点获得将在浏览器的第一屏中显示的网页数据。根据确定的将在浏览器的第一屏中显示的数据长度，解析模块20可首先控制缓存模块10将这部分数据(以下称为第一渲染数据)发送至浏览器的渲染引擎，并指示渲染引擎以第一渲染模式(即，浏览器的默认渲染模式)对第一渲染数据进行渲染和显示。在确定第一渲染数据时，解析模块20可根据对网页数据进行的网页长度和标签节点的分析，基于在浏览器中进行第一屏显示所需的数据长度，对网页数据进行分割，以获得第一渲染数据。

在本公开中，表述“第一屏”是指浏览器打开网页时的有效显示区域。例如，所述有效显示区域可以是移动终端的整个显示屏幕，也可以是移动终端的显示屏幕中的一部分。

同时，响应于浏览器的渲染引擎对第一渲染数据的渲染的完成，解析模块20可通知缓存模块10将缓存的网页数据中除了第一渲染数据之外的剩余数据发送至浏览器的渲染引擎，并指示渲染引擎以第二渲染模式(即，消耗更小硬件资源的模式，以下也可称作“节能模式”)对剩余数据进行渲染。在这里，当在节能模式下渲染网页时，移动终端的硬件(例如，中央处理器(CPU)、图形处理器(GPU)和随机存取存储器(RAM)等)可以以更低频率运行。与默认模式相比，节能模式可显著地减少移动终端的能耗。

此外，解析模块20还可实时监测缓存的网页数据中除了第一渲染数据之外的剩余数据的渲染是否完成。

识别模块30可识别针对在浏览器中显示的页面的操作请求。当操作请求指示当前正在显示的页面将向上滑动时，识别模块30从解析模块20获取剩余数据的渲染是否完成。如果这时剩余数据的渲染已经完成，则识别模块30可不向解析模块20发送反馈信号；如果这时剩余数据中仍存在尚未被渲染的数据，则识别模块30向解析模块20发送反馈信号，当接收到识别模块30发送的反馈信号时，解析模块20指示浏览器的渲染引擎立即将节能模式切换为默认模式，以便对尚未被渲染的数据进行渲染。另一方面，当操作请求指示当前正在显示的页面将被关闭时，识别模块30可通知解析模块20指示浏览器的渲染引擎停止渲染，并且识别模块30可指示缓存模块10清除其内部已缓存的网页数据。可选择地，如果识别模块30识别到当前正在显示的页面未被请求关闭，则识别模块30同样可不向解析模块20发送反馈信号。

根据本发明的另一示例性实施例，识别模块30可仅识别针对在浏览器中显示的页面的操作请求。只要识别模块30识别到针对当前正在显示的页面向上滑动的请求，识别模块30就可向解析模块20发送反馈信号。在这种情况下，解析模块20可响应于接收到反馈信号，根据剩余数据的渲染是否完成来确定剩余数据中是否仍存在尚未被渲染的数据，如果确定剩余数据中仍存在尚未被渲染的数据，则解析模块20指示浏览器的渲染引擎以第一渲染模式(默认模式)对尚未被渲染的数据进行渲染。另一方面，当操作请求指示当前正在显示的页面将被关闭时，识别模块30可通知解析模块20指示浏览器的渲染引擎停止渲染，并且识别模块30可指示缓存模块10清除其内部已缓存的网页数据。

图2示出根据本发明示例性实施例的用于浏览器的动态局部渲染的方法的流程图。

参照图2，在步骤S201，缓存浏览器请求的网页的网页数据。在这里，缓存请求的网页的全部网页数据。随后，在步骤S202，对缓存的网页数据进行预解析，以确定网页数据中的第一渲染数据。在这里，预解析是指对缓存的网页数据进行网页长度和标签节点的分析，以便确定网页数据的适当的分割点，并且根据分割点获得第一渲染数据。其中，第一渲染数据表示在浏览器中进行第一屏显示所需的网页数据中的部分数据。通过预解析能够判断将在浏览器的第一屏中显示的数据的长度。随后，在步骤S203，第一渲染数据被提供给浏览器的渲染引擎，渲染引擎以第一渲染模式对第一渲染数据进行渲染。渲染后的数据可被显示在浏览器中以供查看。

在步骤S204，在浏览器的渲染引擎完成第一渲染数据的渲染之后，缓存的网页数据中除了第一渲染数据之外的剩余数据被提供给渲染引擎，渲染引擎以第二渲染模式(即，节能模式)对剩余数据进行渲染。在这里，第二渲染模式是移动终端的硬件运行在更低频率上的模式，使用这种模式渲染暂时不需在浏览器中显示的网页数据可达到减少能耗的目的。同时，在步骤S204，还可实时监测剩余数据的渲染是否完成。在这里，还可通过监测来进一步确定剩余数据中尚未被渲染的数据的部分。

在步骤S205，对针对浏览器中显示的页面的操作请求进行识别，判断是否请求页面向上滑动。如果识别到请求页面向上滑动，则在步骤S206，判断对剩余数据的渲染是否完成。当确定剩余数据已经全部被渲染时，不必指示浏览器的渲染引擎。否则，在步骤S207，指示浏览器的渲染引擎从第二渲染模式切换到第一渲染模式，以便对剩余数据中尚未被渲染的数据进行渲染，从而保证浏览体验。此外，如果在步骤S205未识别到页面向上滑动的请求，则在步骤S208判断是否请求关闭页面。当确认请求关闭页面时，在步骤S209，停止浏览器的渲染引擎的渲染操作，并且清除缓存的网页数据。当未请求关闭页面时，不进行任何操作，并且方法可返回到步骤S205。

下面以图3A和图3B为例来详细描述使用浏览器的动态局部渲染的方法的示例。

图3A和图3B示出使用根据本发明示例性实施例的用于浏览器的动态局部渲染的方法的示例的示意图。

在图3A所示的示例中，将以智能电话作为示例来描述根据本发明示例性实施例的浏览器的动态局部渲染方法，但本领域普通技术人员应该理解，所述方法并不限于智能电话。

在浏览器的一般浏览模式下，当在浏览器中输入网址并打开网页时，浏览器从web服务器对该网页内容元素进行下载、缓存、渲染和显示，并在显示页面内容的同时继续进行渲染，直至网页被全部渲染。然而，使用本发明的方法时，如图3A所示，当在浏览器中输入网址并打开网页时，浏览器从web服务器下载该网页的全部网页数据并进行缓存。此时，缓存的网页数据被预解析(即，进行网页长度和标签节点的分析)以基于浏览器屏幕(例如，当浏览器全屏显示时，终端屏幕即为浏览器屏幕)确定将被初次渲染的数据(即，第一渲染数据)。通过对缓存的网页数据执行预解析可确定将在终端屏幕初次显示的数据长度，这些数据被发送至浏览器的浏览引擎并在第一渲染模式(默认模式)下被渲染，完成渲染后被加载到终端屏幕上。

当浏览器的渲染引擎完成上述数据的渲染之后，缓存的网页数据中除了上述数据之外的剩余数据被提供给渲染引擎。这时，浏览器调度终端硬件以在消耗更小硬件资源的第二渲染模式(即，节能模式)下对这部分剩余数据进行渲染，并监测这部分剩余数据的渲染是否完成。

此外，还实时监测针对在浏览器中显示的页面的操作请求。例如，如图3B所示，当监测到关于页面向上滑动(即，后续的页面内容将被浏览)的请求时，基于监测的剩余数据的渲染是否完成来确定是否向浏览器的渲染引擎作出指示。例如，如果剩余数据已经全部被渲染，则不指示渲染引擎，正常加载页面内容；相反地，如果剩余数据存在未被渲染的部分，则指示浏览器的渲染引擎从第二渲染模式切换到第一渲染模式，完成未被渲染的部分的渲染，以保证浏览体验。

作为示例，如果监测到请求页面被关闭(即，请求结束网页浏览)而不是向上滑，则停止浏览器的渲染引擎的渲染操作，并且清除在浏览器中缓存的网页数据。

采用本发明示例性实施例的用于浏览器的动态局部渲染的方法，通过页面操作的实时监测和渲染模式的动态切换，在不影响浏览体验的前提下，能够有效地降低浏览器的能耗，提高供电单元的利用率。因此，在不是大幅度的快速浏览网页时，或者在浏览页面上部时就直接跳转至新页面的情况下，降低能耗效果尤其显著。

此外，根据示例性实施例的用于浏览器的动态局部渲染的方法还可被实施为计算机可读记录介质上的计算机可读代码。本领域技术人员可以根据对上述方法的描述来实现所述计算机可读代码。当所述计算机可读代码在计算机中被执行时实现本发明的上述方法。计算机可读记录介质可以是能存储此后可被计算机系统读取的数据的任何数据存储装置。计算机可读记录介质的示例可包括ROM、RAM、CD-ROM、磁带、软盘和光学数据存储器。计算机可读记录介质还可分布于连接网络的计算机系统上，以使计算机可读代码可以以分布方式被存储和执行。此外，用于实现本发明构思的功能程序、代码和代码段可以由本发明构思所属领域的编程技术人员容易地解释。

方法和/或步骤可由执行计算机程序以通过操作输入数据并产生输出来执行功能的一个或更多个可编程处理器执行。方法和/或步骤也可由专用逻辑电路(例如，FPGA(现场可编程门阵列)或ASIC(应用专用集成电路))执行，并且设备可由专用逻辑电路实现。

尽管已经参照示例性实施例具体显示和描述了本发明，但是本领域技术人员应该理解，在不脱离权利要求所限定的本发明的精神和范围的情况下，可以对示例性实施例进行形式和细节上的各种改变。

Claims (9)

1.一种用于浏览器的动态局部渲染的方法，所述方法包括：

缓存浏览器请求的网页的网页数据；

对缓存的网页数据进行预解析，以确定网页数据中的第一渲染数据；

将第一渲染数据提供给浏览器的渲染引擎，以第一渲染模式对第一渲染数据进行渲染，

其中，第一渲染数据表示在浏览器中进行第一屏显示所需的网页数据中的部分数据，

其中，所述方法还包括：

响应于浏览器的渲染引擎完成以第一渲染模式对第一渲染数据的渲染，将缓存的网页数据中除了第一渲染数据之外的剩余数据提供给浏览器的渲染引擎，以第二渲染模式对所述剩余数据进行渲染，

其中，在第二渲染模式下，渲染引擎通过更低频率运行以使得第二渲染模式消耗的硬件资源小于第一渲染模式消耗的硬件资源。

2.如权利要求1所述的方法，还包括：

识别针对在浏览器中显示的页面的操作请求；

如果操作请求指示页面向上滑动，则确定所述剩余数据是否渲染完成，其中，

当所述剩余数据中存在尚未被渲染的数据时，指示浏览器的渲染引擎以第一渲染模式对所述剩余数据中尚未被渲染的数据进行渲染。

3.如权利要求2所述的方法，其中，如果操作请求指示页面被关闭，则指示浏览器的渲染引擎停止渲染，并且清除缓存的网页数据。

4.如权利要求1所述的方法，其中，所述预解析对缓存的网页数据进行网页长度和标签节点的分析，以便确定网页数据的适当的分割点，并且根据分割点获得第一渲染数据。

5.一种用于浏览器的动态局部渲染的装置，所述装置包括：

缓存模块，用于缓存浏览器请求的网页的网页数据；

解析模块，用于对缓存的网页数据进行预解析以确定网页数据中的第一渲染数据，通知缓存模块将第一渲染数据提供给浏览器的渲染引擎，并且指示浏览器的渲染引擎以第一渲染模式对第一渲染数据进行渲染，

其中，第一渲染数据表示在浏览器中进行第一屏显示所需的网页数据中的部分数据，

其中，响应于浏览器的渲染引擎完成以第一渲染模式对第一渲染数据的渲染，解析模块通知缓存模块将缓存的网页数据中除了第一渲染数据之外的剩余数据提供给浏览器的渲染引擎，并且指示浏览器的渲染引擎以第二渲染模式对所述剩余数据进行渲染，其中，在第二渲染模式下，渲染引擎通过更低频率运行以使得第二渲染模式消耗的硬件资源小于第一渲染模式消耗的硬件资源。

6.如权利要求5所述的装置，还包括：

识别模块，用于识别针对在浏览器中显示的页面的操作请求，

其中，如果操作请求指示页面向上滑动，则识别模块从解析模块获取所述剩余数据是否渲染完成，

其中，当所述剩余数据中存在尚未被渲染的数据时，识别模块向解析模块发送反馈信号，并且解析模块基于反馈信号指示浏览器的渲染引擎以第一渲染模式对所述剩余数据中尚未被渲染的数据进行渲染；

其中，解析模块还监测所述剩余数据的渲染是否完成。

7.如权利要求5所述的装置，还包括：

识别模块，用于识别针对在浏览器中显示的页面的操作请求，

其中，如果操作请求指示页面向上滑动，则识别模块向解析模块发送反馈信号，

其中，当接收到反馈信号时，解析模块确定所述剩余数据中是否存在尚未被渲染的数据，当所述剩余数据中存在尚未被渲染的数据时，解析模块指示浏览器的渲染引擎以第一渲染模式对所述剩余数据中尚未被渲染的数据进行渲染。

8.如权利要求6或7所述的装置，其中，如果操作请求指示页面被关闭，则识别模块通知解析模块指示浏览器的渲染引擎停止渲染，并且识别模块指示缓存模块清除缓存的网页数据。

9.如权利要求5所述的装置，其中，所述预解析对缓存的网页数据进行网页长度和标签节点的分析，以便确定网页数据的适当的分割点，并且根据分割点获得第一渲染数据。

Images