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

文档序号:9631389阅读:来源:国知局
片渲染方法,包括:
[0059]S100,负责渲染的线程在渲染网页时检测出准备渲染的图片为未解码图片,则创建所述图片的图片解码任务以供解码线程根据图片的图片解码任务对所述图片进行解码。
[0060]目前通常的浏览器在进行网页的显示过程通常流程如下:首先会对获取的网页源代码进行解析,然后根据解析结果生成网页的D0M树,之后根据网页的D0M树对网页进行排版。完成排版之后,对网页进行渲染显示。
[0061]目前网页源代码的解析,网页的排版和网页的渲染是异步执行进行的,即并不要求完成整个网页的源代码的解析之后再进行网页的排版,并不是必须完成所有的网页元素的排版之后再进行网页元素的渲染。对网页源代码的解析,网页的排版,以及网页的渲染是在不同的线程中执行。当然现在也有同步执行的情况,即完成一段网页源代码的解析,就对这段源代码中涉及的网页元素进行网页的排版,之后对这些元素进行渲染显示,这种情况下网页源代码的解析,网页元素的排版,网页元素的渲染显示都在主线程中执行。
[0062]所以可以看出一个网页元素要渲染之前所述网页元素的排版工作已经完成。
[0063]渲染线程在渲染网页的网页元素时,当准备渲染的网页元素为图片时,首先需要检测这个图片是否已经解码,如果没有解码,则需要先进行图片解码。解码完成之后才能进行图片类网页元素的渲染。
[0064]S101,负责渲染的线程获取所述图片的信息。
[0065]负责渲染的线程如果为渲染线程,即渲染线程获取渲染图片时需要的图片信息,这里的图片信息包括记录在图片映射表中的所述图片需要渲染的位置及大小信息。这里的位置及大小信息是在进行图片元素排版时确定的。
[0066]S102,负责渲染的线程根据获取的图片信息渲染解码线程解码后的图片。
[0067]渲染线程根据获取的所述图片需要渲染的位置及大小信息渲染解码线程解码后的图片。
[0068]图2示出了本发明的图片渲染方法另一个实施例的详细流程图。
[0069]如图2所示本实施例的图片渲染方法包括:
[0070]S200,渲染线程在渲染网页时检测到准备渲染的图片为未解码图片。
[0071]网页中包含很多网页元素,包括图片,文字还有视频等。在浏览器进行网页渲染时,渲染线程在渲染过程中是根据每个网页的排版树的结构逐个对网页元素进行渲染。每个网页元素的信息记录在本地缓存的文件中,当执行渲染时,即渲染线程去相应的文件中获取当前元素的信息执行网页元素的渲染。
[0072]浏览器解析网页源代码时会解析出获取图片的图片资源服务器地址,浏览器根据该地址向资源服务器获取图片数据,获取后存储于本地缓存中。图片资源服务器获取的图片数据在没有经过解码的情况下,渲染线程不能够直接渲染显示。因为必须先经过解码处理才能进行渲染显示,所以渲染线程在进行网页元素渲染前,首先要检测出网页元素的类型。如果是图片,就要检测图片是否是未解码图片。
[0073]在检测到图片需要解码之后,就执行S210,创建所述图片的图片解码任务。创建完图片解码任务后,将所述图片解码任务加入图片解码队列中(S220)。之后执行S230,判断图片解码线程池是否已经构建。
[0074]图片解码线程池中的线程用于执行图片解码任务,图片解码任务创建完成的同时,将立即通知唤醒解码线程进行图片解码,在没有图片解码任务时,线程池中的所有线程处于挂起状态。在实际实现中,图片解码线程池中仅生成了一个线程,但在图片解码任务很多的时候可以快速扩展出更多的图片解码线程加入到线程池中。
[0075]如果图片解码线程池已经构建,则图片解码任务队列选择一个图片解码任务加入解码线程池中(S240)。
[0076]如果解码线程池还没构建,则构建包含一个或多个解码线程的图片解码线程池(S231)。
[0077]完成S240或者S231后,进一步判断解码线程池中是否有可用的解码线程(S250)。
[0078]如果有可用的解码线程,则通知解码线程对图片进行解码(S260)。这里解码线程池先唤醒可用的解码线程,然后由可用的解码线程对图片进行解码。
[0079]如果没有可用的解码线程,则执行S251,创建解码线程或者等待解码线程完成解码任务,然后进入S260。
[0080]在解码完成之前,渲染线程继续进行下一网页元素的渲染工作,暂不执行该图片的绘制动作。
[0081]解码完成后,解码线程通知渲染线程进行该图片的渲染(S270)。
[0082]在进行该图片渲染前,渲染线程先执行S280,获取所述图片的信息。
[0083]这里的图片信息包括所述图片需要渲染的位置及大小信息。这个步骤其实是渲染线程从图片映射表中获取所述图片需要渲染的位置及大小信息。
[0084]所述图片需要渲染的位置及大小信息是在进行网页排版时计算出来的,在进行网页排版时,负责网页排版的线程对图片进行初步解析得到图片大小,然后根据网页排版需要计算出图片要渲染显示的位置和需要渲染显示的大小。本步骤中需要注意,解析出来的图片大小与图片渲染显示的大小并不一定相同,因为浏览器会综合很多方面的因素,比如显示屏的大小、网页缩放等因素对图片进行缩放。所以从资源服务器获取的图片的大小为100*100像素,最后经过排版计算后后需要渲染显示的大小为50*50。
[0085]负责排版的线程完成对图片进行初步解析,然后根据网页排版需要计算出图片要渲染显示的位置和需要渲染显示的大小后,将图片要渲染显示的位置和需要渲染显示的大小信息传输给渲染线程,渲染线程收到图片的这些信息后就将这些信息记录在图片映射表中。
[0086]图片映射表的key值为图片对象指针,value值为需要绘制的图片的在网页中出现过的所有矩形区域的叠加值。
[0087]图片映射表中记录的图片在网页中要渲染显示的位置包括历史位置和最新的位置,即图片在网页中可能存在的所有位置。由于目前大多数网页为动态网页,网页中很多图片是不断发生位置、形状等变化。因此,在不同时间段中,图片在网页中所处的位置很可能也不一样。在图片映射表中记录的图片渲染显示的位置是叠加记录每一次网页渲染显示时图片的所在位置。同时由于同一个网页中可能出现多个完全一样的图片,而图片原始数据其实只有一份,所以仅需对一张图片进行解码,但解码完成后,图片可能需要渲染在页面的多个区域。所以本实施例需要在图片映射表中叠加记录图片出现过的所有位置,即包括历史位置和最新的位置。
[0088]在完成图片的解码,又获取到了图片需要渲染的位置和大小信息后,执行S290,根据获取图片需要渲染的位置和大小信息对已经完成解码的图片进行渲染。
[0089]本领域技术人员应该知道上述步骤中的S280的顺序可以改变,可以在S200之后,S290之前的任意步骤执行。
[0090]本实施例的图片渲染方法,负责渲染的线程在渲染网页元素时检测到未解码图片时,记录所述图片的信息,然后为所述图片创建图片解码任务以供解码线程根据图片的图片解码任务对所述图片进行解码;最后负责渲染的线程根据获取的图片信息渲染解码线程解码的图片。由于本发明使用单独解码线程进行图片解码,使得负责渲染的线程能够在检测到未解码的图片时将解码任务交由解码线程进行解码,而负责渲染的线程则可以进行下一网页元素的渲染工作。将图片解码的工作从负责渲染的线程中分离出来,释放了负责渲染的线程的压力,加快了网页渲染渲染速度,能有效避免浏览网页时产生的卡顿现象。
[0091]在优选的实施例中,在图片解码过程中,当检测到用户操作时,例如用户滚动网页,或者打开新网页等等操作。可能会导致网页可视区域发生变化。为此,在本优选实施例中会在网页可视区域发生变化时,检测图片解码任务中的图片是否已不在可视区域预设阈值范围内,若是,则将所述图片对应的图片解码任务及其在所对应的图片映射表中记录的所述图片信息删除。通过上述步骤的处理后,可保证当前正解码的图片,在可视区域范围内,而非可视区域的图片,将不浪费CPU对其进行解码。
[0092]在另一优选的实施例中,执行完S260后,浏览器会对已经完成解码的图片的图片解码数据进行缓存。进行图片解码数据缓存是为了尽量减少图片解码时间。
[0093]缓存下解码完成后的图片数据,超过缓存阈值时则会进行缓存清理。然而由于在一个页面的可视范围内,图片数据量非常大,导致图片缓存池空间不够用。所以浏览器会出现不断的清理图片缓存,同时解码线程又不断对图片进行解码。这样会导致前一瞬间图片解码数据存在,能够绘制出图片,而随后由于缓存满了,该图片解码数据被清理掉了。此时本实施例会使用另外一个解码线程对该图片进行解码。在解码完成之前,将不渲染显示该图片,所以在此过程中用户将看不到图片,待图片解码完成后,图片又被渲染显示出来,这样会导致页面出现图片不断闪烁的问题。
[0094]为了解决上述问题,在优选的实施方式中,在进行图片解码数据缓存清理时,保留缓存中的确定处于可视区域预设阈值范围内的图片的图片解码数据。也就是说在清理缓存中的图片解码数据之前,也会检测准备删除的图片是否存在于可视预设阈值区域中,如果是,则不管缓存是否已满,该图片的图片解码数据均不从缓存中删除。这样有效避免出现进行网页浏览时页面图片不断闪烁的问题。
[0095]本优选实施例中的可视区域预设阈值范围跟前面实施例子所讲的可视区域预设阈值范围可以是相同的意思。即可以是当前屏幕正在显示的区域范围,也可以是当前正在显示范围以外的预设阈值区域范围,例如可以是当前页面以后的一屏页面范围,或者多屏页面范围。
当前第2页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1