CN105389159A - 图片渲染方法、装置和移动终端 - Google Patents

Abstract

本发明公开了一种图片渲染方法、装置和移动终端。该方法中，负责渲染的线程在渲染网页时检测出准备渲染的图片为未解码图片，创建所述图片的图片解码任务以供解码线程根据图片的图片解码任务对所述图片进行解码；获取所述图片的信息；根据获取的图片信息渲染所述解码线程解码后的图片。由于本发明使用单独解码线程进行图片解码，使得负责渲染的线程能够在检测到未解码的图片时将解码任务交由解码线程进行解码，而负责渲染的线程则可以进行下一网页元素的渲染工作，因此将图片解码的工作从负责渲染的线程中分离出来，释放了负责渲染的线程的压力，加快了网页渲染渲染速度，能有效避免浏览网页时产生的卡顿现象。

Description

图片渲染方法、装置和移动终端

技术领域

本发明涉及移动通信技术领域，更为具体地，涉及图片渲染方法、装置及移动终端。

背景技术

网页页面中包含很多网页元素，例如图片，文字还有视频等。目前Chrome、android自带浏览器及第三方浏览器(如UC浏览器)等浏览器的渲染工作有两种执行方式，一种是在主线程完成，一种是在渲染线程完成。两种方式在网页渲染时执行方式类似。在页面渲染的过程中，如发现需要渲染的图片未进行图片解码，则首先需对该图片进行解码，解码完成后再对图片进行渲染，之后才能进行下一网页元素的处理。

在网页渲染过程中图片解码是一个很耗时的工作。特别对于拥有多图或者大图的网页来说，图片解码耗时是影响网页渲染效率最主要的因素，也是影响浏览器整体性能的主要因素。如果网页图片过大或者网页图片很多都会导致网页渲染速度慢，网页渲染效率低。在主线程或者渲染线程进行大图片渲染或者多图片网页的渲染时，由于主线程或者渲染线程正在进行图片解码，而不能执行其它任务，导致主线程或者渲染线程的网页渲染效率低，甚至出现堵塞出现卡顿现象。

同时如果在渲染线程或者主线程网页渲染过程中正在进行图片的解码，此时用户进行屏幕操作，比如划屏或者点击网页的控件等，由于此时主线程或者渲染线程正在进行图片解码，而不能执行其它任务，浏览器也出现卡顿现象。

所以，现有方法中，浏览器的渲染线程或者主线程在进行网页的大图渲染或者多图渲染时，由于在进行图片的解码，而不能进行其它工作会导致浏览器出现渲染速度慢，效率低，甚至出现阻塞卡顿或者会导致用户划屏卡顿。

发明内容

鉴于上述问题，本发明的目的是提供一种图片渲染方法、装置及移动终端，能加快网页渲染的渲染速度，有效避免浏览网页时产生的卡顿现象。

根据本发明的一个方面，提供一种图片渲染方法，包括：

负责渲染的线程在渲染网页时检测出准备渲染的图片为未解码图片，则创建所述图片的图片解码任务以供解码线程根据图片的图片解码任务对所述图片进行解码；

获取所述图片的信息；

根据获取的图片信息渲染所述解码线程解码后的图片。

还包括：构建包含一个或多个解码线程的图片解码线程池；

所述图片的图片解码任务创建完成后，由图片解码线程池中一个可用解码线程对所述图片进行解码。

还包括：将所述图片解码任务加入图片解码队列，所述解码线程根据图片解码队列对所述图片进行解码。

其中，负责渲染的线程获取所述图片的信息包括：负责渲染的线程从图片映射表中获取所述图片需要渲染的位置及大小信息；

其中，负责渲染的线程根据获取的图片信息渲染解码线程解码后的图片包括：

负责渲染的线程根据从图片映射表中获取的所述图片需要渲染的位置及大小信息渲染所述解码线程解码后的图片。

还包括：当检测到图片不在可视区域的预设范围内时，则在图片解码队列中删除所述图片对应的图片解码任务和/或在所述图片映射表删除所述图片的信息。

还包括：对已经完成解码的图片的图片解码数据进行缓存；

在进行图片解码数据缓存清理时，保留缓存中的确定处于可视区域预设阈值范围内的图片的图片解码数据。

另一方面，本发明还提供一种图片渲染装置，包括：负责渲染的线程单元、解码线程单元，

所述负责渲染的线程单元，用于在渲染网页时检测出准备渲染的图片为未解码图片，则创建所述图片的图片解码任务以供解码线程单元根据图片的图片解码任务对所述图片进行解码，获取所述图片的信息，根据获取的图片信息渲染解码线程解码后的图片；

所述解码线程单元，用于根据图片的图片解码任务对所述图片进行解码。

其中，所述负责渲染的线程单元包括：

检测模块，用于在渲染网页时检测出准备渲染的图片为未解码图片；

任务创建模块，用于创建所述图片的图片解码任务；

信息获取模块，用于获取所述图片的信息；

渲染模块，用于根据信息获取模块获取的图片信息渲染已经完成解码的图片；

其中，所述解码线程单元包括：

解码模块，用于根据图片的图片解码任务对图片进行解码。

其中，所述负责渲染的线程单元还包括：线程池构建模块，所述线程池构建模块用于构建包括至少一个解码线程的图片解码线程池。

其中，所述负责渲染的线程单元还包括：任务管理模块，用于将所述图片解码任务加入图片解码队列以供所述解码线程单元的解码模块根据图片解码队列对所述图片进行解码。

还包括：

用户行为检测模块，用于检测用户操作行为是否导致了网页可视区域发生变化；

检查模块，用于在用户行为检测模块检测到用户操作时，检查图片解码队列中的图片是否已不在可视区域预设阈值范围内；

第一删除模块，用于检查模块检查出图片不在所述可视区域预设阈值范围内时，在图片解码队列中删除所述图片对应的图片解码任务和在图片映射表中删除所述图片需要渲染的位置及大小信息。

还包括：缓存模块，用于缓存已经完成解码的图片的图片解码数据；

第二删除模块，用于清理缓存模块中的已经完成解码的图片的图片解码数据。

本发明还提供一种移动终端，包括存储器、图片渲染装置，

所述图片渲染装置包括负责渲染的线程单元、解码线程单元，

所述负责渲染的线程单元，用于在渲染网页时检测出准备渲染的图片为未解码图片，则创建所述图片的图片解码任务以供解码线程单元根据图片的图片解码任务对所述图片进行解码，获取所述图片的信息，根据获取的图片信息渲染解码线程解码后的图片；

所述解码线程单元，用于根据图片的图片解码任务对所述图片进行解码；

所述图片渲染装置从存储器中获取图片数据进行图片渲染。

本发明的图片渲染方法、装置和移动终端，负责渲染的线程在渲染网页元素时检测到未解码图片时，记录所述图片的信息，然后为所述图片创建图片解码任务以供解码线程根据图片的图片解码任务对所述图片进行解码；最后负责渲染的线程根据获取的图片信息渲染解码线程解码的图片。由于本发明使用单独解码线程进行图片解码，使得负责渲染的线程能够在检测到未解码的图片时将解码任务交由解码线程进行解码，从而负责渲染的线程则可以进行下一网页元素的渲染工作。该方法将图片解码的工作从负责渲染的线程中分离出来，释放了负责渲染的线程的压力，加快了网页渲染的渲染速度，能有效避免浏览网页时产生的卡顿现象。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中：

图1示出了根据本发明图片渲染方法的一个实施例的流程图；

图2示出了本发明的图片渲染方法另一个实施例的详细流程图；

图3示出了本发明的图片渲染装置的第一个实施例的结构框图；

图4示出了本发明的图片渲染装置的第二个实施例的结构框图；

图5示出了本发明的图片解码装置的第三个实施例的结构框图；

图6示出了本发明的图片解码装置的第四个实施例的结构框图；

图7为本发明的移动终端一个实施例的系统结构图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

以下将结合附图对本发明的具体实施例进行详细描述。

本发明的图片渲染方法、装置和移动终端，负责渲染的线程在渲染网页元素时检测到未解码图片时，记录所述图片的信息，然后为所述图片创建图片解码任务以供解码线程根据图片的图片解码任务对所述图片进行解码；最后负责渲染的线程根据获取的图片信息渲染解码线程解码的图片。由于本发明使用单独解码线程进行图片解码，使得负责渲染的线程能够在检测到未解码的图片时将解码任务交由解码线程进行解码，而负责渲染的线程则可以进行下一网页元素的渲染工作。将图片解码的工作从负责渲染的线程中分离出来，释放了负责渲染的线程的压力，加快了网页渲染渲染速度，能有效避免浏览网页时产生的卡顿现象。

通常情况下，在网页元素的渲染显示是在渲染线程完成的，本发明的下面的实施例以渲染线程执行渲染显示为例进行说明，即负责渲染的线程为渲染线程进行具体说明。本领域技术人员应该理解，在网页元素的渲染显示也可能是在主线程执行，执行原理与渲染线程类似，这里不赘述。

图1示出了根据本发明图片渲染方法的一个实施例的流程图。

如图1所示本实施例的图片渲染方法，包括：

S100,负责渲染的线程在渲染网页时检测出准备渲染的图片为未解码图片，则创建所述图片的图片解码任务以供解码线程根据图片的图片解码任务对所述图片进行解码。

目前通常的浏览器在进行网页的显示过程通常流程如下：首先会对获取的网页源代码进行解析，然后根据解析结果生成网页的DOM树，之后根据网页的DOM树对网页进行排版。完成排版之后，对网页进行渲染显示。

目前网页源代码的解析，网页的排版和网页的渲染是异步执行进行的，即并不要求完成整个网页的源代码的解析之后再进行网页的排版，并不是必须完成所有的网页元素的排版之后再进行网页元素的渲染。对网页源代码的解析，网页的排版，以及网页的渲染是在不同的线程中执行。当然现在也有同步执行的情况，即完成一段网页源代码的解析，就对这段源代码中涉及的网页元素进行网页的排版，之后对这些元素进行渲染显示，这种情况下网页源代码的解析，网页元素的排版，网页元素的渲染显示都在主线程中执行。

所以可以看出一个网页元素要渲染之前所述网页元素的排版工作已经完成。

渲染线程在渲染网页的网页元素时，当准备渲染的网页元素为图片时，首先需要检测这个图片是否已经解码，如果没有解码，则需要先进行图片解码。解码完成之后才能进行图片类网页元素的渲染。

S101,负责渲染的线程获取所述图片的信息。

负责渲染的线程如果为渲染线程，即渲染线程获取渲染图片时需要的图片信息，这里的图片信息包括记录在图片映射表中的所述图片需要渲染的位置及大小信息。这里的位置及大小信息是在进行图片元素排版时确定的。

S102,负责渲染的线程根据获取的图片信息渲染解码线程解码后的图片。

渲染线程根据获取的所述图片需要渲染的位置及大小信息渲染解码线程解码后的图片。

图2示出了本发明的图片渲染方法另一个实施例的详细流程图。

如图2所示本实施例的图片渲染方法包括：

S200,渲染线程在渲染网页时检测到准备渲染的图片为未解码图片。

网页中包含很多网页元素，包括图片，文字还有视频等。在浏览器进行网页渲染时，渲染线程在渲染过程中是根据每个网页的排版树的结构逐个对网页元素进行渲染。每个网页元素的信息记录在本地缓存的文件中，当执行渲染时，即渲染线程去相应的文件中获取当前元素的信息执行网页元素的渲染。

浏览器解析网页源代码时会解析出获取图片的图片资源服务器地址，浏览器根据该地址向资源服务器获取图片数据，获取后存储于本地缓存中。图片资源服务器获取的图片数据在没有经过解码的情况下，渲染线程不能够直接渲染显示。因为必须先经过解码处理才能进行渲染显示，所以渲染线程在进行网页元素渲染前，首先要检测出网页元素的类型。如果是图片，就要检测图片是否是未解码图片。

在检测到图片需要解码之后，就执行S210，创建所述图片的图片解码任务。创建完图片解码任务后，将所述图片解码任务加入图片解码队列中(S220)。之后执行S230，判断图片解码线程池是否已经构建。

图片解码线程池中的线程用于执行图片解码任务，图片解码任务创建完成的同时，将立即通知唤醒解码线程进行图片解码，在没有图片解码任务时，线程池中的所有线程处于挂起状态。在实际实现中，图片解码线程池中仅生成了一个线程，但在图片解码任务很多的时候可以快速扩展出更多的图片解码线程加入到线程池中。

如果图片解码线程池已经构建，则图片解码任务队列选择一个图片解码任务加入解码线程池中(S240)。

如果解码线程池还没构建，则构建包含一个或多个解码线程的图片解码线程池(S231)。

完成S240或者S231后，进一步判断解码线程池中是否有可用的解码线程(S250)。

如果有可用的解码线程，则通知解码线程对图片进行解码(S260)。这里解码线程池先唤醒可用的解码线程，然后由可用的解码线程对图片进行解码。

如果没有可用的解码线程，则执行S251,创建解码线程或者等待解码线程完成解码任务,然后进入S260。

在解码完成之前，渲染线程继续进行下一网页元素的渲染工作，暂不执行该图片的绘制动作。

解码完成后，解码线程通知渲染线程进行该图片的渲染(S270)。

在进行该图片渲染前，渲染线程先执行S280,获取所述图片的信息。

这里的图片信息包括所述图片需要渲染的位置及大小信息。这个步骤其实是渲染线程从图片映射表中获取所述图片需要渲染的位置及大小信息。

所述图片需要渲染的位置及大小信息是在进行网页排版时计算出来的，在进行网页排版时，负责网页排版的线程对图片进行初步解析得到图片大小，然后根据网页排版需要计算出图片要渲染显示的位置和需要渲染显示的大小。本步骤中需要注意，解析出来的图片大小与图片渲染显示的大小并不一定相同，因为浏览器会综合很多方面的因素，比如显示屏的大小、网页缩放等因素对图片进行缩放。所以从资源服务器获取的图片的大小为100*100像素，最后经过排版计算后后需要渲染显示的大小为50*50。

负责排版的线程完成对图片进行初步解析，然后根据网页排版需要计算出图片要渲染显示的位置和需要渲染显示的大小后，将图片要渲染显示的位置和需要渲染显示的大小信息传输给渲染线程，渲染线程收到图片的这些信息后就将这些信息记录在图片映射表中。

图片映射表的key值为图片对象指针，value值为需要绘制的图片的在网页中出现过的所有矩形区域的叠加值。

图片映射表中记录的图片在网页中要渲染显示的位置包括历史位置和最新的位置，即图片在网页中可能存在的所有位置。由于目前大多数网页为动态网页，网页中很多图片是不断发生位置、形状等变化。因此，在不同时间段中，图片在网页中所处的位置很可能也不一样。在图片映射表中记录的图片渲染显示的位置是叠加记录每一次网页渲染显示时图片的所在位置。同时由于同一个网页中可能出现多个完全一样的图片，而图片原始数据其实只有一份，所以仅需对一张图片进行解码，但解码完成后，图片可能需要渲染在页面的多个区域。所以本实施例需要在图片映射表中叠加记录图片出现过的所有位置，即包括历史位置和最新的位置。

在完成图片的解码，又获取到了图片需要渲染的位置和大小信息后，执行S290,根据获取图片需要渲染的位置和大小信息对已经完成解码的图片进行渲染。

本领域技术人员应该知道上述步骤中的S280的顺序可以改变，可以在S200之后，S290之前的任意步骤执行。

本实施例的图片渲染方法，负责渲染的线程在渲染网页元素时检测到未解码图片时，记录所述图片的信息，然后为所述图片创建图片解码任务以供解码线程根据图片的图片解码任务对所述图片进行解码；最后负责渲染的线程根据获取的图片信息渲染解码线程解码的图片。由于本发明使用单独解码线程进行图片解码，使得负责渲染的线程能够在检测到未解码的图片时将解码任务交由解码线程进行解码，而负责渲染的线程则可以进行下一网页元素的渲染工作。将图片解码的工作从负责渲染的线程中分离出来，释放了负责渲染的线程的压力，加快了网页渲染渲染速度，能有效避免浏览网页时产生的卡顿现象。

在优选的实施例中，在图片解码过程中，当检测到用户操作时，例如用户滚动网页，或者打开新网页等等操作。可能会导致网页可视区域发生变化。为此，在本优选实施例中会在网页可视区域发生变化时，检测图片解码任务中的图片是否已不在可视区域预设阈值范围内，若是，则将所述图片对应的图片解码任务及其在所对应的图片映射表中记录的所述图片信息删除。通过上述步骤的处理后，可保证当前正解码的图片，在可视区域范围内，而非可视区域的图片，将不浪费CPU对其进行解码。

在另一优选的实施例中，执行完S260后，浏览器会对已经完成解码的图片的图片解码数据进行缓存。进行图片解码数据缓存是为了尽量减少图片解码时间。

缓存下解码完成后的图片数据，超过缓存阈值时则会进行缓存清理。然而由于在一个页面的可视范围内，图片数据量非常大，导致图片缓存池空间不够用。所以浏览器会出现不断的清理图片缓存，同时解码线程又不断对图片进行解码。这样会导致前一瞬间图片解码数据存在，能够绘制出图片，而随后由于缓存满了，该图片解码数据被清理掉了。此时本实施例会使用另外一个解码线程对该图片进行解码。在解码完成之前，将不渲染显示该图片，所以在此过程中用户将看不到图片，待图片解码完成后，图片又被渲染显示出来，这样会导致页面出现图片不断闪烁的问题。

为了解决上述问题，在优选的实施方式中，在进行图片解码数据缓存清理时，保留缓存中的确定处于可视区域预设阈值范围内的图片的图片解码数据。也就是说在清理缓存中的图片解码数据之前，也会检测准备删除的图片是否存在于可视预设阈值区域中，如果是，则不管缓存是否已满，该图片的图片解码数据均不从缓存中删除。这样有效避免出现进行网页浏览时页面图片不断闪烁的问题。

本优选实施例中的可视区域预设阈值范围跟前面实施例子所讲的可视区域预设阈值范围可以是相同的意思。即可以是当前屏幕正在显示的区域范围，也可以是当前正在显示范围以外的预设阈值区域范围，例如可以是当前页面以后的一屏页面范围，或者多屏页面范围。

图3示出了本发明的图片渲染装置的第一个实施例的结构框图。

如图3所示，本实施例的图片解码装置包括：

负责渲染的线程单元10、解码线程单元20，

所述负责渲染的线程单元10，用于在渲染网页时检测出准备渲染的图片为未解码图片，则创建所述图片的图片解码任务以供解码线程单元20根据图片的图片解码任务对所述图片进行解码，获取所述图片的信息，根据获取的图片信息渲染解码线程解码后的图片。

所述解码线程单元20，用于根据图片的图片解码任务对所述图片进行解码。

图4示出了本发明的图片渲染装置的第二个实施例的结构框图。

如图4所示，本实施例的图片渲染装置的所述负责渲染的线程单元10包括：检测模块400、任务创建模块401、任务管理模块402、第一判断模块403、任务选择模块404、线程池构建模块405、第二判断模块406、解码线程创建模块408、通信模块409、信息获取模块410、渲染模块411。所述解码线程单元20包括：解码模块407。

检测模块400，用于在渲染线程渲染网页时检测出准备渲染的图片为未解码图片。

渲染线程在渲染过程中是根据排版树的结构逐个对网页元素进行渲染。每个元素的信息可能记录在本地缓存的文件中，当执行渲染时，即渲染线程去相应的文件中获取当前元素的信息执行网页元素的渲染。

图片的图片数据是浏览器根据网页源代码解析出来的图片对应的地址向图片资源服务器请求的获取后存储于本地缓存中。而从图片资源服务器获取的图片数据在没有经过解码的情况下，渲染线程不能够直接渲染显示。必须先经过解码处理才能进行渲染显示，所以渲染线程在进行网页元素渲染前，首先要由检测模块400检测出网页元素的类型。如果是图片，就要检测图片是否是未解码图片。

检测模块400检测出准备渲染的图片没有解码时，就由任务创建模块401创建所述图片的图片解码任务。

创建完图片解码任务后，任务管理模块402将所述图片解码任务加入图片解码队列中。之后，第一判断模块403判断图片解码线程池是否已经构建。

如果线程池已经构建，则由任务选择模块404从图片解码任务队列选择一个图片解码任务加入解码线程池中。

如果解码线程池还没构建，则由线程池构建模块405构建包含一个或多个解码线程的图片解码线程池。

第二判断模块406判断解码线程池中是否有可用的解码线程。

如果有可用的解码线程，则由解码模块407对图片进行解码。这里需要解码线程池先唤醒可用的解码线程，然后由可用的解码线程的解码模块407对图片进行解码

如果没有可用的解码线程，则由解码线程创建模块408创建解码线程或者等待解码线程完成解码任务,然后由解码模块407对图片进行解码

在解码完成之前，渲染线程渲染模块411继续进行下一网页元素的渲染工作，暂不执行该图片的渲染动作。

解码完成后，通信模块409通知渲染线程进行该图片的渲染。

在进行该图片渲染前，由信息获取模块410获取所述图片的信息。

这里的图片信息包括所述图片需要渲染的位置及大小信息。信息获取模块410其实是从图片映射表中获取所述图片需要渲染的位置及大小信息。

所述图片需要渲染的位置及大小信息是在进行网页排版时计算出来的，在进行网页排版时，负责网页排版的线程对图片进行初步解析得到图片大小，然后根据网页排版需要计算出图片要渲染显示的位置和需要渲染显示的大小。需要注意的是，解析出来的图片大小与图片渲染显示的大小并不一定相同，因为浏览器会综合很多方面的因素，比如显示屏的大小、网页缩放等因素对图片进行缩放。所以从资源服务器获取的图片的大小为100*100像素，最后经过排版计算后需要渲染显示的大小为50*50。

负责排版的线程完成对图片进行初步解析，然后根据网页排版需要计算出图片要渲染显示的位置和需要渲染显示的大小后，将图片要渲染显示的位置和需要渲染显示的大小信息传输给渲染线程，渲染线程收到图片的这些信息后就将这些信息记录在图片映射表中。

图片映射表的key值为图片对象指针，value值为需要绘制的图片的在网页中出现过的所有矩形区域的叠加值。

此图片映射表中记录的图片在网页中要渲染显示的位置包括历史位置和最新的位置，即图片在网页中可能存在的所有位置。由于目前大多数网页为动态网页，图片很可能是不断发生位置、形状等变化。因此，在不同时间段中，图片在网页中所处的位置很可能也不一样。在图片映射表中记录的图片渲染显示的位置是叠加记录每一次网页渲染显示时图片的所在位置。同时由于同一个网页中可能出现多个完全一样的图片，而图片原始数据其实只有一份，所以仅需对一张图片进行解码，但解码完成后，图片可能需要渲染在页面的多个区域。所以本实施例需要在图片映射表中叠加记录图片出现过的所有位置，即包括历史位置和最新的位置。

在解码模块407完成图片的解码，信息获取模块410又获取到了图片需要渲染的位置和大小信息后，渲染线程的渲染模块411根据获取图片需要渲染的位置和大小信息渲染对已经完成解码的图片进行渲染。

本实施例的图片渲染装置，负责渲染的线程单元在渲染网页元素时检测到未解码图片时，为所述图片创建图片解码任务以供解码线程单元根据图片的图片解码任务对所述图片进行解码，同时负责渲染的线程单元获取所述图片的信息，最后根据记录的图片信息渲染解码线程单元解码的图片。将解码工作从负责渲染的线程单元中分离出来，由解码线程进行图片的解码。在解码线程进行图片解码的时候，负责渲染的渲染线程或者主线程可以进行下一任务的工作，将图片解码的工作分离出来释放了主线程或者渲染线程的压力，加快了网页渲染渲染速度，能有效避免浏览网页时产生的卡顿现象。

图5示出了本发明的图片解码装置的第三个实施例的结构框图。

如图5所示，在优选的实施例中，在图片解码过程中，除了包含图4所示的实施例的模块以外，还包括用户行为检测模块500、检查模块501和第一删除模块502。

用户行为检测模块500，用于检测用户操作行为是否导致了网页可视区域发生变化。这里的用户操作行为包括用户滚动网页或者打开新网页等等操作。由于网页可视区域将是不断发生变化的。为此，在本优选实施例中当用户行为检测模块500检测到用户操作导致了网页可视区域发生变化时，检查模块501检查图片解码队列中的图片是否已不在可视区域预设阈值范围内，若是，则由第一删除模块502在图片解码队列中删除所述图片对应的图片解码任务和在图片映射表中删除所述图片需要渲染的位置及大小信息。通过上述步骤的处理后，可保证当前正解码的图片，在可视区域范围内，而非可视区域的图片，将不浪费CPU时间对其进行解码。

图6示出了本发明的图片解码装置的第四实施例的结构框图。

如图6所示，在优选的实施例中本发明的图片渲染装置，在图片解码过程中，除了包含图4所示的实施例的模块以外，还包括缓存模块600、第二删除模块601和可视范围检测模块602。解码模块407执行完图片解码后，缓存模块600会对已经完成解码的图片的图片解码数据进行缓存。进行图片解码数据缓存是为了尽量减少图片解码时间。

缓存下解码完成后的图片数据，超过缓存阈值时则会由第二删除模块601清理缓存模块600中的已经完成解码的图片的图片解码数据。然而由于在一个页面的可视范围内，图片数据量非常大，导致图片缓存池空间不够用。所以会出现第二删除模块601不断的清理图片缓存，同时又由解码模块407不断对图片进行解码。这样会导致前一瞬间图片解码数据存在，能够绘制出图片，而随后由于缓存满了，该图片解码数据被清理掉了。此时本实施例会使用另外一个线程的解码模块407对该图片进行解码。在解码完成之前，渲染模块411将不渲染显示该图片，所以在此过程中用户将看不到图片，待图片解码完成后，图片又被渲染模块411渲染显示出来，这样会导致页面出现图片不断闪烁的问题。

为了解决上述问题，在优选的实施方式中，在第二删除模块601进行图片解码数据缓存清理时，不清理缓存中的确定处于可视区域预设阈值范围内的图片的图片解码数据。也就是说在清理缓存中的图片解码数据之前，也会由可视范围检测模块602检测准备删除的图片是否存在于可视预设阈值区域中，如果是，则不管缓存是否已满，该图片的图片解码数据均不从缓存中删除。这样有效避免出现页面出现图片不断闪烁的问题。

本优选实施例中的可视区域预设阈值范围跟前面实施例子所讲的可视区域预设阈值范围可以是相同的意思。即可以是当前屏幕正在显示的区域范围，也可以是当前正在显示范围以外的预设阈值区域范围，例如可以是当前页面后的一屏页面范围，或者多屏页面范围。

图7为本发明的移动终端一个实施例的系统结构图。

如图7所示，本发明的移动终端包含浏览器引擎、渲染引擎、网络、JS解释器和存储器。

其中用户界面包括地址栏、后退/前进按钮、书签目录等，也就是用户所看到的除了用来显示用户所请求页面的主窗口之外的其他部分。

浏览器引擎，用于查询及操作渲染引擎的接口。

渲染引擎，用于显示用户请求的网页内容，例如，如果请求内容为html，负责解析html及css，并将解析后的结果显示出来。即负责网页解析、排版、渲染绘制网页内容到屏幕。

网络，用于完成网络调用，例如通过渲染引擎解析出来的网页存在http请求，则根据http请求去网络服务器获取对应的网页资源，例如图片、视频等。然后供渲染引擎进行渲染显示。网络具有平台无关的接口，可以在不同平台上工作。

JS解释器，用来解释执行JS代码。JS代码是渲染引擎通过网页解析后，发现存在JS代码，然后交由JS解释器对JS代码进行解释执行。

存储器，包括永久性存储器和缓存。移动终端的浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了webdatabase技术，是一种轻量级完整的客户端存储技术。渲染引擎的图片渲染装置从存储器中获取图片数据进行图片渲染。

其中所述渲染引擎包括图片渲染装置。所述图片渲染装置包括负责渲染的线程单元10和解码线程单元20。负责渲染的线程单元10在渲染网页时检测出准备渲染的图片为未解码图片，则创建所述图片的图片解码任务以供解码线程单元20根据图片的图片解码任务对所述图片进行解码；

然后负责渲染的线程单元10负责渲染的线程获取所述图片的信息；

最后负责渲染的线程单元10根据获取的图片信息渲染解码线程解码后的图片。

本领域普通技术人员可以意识到图7仅仅是本发明的包含本发明的图片渲染装置的移动终端的一种架构图，还存在很多变形的架构，或者还包含其它类似功能的模块。只要该移动终端的包含了本发明的图片渲染装置则视为本发明所保护的移动终端的变形。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的模块及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

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

另外，在本发明各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。

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

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (13)

1.一种图片渲染方法，包括：

负责渲染的线程在渲染网页时检测出准备渲染的图片为未解码图片，

则创建所述图片的图片解码任务以供解码线程根据图片的图片解码任务对所述图片进行解码；

获取所述图片的信息；

根据获取的图片信息渲染所述解码线程解码后的图片。

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

构建包含一个或多个解码线程的图片解码线程池；

所述图片的图片解码任务创建完成后，由图片解码线程池中一个可用解码线程对所述图片进行解码。

3.如权利要求1所述的图片渲染方法，还包括：将所述图片解码任务加入图片解码队列，所述解码线程根据图片解码队列对所述图片进行解码。

4.如权利要求3所述的图片渲染方法，其中，负责渲染的线程获取所述图片的信息包括：负责渲染的线程从图片映射表中获取所述图片需要渲染的位置及大小信息；

其中，负责渲染的线程根据获取的图片信息渲染解码线程解码后的图片包括：

负责渲染的线程根据从图片映射表中获取的所述图片需要渲染的位置及大小信息渲染所述解码线程解码后的图片。

5.如权利要求4所述的图片渲染方法，还包括：

当检测到图片不在可视区域的预设范围内时，则在图片解码队列中删除所述图片对应的图片解码任务和/或在所述图片映射表删除所述图片的信息。

6.如权利要求1-5任意一项所述的图片渲染方法，还包括：

对已经完成解码的图片的图片解码数据进行缓存；

在进行图片解码数据缓存清理时，保留缓存中的确定处于可视区域预设阈值范围内的图片的图片解码数据。

7.一种图片渲染装置，包括负责渲染的线程单元、解码线程单元，

所述负责渲染的线程单元，用于在渲染网页时检测出准备渲染的图片为未解码图片，则创建所述图片的图片解码任务以供解码线程单元根据图片的图片解码任务对所述图片进行解码，获取所述图片的信息，根据获取的图片信息渲染解码线程解码后的图片；

所述解码线程单元，用于根据图片的图片解码任务对所述图片进行解码。

8.如权利要求7所述的图片渲染装置，

其中，所述负责渲染的线程单元包括：

检测模块，用于在渲染网页时检测出准备渲染的图片为未解码图片；

任务创建模块，用于创建所述图片的图片解码任务；

信息获取模块，用于获取所述图片的信息；

渲染模块，用于根据信息获取模块获取的图片信息渲染已经完成解码的图片；

其中，所述解码线程单元包括：

解码模块，用于根据图片的图片解码任务对图片进行解码。

9.如权利要求7所述的图片渲染装置，其中，所述负责渲染的线程单元还包括：线程池构建模块，所述线程池构建模块用于构建包括至少一个解码线程的图片解码线程池。

10.如权利要求7所述的图片渲染装置，其中，所述负责渲染的线程单元还包括：任务管理模块，用于将所述图片解码任务加入图片解码队列以供所述解码线程单元的解码模块根据图片解码队列对所述图片进行解码。

11.如权利要求9或10所述的图片渲染装置，还包括：

用户行为检测模块，用于检测用户操作行为是否导致了网页可视区域发生变化；

检查模块，用于在用户行为检测模块检测到用户操作时，检查图片解码队列中的图片是否已不在可视区域预设阈值范围内；

第一删除模块，用于检查模块检查出图片不在所述可视区域预设阈值范围内时，在图片解码队列中删除所述图片对应的图片解码任务和在图片映射表中删除所述图片需要渲染的位置及大小信息。

12.如权利要求7-10任意一项所述的图片渲染装置，还包括：

缓存模块，用于缓存已经完成解码的图片的图片解码数据；

第二删除模块，用于清理缓存模块中的已经完成解码的图片的图片解码数据。

13.一种移动终端，包括存储器、图片渲染装置，

所述图片渲染装置包括负责渲染的线程单元、解码线程单元，

所述负责渲染的线程单元，用于在渲染网页时检测出准备渲染的图片为未解码图片，则创建所述图片的图片解码任务以供解码线程单元根据图片的图片解码任务对所述图片进行解码，获取所述图片的信息，根据获取的图片信息渲染解码线程解码后的图片；

所述解码线程单元，用于根据图片的图片解码任务对所述图片进行解码；

所述图片渲染装置从存储器中获取图片数据进行图片渲染。