CN114356479B

CN114356479B - 一种页面渲染方法及装置

Info

Publication number: CN114356479B
Application number: CN202111619803.1A
Authority: CN
Inventors: 郭滔
Original assignee: Zhuhai Baoqu Technology Co Ltd
Current assignee: Zhuhai Baoqu Technology Co Ltd
Priority date: 2021-12-27
Filing date: 2021-12-27
Publication date: 2024-03-08
Anticipated expiration: 2041-12-27
Also published as: CN114356479A

Abstract

本发明公开一种页面渲染方法及装置，涉及计算机应用领域。该方法包括：获取当前应用页面的第一面积以及屏幕可视区域的第二面积；若第一面积大于第二面积，则确定当前应用页面与屏幕可视区域的第一交集区域；对第一交集区域进行等分处理，得到第一数量个子区域；根据预设顺序，分别对每个子区域进行渲染处理，得到每个子区域的渲染结果；当全部子区域完成渲染处理后，将每个子区域的渲染结果显示在屏幕可视区域内。本发明实现了灵活、流畅的渲染大尺寸页面，提高了用户体验。

Description

一种页面渲染方法及装置

技术领域

本发明涉及计算机应用领域，尤其涉及一种页面渲染方法及装置。

背景技术

目前，在文档阅读软件、看图软件中，时常会出现一些大尺寸的页面或图片。在对大尺寸的页面或图片进行显示时，需先对页面或图片进行渲染，然后，根据屏幕的可视区域显示渲染后的页面或图片。

由于这些页面或者图片的尺寸较大，可能远远超过屏幕的可视区域，若直接将整个页面或者图片进行完整渲染后显示，将导致程序内存溢出而崩溃。即使程序未崩溃，用户在执行页面滚动操作时，其过程也会变得非常卡顿。原因在于，程序在对一个超大页面进行渲染过程中，将会持续占用CPU资源，导致当前页面无法及时响应用户的其他操作事件(例如，页面滚动操作)，降低用户体验。

发明内容

有鉴于此，本发明实施例提供一种页面渲染方法及装置，以解决现有程序在对大尺寸页面进行渲染过程中，持续占用CPU资源，导致当前页面卡顿，降低用户体验的问题。

第一方面，本发明实施例提供一种页面渲染方法，所述方法包括：

获取当前应用页面的第一面积以及屏幕可视区域的第二面积；

若所述第一面积大于所述第二面积，则确定所述当前应用页面与所述屏幕可视区域的第一交集区域；

对所述第一交集区域进行等分处理，得到第一数量个子区域；

根据预设顺序，分别对每个子区域进行渲染处理，得到每个子区域的渲染结果；

当全部子区域完成渲染处理后，将每个子区域的渲染结果显示在所述屏幕可视区域内。

可选地，所述获取当前应用页面的第一面积以及屏幕可视区域的第二面积之前，所述方法还包括：

接收用户输入的第一操作指令，所述第一操作指令包括点击打开指令；

根据所述点击打开指令，打开并显示所述当前应用页面。

可选地，所述方法还包括：

当第一子区域已完成渲染处理且第二子区域未进行渲染处理时，调用事件处理函数；

利用所述调用事件处理函数，响应用户输入的第二操作指令，所述第二操作指令包括滚动页面操作指令或者点击页面操作指令。

可选地，所述利用所述调用事件处理函数，响应用户输入的第二操作指令，具体包括：

通过所述事件处理函数，接收用户输入的滚动页面操作指令；

根据所述滚动页面操作指令，再次获取当前应用页面的第三面积以及屏幕可视区域的第四面积；

若所述第三面积大于所述第四面积，则确定所述当前应用页面与所述屏幕可视区域的第二交集区域；

对所述第二交集区域进行等分处理，得到第二数量个子区域；

可选地，所述得到第一数量个子区域之后，或者，所述得到第二数量个子区域之后，所述方法还包括：

为每个子区域创建对应的位图，所述位图用于缓存所述子区域的渲染结果。

第二方面，本发明实施例提供一种页面渲染装置，所述装置包括：

获取单元，用于获取当前应用页面的第一面积以及屏幕可视区域的第二面积；

确定单元，用于若所述第一面积大于所述第二面积，则确定所述当前应用页面与所述屏幕可视区域的第一交集区域；

处理单元，用于对所述第一交集区域进行等分处理，得到第一数量个子区域；

渲染单元，用于根据预设顺序，分别对每个子区域进行渲染处理，得到每个子区域的渲染结果；

发送单元，用于当全部子区域完成渲染处理后，将每个子区域的渲染结果显示在所述屏幕可视区域内。

可选地，所述装置还包括：

接收单元，用于接收用户输入的第一操作指令，所述第一操作指令包括点击打开指令；

执行单元，用于根据所述点击打开指令，打开并显示所述当前应用页面。

可选地，所述装置还包括：

调用单元，用于当第一子区域已完成渲染处理且第二子区域未进行渲染处理时，调用事件处理函数；

响应单元，用于利用所述调用事件处理函数，响应用户输入的第二操作指令，所述第二操作指令包括滚动页面操作指令或者点击页面操作指令。

可选地，所述响应单元具体用于，通过所述事件处理函数，接收用户输入的滚动页面操作指令；

当全部子区域完成渲染处理后，向显示模块发送通知消息，以使得所述显示模块将每个子区域的渲染结果显示在所述屏幕可视区域内。

可选地，所述装置还包括：

创建单元，用于为每个子区域创建对应的位图，所述位图用于缓存所述子区域的渲染结果。

第三方面，本发明实施例提供一种电子设备，所述电子设备包括：壳体、处理器、存储器、电路板和电源电路，其中，电路板安置在壳体围成的空间内部，处理器和存储器设置在电路板上；电源电路，用于为上述电子设备的各个电路或器件供电；存储器用于存储可执行程序代码；处理器通过读取存储器中存储的可执行程序代码来运行与可执行程序代码对应的程序，用于执行前述第一方面方法所述的标签窗口的处理方法。

第四方面，本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现前述第一方面所述的标签窗口的处理方法。

本发明实施例提供的一种页面渲染方法及装置，电子设备获取当前应用页面的第一面积以及屏幕可视区域的第二面积；若第一面积大于第二面积，则电子设备确定当前应用页面与屏幕可视区域的第一交集区域；电子设备对第一交集区域进行等分处理，得到第一数量个子区域；根据预设顺序，电子设备分别对每个子区域进行渲染处理，得到每个子区域的渲染结果；当全部子区域完成渲染处理后，电子设备将每个子区域的渲染结果显示在屏幕可视区域内。

前述方案能够解决现有程序在对大尺寸页面进行渲染过程中，持续占用CPU资源，导致当前页面卡顿，降低用户体验的问题。实现了灵活、流畅的渲染大尺寸页面，提高了用户体验。

附图说明

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

图1为本发明实施例提供的页面渲染方法流程图；

图2为本发明实施例提供的交集区域示意图；

图3为本发明实施例提供的子区域示意图；

图4为本发明实施例提供的页面渲染装置结构示意图；

图5为本发明实施例提供的一种电子设备结构示意图。

具体实施方式

下面结合附图对本发明实施例进行详细描述。

应当明确，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

下面结合附图1，详细说明本发明实施例提供的方案进行说明，图1为本发明实施例提供的页面渲染方法流程图，在本发明实施例中实施主体为电子设备。该电子设备可为终端设备，例如，个人电脑、台式电脑等。该电子设备也可为服务器。如图1所示，本实施例的方法具体包括以下步骤：如图1所示，本实施例的方法具体包括以下步骤：

步骤110、获取当前应用页面的第一面积以及屏幕可视区域的第二面积。

本步骤中，电子设备内已打开一应用页面。电子设备计算应用页面的第一面积以及自身屏幕可视区域的第二面积。

在本发明实施例中，当前应用页面的第一面积可具体为呈现应用页面的窗口的面积(PageRect)，屏幕可视区域的第二面积可为电子设备包括的显示屏的面积(ScreenRect)。

可选地，在本步骤之前，用户想在电子设备内打开并显示一文档，例如，第一文档，第一文档可具体为PDF格式或者Word格式。用户向电子设备输入第一操作指令，该第一操作指令可具体为点击打开指令。可以理解的是，显示屏上显示第一文档的图标，该点击打开指令可为用户双击第一文档图标的操作。

根据点击打开指令，电子设备打开并显示第一文档，该第一文档也即是当前应用页面。

步骤120、若所述第一面积大于所述第二面积，则确定所述当前应用页面与所述屏幕可视区域的第一交集区域。

本步骤中，电子设备获取当前应用页面的第一面积以及自身屏幕可视区域的第二面积后，比较第一面积与第二面积的大小。

若第一面积大于第二面积，此时，说明屏幕可视区域无法完全显示当前应用页面，该当前应用页面为较大尺寸页面。电子设备确定当前应用页面与屏幕可视区域的第一交集区域(CrossRect)。

如图2所示，图2为本发明实施例提供的交集区域示意图。在图2中，横向矩形为ScreenRect，纵向矩形为PageRect，中间带有斜线标记的矩形为第一交集区域。

可以理解的是，若第一面积不大于第二面，此时，说明屏幕可视区域能够完成显示当前应用页面。电子设备可直接在显示屏上显示当前应用页面。

步骤130、对所述第一交集区域进行等分处理，得到第一数量个子区域。

本步骤中，电子设备确定出第一交集区域后，对第一交集区域进行等分处理，得到第一数量个子区域。

在本发明实施例中，电子设备对第一交集区域进行等分处理具体是将第一交集区域划分为n个等面积的子区域(Tile1、Tile2、Tile3……Tile(n-1)、Tile(n))，比如，将第一交集区域划分为100个子区域，或者，200个子区域等等。其中，n的数量可由第一交集区域的面积预先设定。

例如，第一交集区域为8000像素点*500像素点所围成的面积，则设定子区域为200像素点*200像素点所围成的面积。在划分过程中，电子设备将第一交集区域的面积与子区域的面积的商作为第一数量，即n的值，在本示例中，n的值为100，即电子设备将第一交集区域划分为100个子区域。如图3所示，图3为本发明实施例提供的子区域示意图。在图3中，第一交集区域被划分为n个等面积的子区域。

可选地，在本发明实施例中，电子设备得到第一数量个子区域后，为每个子区域创建对应的位图(Bitmap)，该位图用于缓存子区域的渲染结果，避免内存抖动，造成内存碎片而降低软件性能。

步骤140、根据预设顺序，分别对每个子区域进行渲染处理，得到每个子区域的渲染结果。

本步骤中，电子设备得到第一数量个子区域后，按照从左往右，从上往下的顺序，依次对每个子区域进行渲染处理，得到每个子区域的渲染结果。电子设备将每个子区域的渲染结果存储至对应的位图内。

在本发明实施例中，电子设备对子区域进行渲染处理具体是对子区域内的数据进行解析处理，将解析后的数据转换为用于显示且方便用户理解的内容。例如，若子区域内包括文字数据，该文字数据可具体为文字路径、文字大小、文字类型等等。电子设备对文字路径、文字大小、文字类型进行解析处理，将文字数据转换为可显示且方便用户理解的文字。

需要说明的是，执行前述步骤110-步骤140的执行主体可具体为电子设备中的CPU。

步骤150、当全部子区域完成渲染处理后，将每个子区域的渲染结果显示在所述屏幕可视区域内。

本步骤中，电子设备依次对每个子区域进行渲染处理，当全部子区域完成渲染处理后，电子设备将每个子区域的渲染结果显示在屏幕可视区域内。

在本发明实施例中，CPU对全部子区域完成渲染处理后，CPU生成并向显示模块发送通知消息，显示模块从每个子区域对应的位图内获取每个子区域的渲染结果，并将每个子区域的渲染结果显示在屏幕可视区域内。

前述方案将大尺寸页面划分为多个子区域，在渲染过程中，分别对每个子区域进行渲染，而不是对整个大尺寸页面进行渲染，如此，可不必持续占用CPU资源，当前应用页面也不会出现卡顿，实现了灵活、流畅的渲染大尺寸页面，提高了用户体验。

可选地，在本发明实施例中，电子设备在执行完步骤150后，若此时接收到用户输入的第三操作指令(例如，该第三操作指令可具体为滚动页面操作指令)，电子设备将再次重复执行前述步骤110-步骤150，以对滚动页面操作后的当前应用页面再次进行渲染后显示。可选地，在本发明实施例中，电子设备在对子区域进行渲染处理过程中，还将对用户输入的第二操作指令进行及时响应。

例如，电子设备对第一子区域(例如，Tile1)已完成渲染处理，但还未对第二子区域(例如，Tile2)进行渲染处理时，在这个渲染间隙，电子设备调用事件处理(ProcessEvent)函数。利用事件处理函数，电子设备响应用户在渲染期间输入的第二操作指令，该第二操作指令包括滚动页面操作指令或者点击页面操作指令等等。

前述第一子区域可泛指任一子区域且该任一子区域已完成渲染处理，例如，第一子区域可以为Tile(n-1)，那么第二子区域即为Tile(n)。可以理解的是，第一子区域为Tile(n-1)时，Tile(n-1)之前的全部子区域Tile1-Tile(n-2)均已完成渲染处理。

下面以滚动页面操作指令为例，说明电子设备响应用户在渲染期间输入的第二操作指令的过程。

该过程为：通过事件处理函数，电子设备接收用户输入的滚动页面操作指令，该滚动页面操作指令为用户上下滑动当前应用页面的操作。根据滚动页面操作指令，电子设备重复执行前述步骤110-步骤150，在此仅简单描述。

电子设备再次获取当前应用页面的第三面积以及屏幕可视区域的第四面积，电子设备具体获取第三面积、第四面积的过程可参考前述获取第一面积、第二面积的过程。电子设备比较第三面积与第四面积的大小。若第三面积大于第四面积，则电子设备确定当前应用页面与屏幕可视区域的第二交集区域。电子设备将第二交集区域划分为m个(即第二数量个)等面积的子区域。按照从左往右，从上往下的顺序，依次对每个子区域进行渲染处理，得到每个子区域的渲染结果。电子设备将每个子区域的渲染结果存储至对应的位图内。当全部子区域完成渲染处理后，电子设备将每个子区域的渲染结果显示在屏幕可视区域内。

需要说明的是，若在渲染期间，电子设备接收到滚动页面操作指令，则电子设备将当前已渲染过的子区域对应的渲染结果丢弃，同时，未进行渲染处理过的子区域则不再进行渲染处理。电子设备转而响应滚动页面操作指令。

在本发明实施例中，电子设备实现了在渲染期间内也可及时响应用户输入的操作指令，提高用户体验。

本发明实施例提供的一种页面渲染方法，电子设备获取当前应用页面的第一面积以及屏幕可视区域的第二面积；若第一面积大于第二面积，则电子设备确定当前应用页面与屏幕可视区域的第一交集区域；电子设备对第一交集区域进行等分处理，得到第一数量个子区域；根据预设顺序，电子设备分别对每个子区域进行渲染处理，得到每个子区域的渲染结果；当全部子区域完成渲染处理后，电子设备将每个子区域的渲染结果显示在屏幕可视区域内。

图4为本发明实施例提供的一种页面渲染装置结构示意图，如图4所示，本实施例的页面渲染装置可以包括：获取单元410、确定单元420、处理单元430、渲染单元440以及发送单元450。

其中，所述获取单元410，用于获取当前应用页面的第一面积以及屏幕可视区域的第二面积；

确定单元420，用于若所述第一面积大于所述第二面积，则确定所述当前应用页面与所述屏幕可视区域的第一交集区域；

处理单元430，用于对所述第一交集区域进行等分处理，得到第一数量个子区域；

渲染单元440，用于根据预设顺序，分别对每个子区域进行渲染处理，得到每个子区域的渲染结果；

发送单元450，用于当全部子区域完成渲染处理后，向显示模块发送通知消息，以使得所述显示模块将每个子区域的渲染结果显示在所述屏幕可视区域内。

可选地，所述装置还包括：

接收单元(图中未示出)，用于接收用户输入的第一操作指令，所述第一操作指令包括点击打开指令；

执行单元(图中未示出)，用于根据所述点击打开指令，打开并显示所述当前应用页面。

可选地，所述装置还包括：

调用单元(图中未示出)，用于当第一子区域已完成渲染处理且第二子区域未进行渲染处理时，调用事件处理函数；

响应单元(图中未示出)，用于利用所述调用事件处理函数，响应用户输入的第二操作指令，所述第二操作指令包括滚动页面操作指令或者点击页面操作指令。

可选地，所述响应单元(图中未示出)具体用于，通过所述事件处理函数，接收用户输入的滚动页面操作指令；

可选地，所述装置还包括：

创建单元(图中未示出)，用于为每个子区域创建对应的位图，所述位图用于缓存所述子区域的渲染结果。

本实施例的装置，可以用于执行图1-图3所示方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。

相应地，本发明实施例提供的一种页面渲染装置还可用另一种结构实现。图5为本发明提供的一个电子设备实施例的结构示意图，可以实现本发明图1-3所示实施例的流程，如图5所示，上述电子设备可以包括：壳体51、处理器52、存储器53、电路板54和电源电路55，其中，电路板54安置在壳体51围成的空间内部，处理器52和存储器53设置在电路板54上；电源电路55，用于为上述电子设备的各个电路或器件供电；存储器53用于存储可执行程序代码；处理器52通过读取存储器53中存储的可执行程序代码来运行与可执行程序代码对应的程序，用于执行前述实施例所述的方法。

处理器52对上述步骤的具体执行过程以及处理器52通过运行可执行程序代码来进一步执行的步骤，可以参见本发明图1-3所示实施例的描述，在此不再赘述。

该电子设备：提供计算服务的设备，电子设备的构成包括处理器、硬盘、内存、系统总线等，电子设备和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

需要说明的是，在本文中，诸如术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。

尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。

计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。

在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

为了描述的方便，描述以上装置是以功能分为各种单元/模块分别描述。当然，在实施本发明时可以把各单元/模块的功能在同一个或多个软件和/或硬件中实现。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

Claims

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

获取当前应用页面的第一面积以及屏幕可视区域的第二面积；所述当前应用的第一面积为呈现应用页面的窗口的面积，所述屏幕可视区域的第二面积为显示屏的面积；

当全部子区域完成渲染处理后，将每个子区域的渲染结果显示在所述屏幕可视区域内；

所述根据预设顺序，分别对每个子区域进行渲染处理，得到每个子区域的渲染结果，还包括：

利用所述调用事件处理函数，响应用户输入的第二操作指令，所述第二操作指令包括滚动页面操作指令或者点击页面操作指令；

所述利用所述调用事件处理函数，响应用户输入的第二操作指令，具体包括：

2.根据权利要求1所述的方法，其特征在于，所述获取当前应用页面的第一面积以及屏幕可视区域的第二面积之前，所述方法还包括：

根据所述点击打开指令，打开并显示所述当前应用页面。

3.根据权利要求1所述的方法，其特征在于，所述得到第一数量个子区域之后，或者，所述得到第二数量个子区域之后，所述方法还包括：

4.一种页面渲染装置，其特征在于，所述装置包括：

获取单元，用于获取当前应用页面的第一面积以及屏幕可视区域的第二面积；所述当前应用的第一面积为呈现应用页面的窗口的面积，所述屏幕可视区域的第二面积为显示屏的面积；

发送单元，用于当全部子区域完成渲染处理后，向显示模块发送通知消息，以使得所述显示模块将每个子区域的渲染结果显示在所述屏幕可视区域内；

响应单元，用于利用所述调用事件处理函数，响应用户输入的第二操作指令，所述第二操作指令包括滚动页面操作指令或者点击页面操作指令；

所述响应单元具体用于，通过所述事件处理函数，接收用户输入的滚动页面操作指令；

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

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

7.一种电子设备，其特征在于，所述电子设备包括：壳体、处理器、存储器、电路板和电源电路，其中，电路板安置在壳体围成的空间内部，处理器和存储器设置在电路板上；电源电路，用于为上述电子设备的各个电路或器件供电；存储器用于存储可执行程序代码；处理器通过读取存储器中存储的可执行程序代码来运行与可执行程序代码对应的程序，用于执行前述任一权利要求1-3所述的页面渲染方法。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，用于实现前述任一权利要求1-3所述的页面渲染方法。