CN103678526A

CN103678526A - 浏览器解码图片的方法、装置和客户端

Info

Publication number: CN103678526A
Application number: CN201310629498.3A
Authority: CN
Inventors: 申小军
Original assignee: Shell Internet Beijing Security Technology Co Ltd
Current assignee: Shell Internet Beijing Security Technology Co Ltd
Priority date: 2013-11-29
Filing date: 2013-11-29
Publication date: 2014-03-26
Also published as: WO2015078211A1

Abstract

本发明提出一种浏览器解码图片的方法、装置和客户端，其中该方法包括：浏览器加载网页上的至少一张图片；至少一个网页渲染线程获得浏览器当前加载的图片的数据信息；根据网页渲染线程获得的浏览器当前加载的图片的数据信息，生成相应的图片解码任务，加入解码任务队列中；以及图片解码线程根据解码任务队列中的图片解码任务，对图片进行解码。本发明实施例的浏览器解码图片的方法，使用户在浏览器中滚动包含图片的网页时，浏览器显示网页很流畅，不会出现浏览器显示卡顿或者较长时间不响应用户操作的情况，提升了用户浏览网页的体验。

Description

浏览器解码图片的方法、装置和客户端

技术领域

本发明涉及互联网技术领域，尤其涉及一种浏览器解码图片的方法、装置和客户端。

背景技术

随着移动互联网技术的迅速发展，用户使用浏览器浏览网页也越来越普及，浏览器的功能也随之更加多样化。目前，用户在使用浏览器浏览网页中的图片时，浏览器需要对网页中压缩格式的图片的数据信息进行解码，例如，JPG（Joint Photographic Experts GROUP，联合图像专家小组）格式的图片、PNG（Portable Network Graphic Format，流式网络图形格式）格式的图片等。

当浏览器显示网页中的图片时，浏览器的界面显示线程向网页渲染线程发起同步渲染请求，然后界面显示线程变成阻塞状态，等待网页渲染线程的结果。

网页渲染线程调用图片解码模块，对图片的数据信息进行解码。然后网页渲染线程变成阻塞状态，等待图片解码的结果。

在网页渲染线程接收到解码后的图片的第一个像素数据之后，网页渲染线程解除阻塞状态，加载解码后的图片的像素信息，并对该像素信息进行渲染。

渲染完成后，网页渲染线程通知界面显示线程，界面显示线程的阻塞状态解除，在浏览器中将图片显示出来。

在实现本发明的过程中发明人发现现有技术至少存在以下问题：在进行图片解码时，网页渲染线程处于阻塞状态。由于对图片进行解码需要一定的时间，特别是数据信息比较大的图片，进行解码所需要的时间可能达到1秒钟以上，因此导致网页渲染线程阻塞的时间较长，大大地增加了网页的加载时间。而且由于网页渲染线程被阻塞，当用户滚动网页时，网页渲染线程可能还在等待滚动操作前显示的图片的解码结果，这会导致滚动操作后当前显示的图片无法得到及时处理，从而导致显示网页时不够流畅，出现卡顿或者较长时间不响应用户操作的现象，用户体验非常差。

发明内容

为解决现有技术中出现的浏览器显示卡顿或者较长时间不响应用户操作的情况，提升用户浏览网页的体验，本发明提出一种浏览器解码图片的方法、装置和客户端。

一方面，本发明实施例提供的浏览器解码图片的方法包括：浏览器加载网页上的至少一张图片；至少一个网页渲染线程获得浏览器当前加载的图片的数据信息；根据网页渲染线程获得的浏览器当前加载的图片的数据信息，生成相应的图片解码任务，加入解码任务队列中；以及图片解码线程根据解码任务队列中的图片解码任务，对图片进行解码。

另一方面，本发明实施例提供的浏览器解码图片的装置，包括：网页渲染模块（100），包括一个或者多个网页渲染线程，在浏览器加载网页上的一张或多张图片时，用于获得浏览器当前加载的图片的数据信息；图片解码任务模块（200），用于根据网页渲染模块（100）获得的浏览器当前加载的图片的数据信息，生成相应的图片解码任务，加入解码任务队列中；以及图片解码模块（300），包括一个或者多个图片解码线程，用于根据解码任务队列中的图片解码任务，对图片进行解码。

另一方面，本发明实施例提供的客户端，包括：外壳，屏幕，处理器和电路板；所述屏幕安置在所述外壳上，所述电路板安置在所述外壳围成的空间内部，所述处理器设置在所述电路板上；所述处理器用于处理数据，具体用于：通过浏览器加载网页上的至少一张图片；通过至少一个网页渲染线程获得浏览器当前加载的图片的数据信息；根据网页渲染线程获得的浏览器当前加载的图片的数据信息，生成相应的图片解码任务，加入解码任务队列中；以及通过图片解码线程根据解码任务队列中的图片解码任务，对图片进行解码。

本发明实施例提供的方法、装置和客户端，通过在现有的同步图片解码的单线程的解码模式中，增加了图片解码任务管理模块，以及在有新图片的数据信息需要解码时，图片解码任务管理模块生成图片解码线程，由此，可以使用户在浏览器中滚动包含图片的网页时，浏览器显示网页很流畅，不会出现浏览器显示卡顿或者较长时间不响应用户操作的情况，提升了用户浏览网页的体验。

本发明附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中，

图1是根据本发明一个实施例的浏览器解码图片的方法的流程图；

图2是根据本发明一个具体实施例的浏览器解码图片的方法的流程图；

图3是根据本发明一个实施例的浏览器解码图片的装置的结构示意图；

图4是根据本发明一个具体实施例的浏览器解码图片的装置的结构示意图；以及

图5（a）-图5（d）是根据本发明一个具体实施例的客户端的示意图。

具体实施方式

下面详细描述本发明的实施例，实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。相反，本发明的实施例包括落入所附加权利要求书的精神和内涵范围内的所有变化、修改和等同物。

在本发明的描述中，术语“第一”、“第二”等仅用于描述，而不能理解为指示或暗示相对重要性。在本发明的描述中，除非另有明确的规定和限定，术语“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。此外，在本发明的描述中，除非另有说明，“多个”的含义是两个或两个以上。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。

下面参考附图描述本发明实施例的浏览器解码图片的方法、装置和客户端。

本发明实施例提供的技术方案可用于各类浏览器，例如IE内核的浏览器或Chrome浏览器，也可以用于今后发展的各类浏览器。

图1是根据本发明一个实施例的浏览器解码图片的方法的流程图。如图1所示，包括：

S100，浏览器加载网页上的至少一张图片。

在浏览器加载网页的过程中，浏览器的界面显示线程发送同步渲染请求至浏览器的网页渲染线程。在界面显示线程发送同步渲染请求至网页渲染线程之后，界面显示线程变成阻塞状态。

S101，至少一个网页渲染线程获得浏览器当前加载的图片的数据信息。

可选的，在本发明的实施例中，图片的数据信息通常为压缩数据信息，例如JPG、PNG等压缩格式的压缩数据信息。

在本发明的实施例中，网页渲染线程可为一个或者多个。例如，浏览器同时打开多个网页时，多个网页可以分别对应多个网页渲染线程。

在本发明的实施例中，网页渲染线程会根据浏览器当前加载的图片，提取当前加载图片的数据信息。例如，假设网页包括五个图片，如果浏览器当前加载的图片是第一个图片，则网页渲染线程从网页提取第一个图片对应的数据信息。

S102，根据网页渲染线程获得的浏览器当前加载的图片的数据信息，生成相应的图片解码任务，加入解码任务队列中。

可以理解，在本发明的实施例中，“当前”是一个相对的概念，例如，在t1时刻，如果浏览器加载的是图片X，则在t1时刻，“当前加载的图片”是X；而在t2时刻，如果浏览器加载的是图片Y，则在t2时刻，“当前加载的图片”是Y。

在本发明的实施例中，在将网页渲染线程获得的图片的数据信息加入解码任务队列之后，网页渲染线程无需阻塞（即，可以继续处于运行状态），因此，即使是浏览器当前加载的图片发生了改变（例如，用户进行了滚动操作），网页渲染线程也仍然可以进行渲染。

仍延续上述网页包括五个图片的例子。如果用户进行了滚动操作，浏览器当前加载的图片变成了第二个图片和第三个图片，即使此时第一个图片的解码仍未完成，网页渲染线程还是可以获得第二个图片和第三个图片的数据信息，生成相应的第二个图片的解码任何和第三个图片的解码任务，并将其加入解码任务队列中。

S103，图片解码线程根据解码任务队列中的图片解码任务，对图片进行解码。

可选的，在本发明的一个实施例中，可以是至少两个处于空闲状态的图片解码线程，根据解码任务队列中的图片解码任务，对图片进行解码。

可选的，在本发明的具体实施例中，每个图片解码任务都有对应的标识符（ID），多个图片解码线程可以根据图片解码任务的ID进行解码，从而实现解码任务的分配。

可选的，如图2所示，在上述103之后，本发明实施例的浏览器解码图片的方法还可以包括：

S104，图片解码线程对图片进行解码完成后，网页渲染线程加载解码后的图片的像素信息，并对图片的像素信息进行渲染。

S105，网页渲染线程对图片的像素信息渲染完成后，界面显示线程在浏览器中显示图片。

本发明实施例通过解码任务队列对网页渲染线程提交的当前加载图片的数据信息进行调度，由至少两个图片解码线程进行解码，因此，网页渲染线程并不需要将状态变成阻塞，因此，可以在用户使用浏览器浏览包含图片的网页时，保持显示的流畅性，不会出现浏览器显示卡顿或者较长时间不响应用户操作的情况，提升了用户浏览网页的体验。

另一方面，本发明还提出一种浏览器解码图片的装置。图3是根据本发明一个实施例的浏览器解码图片的装置的结构示意图。如图3所示，该装置包括：网页渲染模块100、图片解码任务模块200和图片解码模块300。其中：

网页渲染模块100，包括一个或者多个网页渲染线程，在浏览器加载网页上的一张或多张图片时，用于获得浏览器当前加载的图片的数据信息。

图片解码任务模块200，用于根据网页渲染模块100获得的浏览器当前加载的图片的数据信息，生成相应的图片解码任务，加入解码任务队列中。

图片解码模块300，包括一个或者多个图片解码线程，用于根据解码任务队列中的图片解码任务，对图片进行解码。

可选的，上述网页渲染模块100，在图片解码模300块对图片进行解码后，还用于加载解码后的图片的像素信息，并对图片的像素信息进行渲染。

可选的，图4是根据本发明一个具体实施例的浏览器解码图片的装置的结构示意图。如图4所示，本发明实施例的浏览器解码图片的装置还可以包括：显示模块400，包括界面显示线程，在上述网页渲染模块100对图片的像素信息渲染完成后，用于在浏览器中显示图片。

在本发明的实施例中，上述装置可以是浏览器，也可以是内嵌在浏览器中的一个虚拟装置。

另一方面，本发明又提出一种客户端。如图5(a)-图5(d)所示，包括：

外壳，屏幕，处理器（图中未示出）和电路板（图中未示出）；屏幕安置在外壳上，电路板安置在外壳围成的空间内部，处理器设置在电路板上；处理器用于处理数据，具体用于：

S100’，通过浏览器加载网页上的至少一张图片。

S101’，通过至少一个网页渲染线程获得浏览器当前加载的图片的数据信息。

S102’，根据网页渲染线程获得的浏览器当前加载的图片的数据信息，生成相应的图片解码任务，加入解码任务队列中。

S103’，通过图片解码线程根据解码任务队列中的图片解码任务，对图片进行解码。

可选的，在上述103’之后，本发明实施例的处理器还可以用于：

S104’，通过图片解码线程对图片进行解码完成后，通过网页渲染线程加载解码后的图片的像素信息，并对图片的像素信息进行渲染。

S105’，通过网页渲染线程对图片的像素信息渲染完成后，界面显示线程在浏览器中显示图片。

应当理解，在本发明的实施例中，客户端可为手机、平板电脑、个人计算机PC、或者笔记本电脑等具有各种操作系统的硬件设备。

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

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管已经示出和描述了本发明的实施例，本领域的普通技术人员可以理解：在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由权利要求及其等同物限定。

Claims

1.一种浏览器解码图片的方法，其特征在于，包括：

浏览器加载网页上的至少一张图片；

至少一个网页渲染线程获得浏览器当前加载的图片的数据信息；

根据网页渲染线程获得的浏览器当前加载的图片的数据信息，生成相应的图片解码任务，加入解码任务队列中；以及

图片解码线程根据解码任务队列中的图片解码任务，对图片进行解码。

2.根据权利要求1所述的方法，其特征在于，在所述至少一个网页渲染线程获得浏览器当前加载的图片的数据信息之前，还包括：

所述网页渲染进程接收所述浏览器的界面显示线程发送的同步渲染请求。

3.根据权利要求1或2所述的方法，其特征在于，在所述图片解码线程对所述图片完成解码之后，还包括：

网页渲染线程加载解码后的图片的像素信息，并对图片的像素信息进行渲染。

4.根据权利要求3所述的方法，其特征在于，在所述网页渲染线程对图片的像素信息渲染完成后，还包括：

界面显示线程在浏览器中显示图片。

5.一种浏览器解码图片的装置，其特征在于，包括：

网页渲染模块（100），包括一个或者多个网页渲染线程，在浏览器加载网页上的一张或多张图片时，用于获得浏览器当前加载的图片的数据信息；

图片解码任务模块（200），用于根据网页渲染模块（100）获得的浏览器当前加载的图片的数据信息，生成相应的图片解码任务，加入解码任务队列中；以及

图片解码模块（300），包括一个或者多个图片解码线程，用于根据解码任务队列中的图片解码任务，对图片进行解码。

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

所述网页渲染模块（100），在图片解码模块（300）对图片进行解码后，还用于加载解码后的图片的像素信息，并对图片的像素信息进行渲染。

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

显示模块（400），包括界面显示线程，在所述网页渲染模块（100）对图片的像素信息渲染完成后，用于在浏览器中显示图片。

8.一种客户端，其特征在于，包括：外壳，屏幕，处理器和电路板；

所述屏幕安置在所述外壳上，所述电路板安置在所述外壳围成的空间内部，所述处理器设置在所述电路板上；

所述处理器用于处理数据，具体用于：

通过浏览器加载网页上的至少一张图片；

通过至少一个网页渲染线程获得浏览器当前加载的图片的数据信息；

通过图片解码线程根据解码任务队列中的图片解码任务，对图片进行解码。

9.根据权利要求8所述的客户端，其特征在于，在所述通过至少一个网页渲染线程获得浏览器当前加载的图片的数据信息之前，所述处理器还用于：

通过所述网页渲染进程接收所述浏览器的界面显示线程发送的界面渲染请求。

10.根据权利要求8所述的客户端，其特征在于，在所述所述图片解码线程对所述图片完成解码之后，所述处理器还用于：

通过网页渲染线程加载解码后的图片的像素信息，并对图片的像素信息进行渲染。

11.根据权利要求10所述的客户端，其特征在于，在所述网页渲染线程对图片的像素信息渲染完成后，所述处理器还用于：

通过界面显示线程在浏览器中显示图片。