CN116934570A - 一种应用程序页面的图像处理方法、装置及电子设备 - Google Patents

Abstract

本申请提供一种应用程序页面的图像处理方法、装置及电子设备，应用于移动终端，方法包括：响应于加载应用程序的目标页面的指令，获取目标页面对应的多个图像数据；确定第一图像数据对应的第一缓存标识，第一图像数据为多个图像数据中的任意一个图像数据；调取第二缓存标识，第二缓存标识为多个预存缓存标识中的任意一个预存缓存标识；判断第一缓存标识与第二缓存标识是否相同，若第一缓存标识和第二缓存标识相同，则根据缓存标识与缓存图像的对应关系，调取第二缓存标识对应的第一缓存图像，以显示第一缓存图像。本申请具有解决图像绘制造成的应用程序卡顿问题的效果。

Description

一种应用程序页面的图像处理方法、装置及电子设备

技术领域

本申请涉及图像处理的技术领域，具体涉及一种应用程序页面的图像处理方法、装置及电子设备。

背景技术

在移动终端上打开应用程序时，应用程序可能会从本地存储、网络或其他来源加载当前页面的多种数据，这些数据包括用于显示应用程序的页面内容的图像数据。图像数据准备就绪后，需要对图像进行绘制，从而使页面将完全呈现在屏幕上，并对用户可见。

在移动终端的系统中，默认的图像绘制方式是调用CPU进行计算绘制。在大量使用CPU算力进行图像绘制时，会造成CPU的高负载，特别是多个图像需要绘制时，CPU的处理速度会被严重的占用，造成应用程序运行卡顿。

因此，亟需一种方法解决图像绘制造成的应用程序卡顿问题。

发明内容

本申请提供一种应用程序页面的图像处理方法、装置及电子设备，具有解决图像绘制造成的应用程序卡顿问题的效果。

在本申请的第一方面提供了一种应用程序页面的图像处理方法，应用于移动终端，所述方法包括：

响应于加载应用程序的目标页面的指令，获取所述目标页面对应的多个图像数据；

确定第一图像数据对应的第一缓存标识，所述第一图像数据为多个所述图像数据中的任意一个图像数据；

调取第二缓存标识，所述第二缓存标识为多个预存缓存标识中的任意一个预存缓存标识；

判断所述第一缓存标识与所述第二缓存标识是否相同，若所述第一缓存标识和所述第二缓存标识相同，则根据所述缓存标识与缓存图像的对应关系，调取所述第二缓存标识对应的第一缓存图像，以显示所述第一缓存图像。

通过采用上述技术方案，移动终端在获取到应用程序的目标页面对应的多个图像数据后，在根据图像数据进行图像绘制之前，首先确定每个图像数据对应的缓存标识，缓存标识可以作为图像的唯一标识。再将缓存标识与预存缓存标识进行比对，如果二者相同，表明该缓存标识对应的图像有进行绘制并存储过，则直接调取预存缓存标识对应的缓存图像进行显示。由于一个图像对应一个唯一的缓存标识，因此缓存标识和预存缓存标识一致时，二者对应的图像一致。则可以直接调取缓存图像进行显示，而不用耗费CPU进行绘制。通过缓存机制，可以提高图像的加载速度和显示效率，达到解决图像绘制造成的应用程序卡顿问题的效果。

可选的，在所述判断所述第一缓存标识与所述第二缓存标识是否相同之后，所述方法还包括：

若所述第一缓存标识和所述第二缓存标识不同，则获取标识数量，所述标识数量为与所述预存缓存标识不同的缓存标识的数量；

判断所述标识数量是否大于或等于预设标识数量，若所述标识数量大于或等于所述预设标识数量，则根据所述第一图像数据，发送图像绘制指令，以使GPU绘制所述第一图像数据对应的第一图像；

对所述第一图像进行缓存，并显示所述第一图像。

通过采用上述技术方案，当缓存标识和预存缓存标识不一致时，表明该缓存标识对应的图像并未进行绘制并存储过，则需要进行绘制。再判断与预存缓存标识不同的缓存标识的数量，确定需要绘制的图像的数量。当需要绘制的图像的数量较多，即标识数量大于预设标识数量时，通过CPU进行绘制会造成较大的CPU消耗，从而导致打开应用程序时卡顿，采用GPU绘制第一图像数据对应的第一图像。这样可以利用GPU的并行处理能力，加快图像绘制速度，从而提高图像的加载速度，并减少CPU的资源开销。

可选的，对所述第一图像进行缓存，具体包括：

判断所述第一图像的加载频率是否小于预设频率，若所述加载频率小于所述预设频率，则将所述第一图像缓存至终端磁盘中，所述终端磁盘为所述移动终端内置的磁盘；

若所述加载频率大于或等于所述预设频率，则判断终端内存是否大于或等于预设内存，所述终端内存为所述移动终端的内存；

若所述终端内存大于或等于所述预设内存，则将所述第一图像缓存至所述终端内存；

若所述终端内存小于所述预设内存，则将所述第一图像缓存至所述终端磁盘中。

通过采用上述技术方案，通过判断第一图像的加载频率与预设频率的关系，可以根据图像的使用频率来优化资源的分配。当图像的加载频率低于预设频率时，图像加载频率较低，将图像缓存至终端磁盘中，可以释放终端内存资源，避免不必要的资源占用。当图像的加载频率高于或等于预设频率时，再根据终端内存的大小来决定图像的缓存位置，充分利用可用内存资源。将第一图像缓存至终端内存或终端磁盘中，可以避免重复的网络请求或磁盘读取，从而提高图像的加载速度。当需要显示该图像时，可以直接从缓存中获取，减少了数据传输和读取的时间消耗，加快了图像的加载过程，从而降低了应用程序的卡顿感。

可选的，所述根据所述第一图像数据，发送图像绘制指令，以使GPU绘制所述第一图像数据对应的第一图像，具体包括：

获取所述第一图像数据中图像分辨率的数据，判断所述图像分辨率是否大于预设分辨率，若所述图像分辨率大于所述预设分辨率，则对所述第一图像进行分辨率压缩绘制；

或者，

获取所述第一图像数据中图像尺寸的数据，判断所述图像尺寸是否大于预设尺寸，若所述图像尺寸大于所述预设尺寸，则对所述第一图像进行分辨率压缩绘制。

通过采用上述技术方案，通过对图像分辨率或尺寸的判断，可以根据预设的分辨率或尺寸来进行绘制。当图像的分辨率或尺寸超过预设值时，采用分辨率压缩绘制，即降低图像的清晰度或尺寸，从而减少绘制所需的GPU资源和计算量。这样可以节省GPU的计算能力，降低了图像绘制的消耗，提高了应用程序的性能和响应速度。并且对于高分辨率或大尺寸的图像，其绘制过程需要更多的计算和渲染操作，可能会导致绘制速度变慢。通过进行分辨率压缩绘制，可以减少绘制所需的计算量和内存占用，从而加快绘制速度，让图像能够更快地显示在屏幕上。

可选的，获取相邻页面对应的多个图像数据，所述相邻页面为所述目标页面相邻的页面；

确定第二图像数据，所述第二图像数据为多个图像数据中，不存在与所述预存缓存标识相同缓存标识的图像数据，所述第二图像数据位于所述相邻页面；

根据所述第一图像数据，发送所述第一图像绘制指令，以使所述GPU绘制所述第一图像时，根据所述第二图像数据，发送第二图像绘制指令，以使所述GPU绘制所述第二图像数据对应的第二图像。

通过采用上述技术方案，通过提前获取相邻页面对应的多个图像数据，并绘制其中的第二图像数据，可以在用户导航到相邻页面时快速显示相应的图像。这样可以提高页面切换的响应速度，从而降低应用程序运行的卡顿感。

可选的，在所述判断所述第一缓存标识与所述第二缓存标识是否相同，若所述第一缓存标识和所述第二缓存标识相同，则根据所述缓存标识与缓存图像的对应关系，调取所述第二缓存标识对应的第一缓存图像，以显示所述第一缓存图像之后，所述方法还包括：

响应于滑动所述目标页面的指令，获取所述目标页面中的可见区域；

获取所述可见区域对应的可见图像数据，确定所述可见图像数据的缓存标识；

根据所述缓存标识与缓存图像的对应关系，调取所述可见图像数据的缓存标识对应的缓存图像；或者，根据所述可见图像数据，绘制所述可见图像数据对应的可见图像。

通过采用上述技术方案，通过获取目标页面中可见区域的图像数据并调取缓存图像进行显示，可以避免在滑动过程中加载不可见的图像数据，减少在图像绘制上的开销，从而降低了页面滑动时的卡顿感。

可选的，在所述若所述终端内存大于或等于所述预设内存，则将所述第一图像缓存至所述终端内存之后，所述方法还包括：

获取所述第一图像数据中图像尺寸的数据；

判断所述图像尺寸是否小于或等于预设阈值，若所述图像尺寸小于或等于所述预设阈值，则将所述第一图像缓存至所述终端磁盘。

通过采用上述技术方案，通过判断图像尺寸是否小于或等于预设阈值，并将小尺寸图像缓存至终端磁盘，可以节省终端磁盘空间。相对于将所有图像都缓存在磁盘上，只缓存小尺寸图像可以减少磁盘空间的占用，提高存储效率，并且可以实现第一图像的长期存储。

在本申请的第二方面提供了一种应用程序页面的图像处理装置，所述装置为移动终端，包括获取模块、图像识别模块、调取模块以及存储控制模块，其中：

所述获取模块，用于响应于加载应用程序的目标页面的指令，获取所述目标页面对应的多个图像数据；

所述图像识别模块，用于确定第一图像数据对应的第一缓存标识，所述第一图像数据为多个所述图像数据中的任意一个图像数据；

所述调取模块，用于调取第二缓存标识，所述第二缓存标识为多个预存缓存标识中的任意一个预存缓存标识；

所述存储控制模块，用于判断所述第一缓存标识与所述第二缓存标识是否相同，若所述第一缓存标识和所述第二缓存标识相同，则根据所述缓存标识与缓存图像的对应关系，调取所述第二缓存标识对应的第一缓存图像，以显示所述第一缓存图像。

在本申请的第三方面提供了一种电子设备，包括处理器、存储器、用户接口以及网络接口，所述存储器用于存储指令，所述用户接口和所述网络接口均用于与其他设备通信，所述处理器用于执行所述存储器中存储的指令，以使所述电子设备执行如上述任意一项所述的方法。

在本申请的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有指令，当所述指令被执行时，执行如上述任意一项所述的方法。

综上所述，本申请实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：

1. 移动终端在获取到应用程序的目标页面对应的多个图像数据后，在根据图像数据进行图像绘制之前，首先确定每个图像数据对应的缓存标识，缓存标识可以作为图像的唯一标识。再将缓存标识与预存缓存标识进行比对，如果二者相同，表明该缓存标识对应的图像有进行绘制并存储过，则直接调取预存缓存标识对应的缓存图像。由于一个图像对应一个唯一的缓存标识，因此缓存标识和预存缓存标识一致时，二者对应的图像一致。则可以直接调取缓存图像进行显示，而不用耗费CPU进行绘制。通过缓存机制，可以提高图像的加载速度和显示效率，达到解决图像绘制造成的应用程序卡顿问题的效果。

2.当缓存标识和预存缓存标识不一致时，表明该缓存标识对应的图像并未进行绘制并存储过，则需要进行绘制。再判断与预存缓存标识不同的缓存标识的数量，确定需要绘制的图像的数量。当需要绘制的图像的数量较多，即标识数量大于预设标识数量时，通过CPU进行绘制会造成较大的CPU消耗，从而导致打开应用程序时卡顿，采用GPU绘制第一图像数据对应的第一图像。这样可以利用GPU的并行处理能力，加快图像绘制速度，从而提高图像的加载速度，并减少CPU的资源开销。

3.通过判断第一图像的加载频率与预设频率的关系，可以根据图像的使用频率来优化资源的分配。当图像的加载频率低于预设频率时，将图像缓存至终端磁盘中，可以释放终端内存资源，避免不必要的资源占用。当图像的加载频率高于或等于预设频率时，可以根据终端内存的大小来决定图像的缓存位置，充分利用可用内存资源。将第一图像缓存至终端内存或终端磁盘中，可以避免重复的网络请求或磁盘读取，从而提高图像的加载速度。当需要显示该图像时，可以直接从缓存中获取，减少了数据传输和读取的时间消耗，加快了图像的加载过程，从而降低了应用程序的卡顿感。

附图说明

图1是本申请实施例公开的一种应用程序页面的图像处理方法的流程示意图；

图2是本申请实施例公开的另一种应用程序页面的图像处理方法的流程示意图；

图3是本申请实施例公开的一种应用程序页面的图像处理装置的结构示意图；

图4是本申请实施例公开的一种电子设备的结构示意图。

附图标记说明：301、获取模块；302、图像识别模块；303、调取模块；304、存储控制模块；305、图像绘制模块；401、处理器；402、通信总线；403、用户接口；404、网络接口；405、存储器。

具体实施方式

为了使本领域的技术人员更好地理解本说明书中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。

在本申请实施例的描述中，“例如”或者“举例来说”等词用于表示作例子、例证或说明。本申请实施例中被描述为“例如”或者“举例来说”的任何实施例或设计方案不应被解释为比其他实施例或设计方案更优选或更具优势。确切而言，使用“例如”或者“举例来说”等词旨在以具体方式呈现相关概念。

在本申请实施例的描述中，术语“多个”的含义是指两个或两个以上。例如，多个系统是指两个或两个以上的系统，多个屏幕终端是指两个或两个以上的屏幕终端。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

在移动终端上打开应用程序时，应用程序可能会从本地存储、网络或其他来源加载当前页面的多种数据，这些数据包括用于显示应用程序的页面内容的图像数据。图像数据准备就绪后，需要对图像进行绘制，从而使页面将完全呈现在屏幕上，并对用户可见。

在iOS系统中，默认的图像绘制方式是调用CPU进行计算绘制。在大量使用CPU算力进行图像绘制时，会造成CPU的高负载，特别是对于一些应用程序的首页信息流和商城模块图片的数量多的时候，CPU的处理速度会被严重的占用，加载图片的时候滑动应用程序的列表的会导致列表的卡顿。如何解决在加载大量图片时提升应用程序的流畅度是应用程序开发的难题之一。因此，亟需一种方法解决图像绘制造成的应用程序卡顿问题。

本实施例公开了一种应用程序页面的图像处理方法，应用于移动终端，参照图1，包括如下步骤S110-S140：

S110，响应于加载应用程序的目标页面的指令，获取目标页面对应的多个图像数据。

具体地，参照图2的步骤S201，用户在移动终端打开应用程序时，移动终端响应于加载应用程序的目标页面的指令，向服务器发送图像数据调用请求。其中，移动终端包括但不限于：安卓（Android）系统设备、苹果公司开发的移动操作系统（iOS）设备、个人计算机（PC）、全球局域网（World Wide Web，Web）设备以及智能穿戴设备（Wearable Devices，WD）等。应用程序（Application，APP）可以在终端系统上运行的任意一个软件应用，服务器为加载应用程序的后台服务或者服务器集群。图像数据调用请求用于服务器确定应用程序当前打开的目标页面，从而确定目标页面对应需要加载图像。

服务器向移动终端发送一组图像地址，参照图2的步骤S202，移动终端获取图像地址，图像地址为网络地址，移动终端可根据该图像地址从网络上下载相应的图像数据，从而获取到目标页面对应的多个图像数据，图像数据的数量与图像地址的数量相同。多个图像数据的数量根据应用程序当前页面需要绘制的图像的数量进行确定。

S120，确定第一图像数据对应的第一缓存标识，第一图像数据为多个图像数据中的任意一个图像数据。

具体地，参照图2的步骤S203，获取到图像地址后，移动终端计算每个图像地址对应的缓存key，从而确定图像数据对应的缓存标识。缓存key为通过哈希函数计算出的图像地址或图像数据对应的哈希值。通过将图像地址或图像数据输入哈希函数进行计算，生成唯一的哈希值。无论输入数据的长度是多少，哈希函数都会生成固定长度的哈希值。常见的哈希函数有MD5、SHA-1、SHA-256等。MD5（Message Digest Algorithm 5）是一种常用的哈希函数算法，它可以将输入数据转换为128位（16字节）的哈希值，即MD5值。需要说明的是，根据图像地址或者图像数据计算对应的哈希值仅为相关技术领域的技术人员所采用的常规技术手段，在此不再做进一步赘述。

在一种可能的实施方式中，通过两种不同的哈希函数，计算图片地址的哈希值（通过除MD5函数计算出的哈希值）和MD5值的组合值，可以将其作为缓存key存储在缓存中。这样，当需要查找图片时，只需要通过计算当前图片地址的哈希值和MD5值的组合值，即可快速在缓存中找到对应的图片数据。这种方式可以避免直接对比长字符串，提高查找效率。将哈希值和MD5值进行组合，降低出现两个不同图像地址计算得到同一个哈希值的概率。

S130，调取第二缓存标识，第二缓存标识为多个预存缓存标识中的任意一个预存缓存标识。

具体地，若用户在移动终端安装应用程序，首次打开应用程序，则在此之前应用程序的页面由于从未被打开，则移动终端也未获取过页面对应的图像数据，从而本地不会保存有图像数据对应的缓存标识，即不会保存有预存缓存标识。或者用户首次在移动终端打开应用程序的目标页面，同样移动终端在此之前未获取过目标页面对应的图像数据，本地也不会保存有图像数据对应的缓存标识。当用户在移动终端非首次打开应用程序的目标页面时，则在此之前移动终端获取过目标页面对应的多个图像数据，则本地保存有多个图像数据对应的所有预存缓存标识，或者部分预存缓存标识（部分预存缓存标识被清除）。

在通过计算出各个图像数据对应的缓存key，确定图像数据的对应的缓存标识后，移动终端需要调取预存缓存标识，从而将缓存标识跟预存缓存标识进行一一比对，若不存在与预存缓存标识相同的缓存标识，则说明该缓存标识对应的图像数据为移动终端首次获取的图像数据。若存在与预存缓存标识相同的缓存标识，则说明该缓存标识对应的图像数据为移动终端再次获取的图像数据，则移动终端本地存储有图像数据对应的图像文件。

S140，判断第一缓存标识与第二缓存标识是否相同，若第一缓存标识和第二缓存标识相同，则根据缓存标识与缓存图像的对应关系，调取第二缓存标识对应的第一缓存图像，以显示第一缓存图像。

具体地，前面提到，若存在与预存缓存标识相同的缓存标识，则说明该缓存标识对应的图像数据为移动终端再次获取的图像数据，则移动终端本地存储有图像数据对应的图像文件。参照图2的步骤S204，因此当移动终端确定存在与预存缓存标识相同的缓存标识，则调取预存缓存标识（缓存key）对应的缓存图像。由于缓存图像可能位于终端内存中，也可能位于终端磁盘中，因此首先需要获取缓存图像的存储位置，再根据存储位置调取对应的数据。

终端内存，也称为随机存取存储器（Random Access Memory，RAM），是用于临时存储数据和正在运行的应用程序的地方。它是移动终端的临时存储器，当用户打开应用程序时，应用程序和相关数据被加载到内存中以供使用。内存速度很快，可以快速读取和写入数据，这使得移动终端能够快速响应用户的操作。然而，内存的容量相对较小，一旦移动终端关闭或重新启动，内存中存储的数据将被清除。内存的大小通常以GB（千兆字节）为单位进行衡量。

终端磁盘也称为存储器，是用于长期存储数据的地方。它包括两种主要类型：闪存存储（如eMMC、UFS）和固态硬盘（Solid State Drive，SSD）。磁盘可以存储移动终端的操作系统、应用程序、媒体文件（如照片、视频、音乐）以及其他用户数据。与内存不同，磁盘的存储容量通常比较大，可以存储大量的数据。磁盘的读写速度相对较慢，比内存慢得多，但是可以长期保存数据，即使移动终端关机或重新启动，数据也不会丢失。磁盘容量通常以GB或TB（万亿字节）为单位进行衡量。

在一种可能的实施方式中，在判断第一缓存标识与第二缓存标识是否相同之后，若第一缓存标识和第二缓存标识不同，则获取标识数量，标识数量为与预存缓存标识不同的缓存标识的数量。参照图2的步骤S205，判断标识数量是否大于或等于预设标识数量，若标识数量大于或等于预设标识数量，则根据第一图像数据，发送第一图像绘制指令，以使GPU绘制第一图像。对第一图像进行缓存，并显示第一图像。

具体地，当第一缓存标识与第二缓存标识不同时，说明不存在与缓存标识相同的预存缓存标识，则需要根据与预存缓存标识不同的缓存标识的标识数量，判断标识数量是否大于或等于预设标识数量。预设标识数量可以为5个，也可以为10个，还可以为50个，本实施例优选为10个，不同实施例中，图像数据的数量需要根据分配给图像绘制的运行内存、CPU和GPU的运行状况等情况进行设定。

当标识数量大于或等于预设标识数量时，表明至少有10个图像需要绘制，CPU执行的耗时任务多，CPU使用繁忙，会导致CPU的应答响应慢，CPU的绘图效率降低，从而导致用户感知到UI界面上的卡顿。因此需要发送指令使GPU作为绘制图片的执行者，以减少CPU的资源开销。指令是指挥相关组件工作的指示和命令，可以理解为指定执行某种运算或功能实现的某种控制的代码。

通过上述技术方案，移动终端在获取到应用程序的目标页面对应的多个图像数据后，在根据图像数据进行图像绘制之前，首先确定每个图像数据对应的缓存标识，缓存标识可以作为图像的唯一标识。再将缓存标识与预存缓存标识进行比对，如果二者相同，表明该缓存标识对应的图像有进行绘制并存储过，则直接调取预存缓存标识对应的缓存图像。由于一个图像对应一个唯一的缓存标识，因此缓存标识和预存缓存标识一致时，二者对应的图像一致。则可以直接调取缓存图像进行显示，而不用耗费CPU进行绘制。通过缓存机制，可以提高图像的加载速度和显示效率，达到解决图像绘制造成的应用程序卡顿问题的效果。

进一步地，参照图2的步骤S206，GPU分别对每一张图像进行绘制，以其中任意一张图像，即第一图像进行举例说明。移动终端从第一图像或第一图像数据中提取图像的分辨率信息，获取第一图像数据中图像分辨率的数据，判断图像分辨率是否大于预设分辨率。其中，预设分辨率需要根据移动终端屏幕的分辨率进行设定，使预设分辨率接近移动终端屏幕的分辨率。若图像分辨率大于预设分辨率，则对第一图像进行分辨率压缩绘制。或者，移动终端获取第一图像数据中图像尺寸的数据，判断图像尺寸是否大于预设尺寸，若图像尺寸大于预设尺寸，则对第一图像进行分辨率压缩绘制。其中，预设尺寸需要根据移动终端屏幕的尺寸进行设定，使预设尺寸接近移动终端屏幕的尺寸。

可以通过计算压缩比例进行分辨率压缩绘制，根据预设分辨率和第一图像的分辨率，计算出压缩比例。例如，如果预设分辨率是800x600，而第一图像的分辨率是1200x900，可以计算出一个压缩比例，如0.67。再使用GPU将压缩后的图像绘制出来。具体的实现方式可能因使用的编程语言而异。以下是一种常见的方法：创建一个新的画布或图像对象，大小与压缩后的图像尺寸相匹配。将压缩后的图像绘制到新的画布或图像对象上，保留原始图像的宽高比和内容。

通过对图像分辨率或尺寸的判断，可以根据预设的分辨率或尺寸来进行绘制。当图像的分辨率或尺寸超过预设值时，采用分辨率压缩绘制，即降低图像的清晰度或尺寸，从而减少绘制所需的GPU资源和计算量。这样可以节省GPU的计算能力，降低了图像绘制的消耗，提高了应用程序的性能和响应速度。并且对于高分辨率或大尺寸的图像，其绘制过程需要更多的计算和渲染操作，可能会导致绘制速度变慢。通过进行分辨率压缩绘制，可以减少绘制所需的计算量和内存占用，从而加快绘制速度，让图像能够更快地显示在屏幕上。

进一步地，可以将应用程序页面的图像进行懒加载，即延迟加载图像直到用户滚动到其可见区域。这样可以避免一次性加载大量图像，减少GPU绘图的消耗。在应用程序中，监听滑动事件以获取用户的滑动行为。这可以通过使用相关的滑动监听器或框架来实现。再判断图像是否在可见区域，当用户滑动时，获取当前可见区域的位置和尺寸。对于每个图像，判断其是否位于可见区域内。可以通过比较图像数据中的位置数据和可见区域的位置数据来判断。对于在可见区域内的图像，确定其图像数据对应的缓存key，然后根据缓存key判断是否存在具有相同缓存key的已缓存图像，若存在具有相同缓存key的已缓存图像，则直接调取已缓存图像进行加载显示，若不存在具有相同缓存key的已缓存图像，则根据可见图像数据，绘制可见图像数据对应的可见图像。

通过获取目标页面中可见区域的图像数据并调取缓存图像进行显示，可以避免在滑动过程中加载不可见的图像数据，减少在图像绘制上的开销，从而降低了页面滑动时的卡顿感。

进一步地，也可以对应用程序的相邻页面的图像进行提前加载，即GPU在绘制第一图像时，同时绘制第二图像，其中第一图像和第二图像分别位于应用程序两个相邻的页面，可以是左右相邻的两个页面，也可以是上下相邻的两个页面。且第二图像数据为该页面的多个图像数据中，不存在与预存缓存标识相同缓存标识的图像数据。

判断两个页面是否相邻，可以判断页面的结构关系来确定它们是否相邻。这可以通过页面的层次结构、布局和导航关系来进行分析。如果两个页面在导航结构中是直接相连的，或者它们在层次结构中是兄弟节点或相邻节点，那么它们可以被认为是相邻页面。或者为每个页面分配唯一的索引或标识符，并在页面之间进行比较来确定它们是否相邻。这些索引或标识符可以是页面在导航栈或页面路由中的位置、页面的唯一标识符等。

通过提前获取相邻页面对应的多个图像数据，并绘制其中的第二图像数据，可以在用户导航到相邻页面时快速显示相应的图像。这样可以提高页面切换的响应速度，从而降低应用程序运行的卡顿感。

在移动终端获取到图像数据后，需要根据数据内容呈现不同的内容图像，又要根据内容做不同的UI样式，这就对CPU的性能和代码执行效率提出了更高的要求。在不改变CPU性能的前提下只能不断的去研发和提高代码的执行效率，减少非必要的手机CPU资源开销使用非阻塞访问。在图像绘制上，替代高消耗的CPU绘制，使用GPU绘图技术来替代。

进一步地，在采用GPU绘制图像时，可以采用异步绘制的方式，异步绘制允许在后台进行绘制操作，而不会阻塞主线程或其他计算任务的执行。传统上，在绘制过程中，CPU负责准备图形数据和指令，并将它们发送到GPU进行处理和渲染。在这种同步模式下，CPU需要等待GPU完成绘制操作，然后才能继续执行后续的计算任务。这可能会导致性能瓶颈，特别是对于需要大量绘制操作的应用程序或复杂的图形场景。而使用GPU异步绘制，CPU可以在发送绘制指令后立即继续执行其他计算任务，而无需等待GPU完成。这样可以提高整体的并行性和系统响应性能。同时，GPU可以在后台进行绘制操作，利用多线程和并行处理的能力，从而更高效地执行绘制任务。通过GPU异步绘制，应用程序可以实现更平滑的帧率和更快的响应速度。

当缓存标识和预存缓存标识不一致时，表明该缓存标识对应的图像并未进行绘制并存储过，则需要进行绘制。再判断与预存缓存标识不同的缓存标识的数量，确定需要绘制的图像的数量。当需要绘制的图像的数量较多，即标识数量大于预设标识数量时，通过CPU进行绘制会造成较大的CPU消耗，从而导致打开应用程序时卡顿，采用GPU绘制第一图像数据对应的第一图像。这样可以利用GPU的并行处理能力，加快图像绘制速度，从而提高图像的加载速度，并减少CPU的资源开销。

目前，图层圆角是一个很常用的属性，但是在列表样式上切圆角会触发系统的离屏渲染机制，导致CPU过渡消耗，从而导致列表滑动不流畅。因此在采用GPU进行图像绘制时，提前绘制好图像的圆角。

具体地，在提供给应用程序的绘图API具有可供修改图像的参数选项，参数选项可用来控制绘制图像的圆角大小，因此需要则统一在绘图阶段就处理好使用者直接使用即可，可以为使用者节省CPU的资源开销。相对于一般常用的系统提供的切圆角方案都是在图层上操作的，会调用CPU计算以实现图像圆角。当应用程序有大量图像需要展示时，移动终端的系统的列表复用机制会在需要的列表单元还没有出现在屏幕的时候进行加载图片和圆角的裁切，这种场景下会造成CPU的高负载，导致应用程序的卡顿。

移动终端收到服务器发送过来的图像地址会立即下载图像的原始数据，然后调用GPU进行图像绘制，并将绘制图像后的结果建立内存缓存和/或磁盘缓存，并通过链表将缓存Key和绘图内容结果关联。

在一种可能的实施方式中，对第一图像进行缓存，具体包括：判断第一图像的加载频率是否小于预设频率，若加载频率小于预设频率，则将第一图像缓存至终端磁盘中，终端磁盘为移动终端内置的磁盘。若加载频率大于或等于预设频率，则判断终端内存是否大于或等于预设内存，终端内存为移动终端的内存。若终端内存大于或等于预设内存，则将第一图像缓存至终端内存。若终端内存小于预设内存，则将第一图像缓存至终端磁盘中。

具体地，加载频率可以理解为在预设的一段时间内，第一图像被加载的次数，即第一图像被打开并在移动终端屏幕上显示的次数。预设频率可以为3次，也可以为10次，还可以为30次，本实施例优选为3次，其它实施例可根据实际情况调整。对于第一图像加载频率的计数，本实施例优选为通过记录第一缓存标识被读取的次数完成，由于第一图像仅存在唯一的第一缓存标识，因此可以通过记录第一缓存标识被读取的次数，快速记录第一图像被加载的次数，从而得到加载频率。

参照图2的步骤S207，当加载频率大于或等于预设频率时，表明第一图像被高频率打开显示，则将第一图像缓存至终端内存。由于内存速度很快，可以快速读取和写入数据，这使得移动终端能够快速响应用户的操作，从而显示第一图像。当加载频率小于预设频率，表明第一图像被打开的频率较低，则进一步需要判断终端内存是否大于预设内存，预设内存需要根据移动终端的当前的内存情况进行设定，使得当预设内存被占用时，移动终端有足够内存运行程序或存储文件。当加载频率大于或等于预设频率时，若终端内存小于预设内存，则表明终端内存占用较高，将第一图像的内容存储至终端磁盘中。若终端内存大于或等于预设内存，则表明终端内存占用较低，则将第一图像缓存至终端内存。

进一步地，参照图2的步骤S208，当终端内存大于或等于预设内存时，将第一图像缓存至终端内存。若第一图像的图像尺寸小于或等于预设阈值，则可以同时将第一图像缓存至终端磁盘中，以将第一图像进行长期存储。其中，预设阈值的大小需要根据终端磁盘的剩余空间进行设定，当终端磁盘的剩余空间越小，预设阈值的数值需要设置得越小。通过判断图像尺寸是否小于或等于预设阈值，并将小尺寸图像缓存至终端磁盘，可以节省终端磁盘空间。相对于将所有图像都缓存在磁盘上，只缓存小尺寸图像可以减少磁盘空间的占用，提高存储效率，并且可以实现第一图像的长期存储。

参照图2的步骤S209和S210，通过判断第一图像的加载频率与预设频率的关系，可以根据图像的使用频率来优化资源的分配。当图像的加载频率低于预设频率时，将图像缓存至终端磁盘中，可以释放终端内存资源，避免不必要的资源占用。当图像的加载频率高于或等于预设频率时，可以根据终端内存的大小来决定图像的缓存位置，充分利用可用内存资源。将第一图像缓存至终端内存或终端磁盘中，可以避免重复的网络请求或磁盘读取，从而提高图像的加载速度。当需要显示该图像时，可以直接从缓存中获取，减少了数据传输和读取的时间消耗，加快了图像的加载过程，从而降低了应用程序的卡顿感。

将图像绘制并缓存完成后，将图像转换成移动终端的屏幕可显示的形式，在移动终端的屏幕进行显示，从而使用户获取到需要观看的图像。

进一步地，参照图2，在对第一图像进行绘制并缓存完成后，还需要通过链表将缓存标识和图像绘制结果进行关联。首先定义链表节点，创建一个链表节点的数据结构，该节点包含两个字段：缓存标识（缓存key）和图像绘制结果。再创建链表，创建一个空的链表，用于存储缓存标识和图像绘制结果的关联。最后插入节点，当第一图像绘制完成后，创建一个新的链表节点，并将缓存标识和图像绘制结果存储在节点中。然后将该节点插入链表中，可以选择在链表的头部或尾部插入节点，具体根据需求和设计决定。如果后续需要对其他图像进行绘制和缓存，重复上述操作，创建新的节点并插入链表中。这样就可以通过链表中的节点，将缓存标识和图像绘制结果进行关联。

通过以上步骤，可以创建一个链表数据结构，并将缓存标识和图像绘制结果进行关联。当需要使用某个缓存图像时，可以遍历链表找到对应的节点，从节点中获取图像绘制结果。链表的插入操作可以根据实际需求进行调整，例如使用双向链表来方便节点的插入和删除操作。这样的链表结构可以方便地管理和查询缓存图像的绘制结果。

本实施例还公开了一种应用程序页面的图像处理装置，装置为移动终端，参照图3，包括获取模块301、图像识别模块302、调取模块303以及存储控制模块304，其中：

获取模块301，用于响应于加载应用程序的目标页面的指令，获取目标页面对应的多个图像数据；

图像识别模块302，用于确定第一图像数据对应的第一缓存标识，第一图像数据为多个图像数据中的任意一个图像数据；

调取模块303，用于调取第二缓存标识，第二缓存标识为多个预存缓存标识中的任意一个预存缓存标识；

存储控制模块304，用于判断第一缓存标识与第二缓存标识是否相同，若第一缓存标识和第二缓存标识相同，则根据缓存标识与缓存图像的对应关系，调取第二缓存标识对应的第一缓存图像，以显示第一缓存图像。

在一种可能的实施方式中，装置还包括图像绘制模块305；

图像识别模块302，用于若第一缓存标识和第二缓存标识不同，则获取标识数量，标识数量为与预存缓存标识不同的缓存标识的数量；

图像绘制模块305，用于判断标识数量是否大于或等于预设标识数量，若标识数量大于或等于预设标识数量，则根据第一图像数据，发送第一图像绘制指令，以使GPU绘制第一图像数据对应的第一图像；

存储控制模块304，用于对第一图像进行缓存，并显示第一图像。

在一种可能的实施方式中，存储控制模块304，用于判断第一图像的加载频率是否小于预设频率，若加载频率小于预设频率，则将第一图像缓存至终端磁盘中，终端磁盘为移动终端内置的磁盘；

存储控制模块304，用于若加载频率大于或等于预设频率，则判断终端内存是否大于或等于预设内存，终端内存为移动终端的内存；

存储控制模块304，用于若终端内存大于或等于预设内存，则将第一图像缓存至终端内存；

存储控制模块304，用于若终端内存小于预设内存，则将第一图像缓存至终端磁盘中。

在一种可能的实施方式中，图像绘制模块305，用于获取第一图像数据中图像分辨率的数据，判断图像分辨率是否大于预设分辨率，若图像分辨率大于预设分辨率，则对第一图像进行分辨率压缩绘制；

或者，

图像绘制模块305，用于获取第一图像数据中图像尺寸的数据，判断图像尺寸是否大于预设尺寸，若图像尺寸大于预设尺寸，则对第一图像进行分辨率压缩绘制。

在一种可能的实施方式中，获取模块301，用于获取相邻页面对应的多个图像数据，相邻页面为目标页面相邻的页面；

图像识别模块302，用于确定第二图像数据，第二图像数据为多个图像数据中，不存在与预存缓存标识相同缓存标识的图像数据，第二图像数据位于相邻页面；

图像绘制模块305，用于根据第一图像数据，发送第一图像绘制指令，以使GPU绘制第一图像时，根据第二图像数据，发送第二图像绘制指令，以使GPU绘制第二图像数据对应的第二图像。

在一种可能的实施方式中，获取模块301，用于响应于滑动目标页面的指令，获取目标页面中的可见区域；

获取模块301，用于获取可见区域对应的可见图像数据，确定可见图像数据的缓存标识；

调取模块303，用于根据缓存标识与缓存图像的对应关系，调取可见图像数据的缓存标识对应的缓存图像；或者，根据可见图像数据，绘制可见图像数据对应的可见图像。

在一种可能的实施方式中，获取模块301，用于获取第一图像数据中图像尺寸的数据；

存储控制模块304，用于判断图像尺寸是否小于或等于预设阈值，若图像尺寸小于或等于预设阈值，则将第一图像缓存至终端磁盘。

需要说明的是：上述实施例提供的装置在实现其功能时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的装置和方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

本实施例还公开了一种电子设备，参照图4，电子设备可以包括：至少一个处理器401，至少一个通信总线402，用户接口403，网络接口404，至少一个存储器405。

其中，通信总线402用于实现这些组件之间的连接通信。

其中，用户接口403可以包括显示屏（Display）、摄像头（Camera），可选用户接口403还可以包括标准的有线接口、无线接口。

其中，网络接口404可选的可以包括标准的有线接口、无线接口（如WI-FI接口）。

其中，处理器401可以包括一个或者多个处理核心。处理器401利用各种接口和线路连接整个服务器内的各个部分，通过运行或执行存储在存储器405内的指令、程序、代码集或指令集，以及调用存储在存储器405内的数据，执行服务器的各种功能和处理数据。可选的，处理器401可以采用数字信号处理（Digital Signal Processing，DSP）、现场可编程门阵列（Field-Programmable Gate Array，FPGA）、可编程逻辑阵列（Programmable LogicArray，PLA）中的至少一种硬件形式来实现。处理器401可集成中央处理器401（CentralProcessing Unit，CPU）、图像处理器401（Graphics Processing Unit，GPU）和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器401中，单独通过一块芯片进行实现。

其中，存储器405可以包括随机存储器405（Random Access Memory，RAM），也可以包括只读存储器405（Read-Only Memory）。可选的，该存储器405包括非瞬时性计算机可读介质（non-transitory computer-readable storage medium）。存储器405可用于存储指令、程序、代码、代码集或指令集。存储器405可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令（比如触控功能、声音播放功能、图像播放功能等）、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及的数据等。存储器405可选的还可以是至少一个位于远离前述处理器401的存储装置。如图所示，作为一种计算机存储介质的存储器405中可以包括操作系统、网络通信模块、用户接口403模块以及一种应用程序页面的图像处理方法的应用程序。

在图4所示的电子设备中，用户接口403主要用于为用户提供输入的接口，获取用户输入的数据；而处理器401可以用于调用存储器405中存储一种应用程序页面的图像处理方法的应用程序，当由一个或多个处理器401执行时，使得电子设备执行如上述实施例中一个或多个的方法。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必需的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所披露的装置，可通过其他的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些服务接口，装置或单元的间接耦合或通信连接，可以是电性或其他的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储器405中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器405中，包括若干指令用以使得一台计算机设备（可为个人计算机、服务器或者网络设备等）执行本申请各个实施例方法的全部或部分步骤。而前述的存储器405包括：U盘、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述者，仅为本公开的示例性实施例，不能以此限定本公开的范围。即但凡依本公开教导所作的等效变化与修饰，皆仍属本公开涵盖的范围内。本领域技术人员在考虑说明书及实践真理的公开后，将容易想到本公开的其他实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未记载的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的范围和精神由权利要求限定。

Claims (10)

1.一种应用程序页面的图像处理方法，其特征在于，应用于移动终端，所述方法包括：

响应于加载应用程序的目标页面的指令，获取所述目标页面对应的多个图像数据；

确定第一图像数据对应的第一缓存标识，所述第一图像数据为多个所述图像数据中的任意一个图像数据；

调取第二缓存标识，所述第二缓存标识为多个预存缓存标识中的任意一个预存缓存标识；

判断所述第一缓存标识与所述第二缓存标识是否相同，若所述第一缓存标识和所述第二缓存标识相同，则根据所述缓存标识与缓存图像的对应关系，调取所述第二缓存标识对应的第一缓存图像，以显示所述第一缓存图像。

2.根据权利要求1所述的一种应用程序页面的图像处理方法，其特征在于，在所述判断所述第一缓存标识与所述第二缓存标识是否相同之后，所述方法还包括：

若所述第一缓存标识和所述第二缓存标识不同，则获取标识数量，所述标识数量为与所述预存缓存标识不同的缓存标识的数量；

判断所述标识数量是否大于或等于预设标识数量，若所述标识数量大于或等于所述预设标识数量，则根据所述第一图像数据，发送第一图像绘制指令，以使GPU绘制所述第一图像数据对应的第一图像；

对所述第一图像进行缓存，并显示所述第一图像。

3.根据权利要求1所述的一种应用程序页面的图像处理方法，其特征在于，对所述第一图像进行缓存，具体包括：

判断所述第一图像的加载频率是否小于预设频率，若所述加载频率小于所述预设频率，则将所述第一图像缓存至终端磁盘中，所述终端磁盘为所述移动终端内置的磁盘；

若所述加载频率大于或等于所述预设频率，则判断终端内存是否大于或等于预设内存，所述终端内存为所述移动终端的内存；

若所述终端内存大于或等于所述预设内存，则将所述第一图像缓存至所述终端内存；

若所述终端内存小于所述预设内存，则将所述第一图像缓存至所述终端磁盘中。

4.根据权利要求2所述的一种应用程序页面的图像处理方法，其特征在于，所述根据所述第一图像数据，发送第一图像绘制指令，以使GPU绘制所述第一图像数据对应的第一图像，具体包括：

获取所述第一图像数据中图像分辨率的数据，判断所述图像分辨率是否大于预设分辨率，若所述图像分辨率大于所述预设分辨率，则对所述第一图像进行分辨率压缩绘制；

或者，

获取所述第一图像数据中图像尺寸的数据，判断所述图像尺寸是否大于预设尺寸，若所述图像尺寸大于所述预设尺寸，则对所述第一图像进行分辨率压缩绘制。

5.根据权利要求2所述的一种应用程序页面的图像处理方法，其特征在于，所述方法还包括：

获取相邻页面对应的多个图像数据，所述相邻页面为所述目标页面相邻的页面；

确定第二图像数据，所述第二图像数据为多个图像数据中，不存在与所述预存缓存标识相同缓存标识的图像数据，所述第二图像数据位于所述相邻页面；

根据所述第一图像数据，发送所述第一图像绘制指令，以使所述GPU绘制所述第一图像时，根据所述第二图像数据，发送第二图像绘制指令，以使所述GPU绘制所述第二图像数据对应的第二图像。

6.根据权利要求1所述的一种应用程序页面的图像处理方法，其特征在于，在所述判断所述第一缓存标识与所述第二缓存标识是否相同，若所述第一缓存标识和所述第二缓存标识相同，则根据所述缓存标识与缓存图像的对应关系，调取所述第二缓存标识对应的第一缓存图像，以显示所述第一缓存图像之后，所述方法还包括：

响应于滑动所述目标页面的指令，获取所述目标页面中的可见区域；

获取所述可见区域对应的可见图像数据，确定所述可见图像数据的缓存标识；

根据所述缓存标识与缓存图像的对应关系，调取所述可见图像数据的缓存标识对应的缓存图像；或者，根据所述可见图像数据，绘制所述可见图像数据对应的可见图像。

7.根据权利要求3所述的一种应用程序页面的图像处理方法，其特征在于，在所述若所述终端内存大于或等于所述预设内存，则将所述第一图像缓存至所述终端内存之后，所述方法还包括：

获取所述第一图像数据中图像尺寸的数据；

判断所述图像尺寸是否小于或等于预设阈值，若所述图像尺寸小于或等于所述预设阈值，则将所述第一图像缓存至所述终端磁盘。

8.一种应用程序页面的图像处理装置，其特征在于，所述装置为移动终端，包括获取模块(301)、图像识别模块(302)、调取模块(303)以及存储控制模块(304)，其中：

所述获取模块(301)，用于响应于加载应用程序的目标页面的指令，获取所述目标页面对应的多个图像数据；

所述图像识别模块(302)，用于确定第一图像数据对应的第一缓存标识，所述第一图像数据为多个所述图像数据中的任意一个图像数据；

所述调取模块(303)，用于调取第二缓存标识，所述第二缓存标识为多个预存缓存标识中的任意一个预存缓存标识；

所述存储控制模块(304)，用于判断所述第一缓存标识与所述第二缓存标识是否相同，若所述第一缓存标识和所述第二缓存标识相同，则根据所述缓存标识与缓存图像的对应关系，调取所述第二缓存标识对应的第一缓存图像，以显示所述第一缓存图像。

9.一种电子设备，其特征在于，包括处理器(401)、存储器(405)、用户接口(403)以及网络接口(404)，所述存储器(405)用于存储指令，所述用户接口(403)和所述网络接口(404)均用于与其他设备通信，所述处理器(401)用于执行所述存储器(405)中存储的指令，以使所述电子设备执行如权利要求1-7任意一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有指令，当所述指令被执行时，执行如权利要求1-7任意一项所述的方法。