图片渲染方法、装置和移动终端的制作方法_3

文档序号:9631389阅读:来源:国知局
r>[0096]图3示出了本发明的图片渲染装置的第一个实施例的结构框图。
[0097]如图3所示,本实施例的图片解码装置包括:
[0098]负责渲染的线程单元10、解码线程单元20,
[0099]所述负责渲染的线程单元10,用于在渲染网页时检测出准备渲染的图片为未解码图片,则创建所述图片的图片解码任务以供解码线程单元20根据图片的图片解码任务对所述图片进行解码,获取所述图片的信息,根据获取的图片信息渲染解码线程解码后的图片。
[0100]所述解码线程单元20,用于根据图片的图片解码任务对所述图片进行解码。
[0101]图4示出了本发明的图片渲染装置的第二个实施例的结构框图。
[0102]如图4所示,本实施例的图片渲染装置的所述负责渲染的线程单元10包括:检测模块400、任务创建模块401、任务管理模块402、第一判断模块403、任务选择模块404、线程池构建模块405、第二判断模块406、解码线程创建模块408、通信模块409、信息获取模块410、渲染模块411。所述解码线程单元20包括:解码模块407。
[0103]检测模块400,用于在渲染线程渲染网页时检测出准备渲染的图片为未解码图片。
[0104]渲染线程在渲染过程中是根据排版树的结构逐个对网页元素进行渲染。每个元素的信息可能记录在本地缓存的文件中,当执行渲染时,即渲染线程去相应的文件中获取当前元素的信息执行网页元素的渲染。
[0105]图片的图片数据是浏览器根据网页源代码解析出来的图片对应的地址向图片资源服务器请求的获取后存储于本地缓存中。而从图片资源服务器获取的图片数据在没有经过解码的情况下,渲染线程不能够直接渲染显示。必须先经过解码处理才能进行渲染显示,所以渲染线程在进行网页元素渲染前,首先要由检测模块400检测出网页元素的类型。如果是图片,就要检测图片是否是未解码图片。
[0106]检测模块400检测出准备渲染的图片没有解码时,就由任务创建模块401创建所述图片的图片解码任务。
[0107]创建完图片解码任务后,任务管理模块402将所述图片解码任务加入图片解码队列中。之后,第一判断模块403判断图片解码线程池是否已经构建。
[0108]如果线程池已经构建,则由任务选择模块404从图片解码任务队列选择一个图片解码任务加入解码线程池中。
[0109]如果解码线程池还没构建,则由线程池构建模块405构建包含一个或多个解码线程的图片解码线程池。
[0110]第二判断模块406判断解码线程池中是否有可用的解码线程。
[0111]如果有可用的解码线程,则由解码模块407对图片进行解码。这里需要解码线程池先唤醒可用的解码线程,然后由可用的解码线程的解码模块407对图片进行解码
[0112]如果没有可用的解码线程,则由解码线程创建模块408创建解码线程或者等待解码线程完成解码任务,然后由解码模块407对图片进行解码
[0113]在解码完成之前,渲染线程渲染模块411继续进行下一网页元素的渲染工作,暂不执行该图片的渲染动作。
[0114]解码完成后,通信模块409通知渲染线程进行该图片的渲染。
[0115]在进行该图片渲染前,由信息获取模块410获取所述图片的信息。
[0116]这里的图片信息包括所述图片需要渲染的位置及大小信息。信息获取模块410其实是从图片映射表中获取所述图片需要渲染的位置及大小信息。
[0117]所述图片需要渲染的位置及大小信息是在进行网页排版时计算出来的,在进行网页排版时,负责网页排版的线程对图片进行初步解析得到图片大小,然后根据网页排版需要计算出图片要渲染显示的位置和需要渲染显示的大小。需要注意的是,解析出来的图片大小与图片渲染显示的大小并不一定相同,因为浏览器会综合很多方面的因素,比如显示屏的大小、网页缩放等因素对图片进行缩放。所以从资源服务器获取的图片的大小为100*100像素,最后经过排版计算后需要渲染显示的大小为50*50。
[0118]负责排版的线程完成对图片进行初步解析,然后根据网页排版需要计算出图片要渲染显示的位置和需要渲染显示的大小后,将图片要渲染显示的位置和需要渲染显示的大小信息传输给渲染线程,渲染线程收到图片的这些信息后就将这些信息记录在图片映射表中。
[0119]图片映射表的key值为图片对象指针,value值为需要绘制的图片的在网页中出现过的所有矩形区域的叠加值。
[0120]此图片映射表中记录的图片在网页中要渲染显示的位置包括历史位置和最新的位置,即图片在网页中可能存在的所有位置。由于目前大多数网页为动态网页,图片很可能是不断发生位置、形状等变化。因此,在不同时间段中,图片在网页中所处的位置很可能也不一样。在图片映射表中记录的图片渲染显示的位置是叠加记录每一次网页渲染显示时图片的所在位置。同时由于同一个网页中可能出现多个完全一样的图片,而图片原始数据其实只有一份,所以仅需对一张图片进行解码,但解码完成后,图片可能需要渲染在页面的多个区域。所以本实施例需要在图片映射表中叠加记录图片出现过的所有位置,即包括历史位置和最新的位置。
[0121]在解码模块407完成图片的解码,信息获取模块410又获取到了图片需要渲染的位置和大小信息后,渲染线程的渲染模块411根据获取图片需要渲染的位置和大小信息渲染对已经完成解码的图片进行渲染。
[0122]本实施例的图片渲染装置,负责渲染的线程单元在渲染网页元素时检测到未解码图片时,为所述图片创建图片解码任务以供解码线程单元根据图片的图片解码任务对所述图片进行解码,同时负责渲染的线程单元获取所述图片的信息,最后根据记录的图片信息渲染解码线程单元解码的图片。将解码工作从负责渲染的线程单元中分离出来,由解码线程进行图片的解码。在解码线程进行图片解码的时候,负责渲染的渲染线程或者主线程可以进行下一任务的工作,将图片解码的工作分离出来释放了主线程或者渲染线程的压力,加快了网页渲染渲染速度,能有效避免浏览网页时产生的卡顿现象。
[0123]图5示出了本发明的图片解码装置的第三个实施例的结构框图。
[0124]如图5所示,在优选的实施例中,在图片解码过程中,除了包含图4所示的实施例的模块以外,还包括用户行为检测模块500、检查模块501和第一删除模块502。
[0125]用户行为检测模块500,用于检测用户操作行为是否导致了网页可视区域发生变化。这里的用户操作行为包括用户滚动网页或者打开新网页等等操作。由于网页可视区域将是不断发生变化的。为此,在本优选实施例中当用户行为检测模块500检测到用户操作导致了网页可视区域发生变化时,检查模块501检查图片解码队列中的图片是否已不在可视区域预设阈值范围内,若是,则由第一删除模块502在图片解码队列中删除所述图片对应的图片解码任务和在图片映射表中删除所述图片需要渲染的位置及大小信息。通过上述步骤的处理后,可保证当前正解码的图片,在可视区域范围内,而非可视区域的图片,将不浪费CPU时间对其进行解码。
[0126]图6示出了本发明的图片解码装置的第四实施例的结构框图。
[0127]如图6所示,在优选的实施例中本发明的图片渲染装置,在图片解码过程中,除了包含图4所示的实施例的模块以外,还包括缓存模块600、第二删除模块601和可视范围检测模块602。解码模块407执行完图片解码后,缓存模块600会对已经完成解码的图片的图片解码数据进行缓存。进行图片解码数据缓存是为了尽量减少图片解码时间。
[0128]缓存下解码完成后的图片数据,超过缓存阈值时则会由第二删除模块601清理缓存模块600中的已经完成解码的图片的图片解码数据。然而由于在一个页面的可视范围内,图片数据量非常大,导致图片缓存池空间不够用。所以会出现第二删除模块601不断的清理图片缓存,同时又由解码模块407不断对图片进行解码。这样会导致前一瞬间图片解码数据存在,能够绘制出图片,而随后由于缓存满了,该图片解码数据被清理掉了。此时本实施例会使用另外一个线程的解码模块407对该图片进行解码。在解码完成之前,渲染模块411将不渲染显示该图片,所以在此过程中用户将看不到图片,待图片解码完成后,图片又被渲染模块411渲染显示出来,这样会导致页面出现图片不断闪烁的问题。
[0129]为了解决上述问题,在优选的实施方式中,在第二删除模块601进行图片解码数据缓存清理时,不清理缓存中的确定处于可视区域预设阈值范围内的图片的图片解码数据。也就是说在清理缓存中的图片解码数据之前,也会由可视范围检测模块602检测准备删除的图片是否存在于可视预设阈值区域中,如果是,则不管缓存是否已满,该图片的图片解码数据均不从缓存中删除。这样有效避免出现页面出现图片不断闪烁的问题。
[0130]本优选实施例中的可视区域预设阈值范围跟前面实施例子所讲的可视区域预设阈值范围可以是相同的意思。即可以是当前屏幕正在显示的区域范围,也可以是当前正在显示范围以外的预设阈值区域范围,例如可以是当前页面后的一屏页面范围,或者多屏页面范围。
[0131]图7为本发明的移动终端一个实施例的系统结构图。
[0132]如图7所示,本发明的移动终端包含浏览器引擎、渲染引擎、网络、JS解释器和存储器。
[0133]其中用户界面包括地址栏、后退/前进按钮、书签目录等,也就是用户所看到的除了用来显示用户所请求页面的主窗口之外的其他部分。
[0134]浏览器引擎,用于查询及操作渲染引擎的接口。
[0135]渲染引擎,用于显示用户
当前第3页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1