CN111767100A - 应用于浏览器的图像处理方法、装置、系统及介质 - Google Patents

Abstract

本公开提供了一种应用于浏览器的图像处理方法。所述方法包括：响应于在所述浏览器中打开网页的用户操作，启动所述浏览器的webworker线程；在所述webworker线程中加载所述网页中待显示的第一火焰图的数据信息；在所述浏览器的主线程中创建canvas画布，并对所述canvas画布启用离屏渲染功能，其中，所述离屏渲染功能被设置为在所述webworker线程中执行；在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图；以及在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图。本公开还提供了一种应用于浏览器的图像处理装置、系统及介质。

Description

应用于浏览器的图像处理方法、装置、系统及介质

技术领域

本公开涉及互联网技术领域，更具体地，涉及一种应用于浏览器的图像处理方法、装置、系统及介质。

背景技术

火焰图是展示设备运行的有效手段，例如可以表示一台设备的CPU在一段时间内运行的繁忙程度。通常可以通过浏览器中的网页来展示火焰图，例如将火焰图的数据加载到网页中，通过网页的渲染效果展示给用户。相关技术中为了在网页中展示火焰图，通常使用的方法是d3-flame-graph或perf命令。

在实现本公开构思的过程中，发明人发现相关技术中至少存在如下问题：d3-flame-graph将svg的元素节点作为DOM节点插入到网页进行图形数据呈现，对于数据复杂的火焰图，渲染过程耗时很长，而且处理用户交互也会非常卡顿，会造成网页假死等问题；perf命令是生成一个svg格式的图片，然后将该图片添加到网页中，这样导致处理火焰图的用户交互的能力比较弱，比如不能点击火焰图中某个节点并放大显示这个节点的详情等。

发明内容

有鉴于此，本公开提供了一种可以在浏览器的webworker线程中进行离屏渲染的应用于浏览器的图像处理方法、装置、系统及介质。

本公开的一个方面提供了一种应用于浏览器的图像处理方法。所述方法包括：响应于在所述浏览器中打开网页的用户操作，启动所述浏览器的webworker线程；在所述webworker线程中加载所述网页中待显示的第一火焰图的数据信息；在所述浏览器的主线程中创建canvas画布；对所述canvas画布启用离屏渲染功能，其中，所述离屏渲染功能被设置为在所述webworker线程中执行；在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图；以及在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图。

根据本公开的实施例，在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，所述方法还包括：监听用户在所述浏览器中对所述第一火焰图的第一交互操作；获取所述第一交互操作的第一位置信息；从所述webworker线程中获取所述第一火焰图中与所述第一位置信息对应的位置的数据节点的数据信息，得到第一数据信息；以及将所述第一数据信息展示于所述浏览器的界面中。

根据本公开的实施例，所述方法还包括在所述主线程创建大小为0的DOM节点。所述将所述第一数据信息展示于所述浏览器的界面中包括，基于所述第一位置信息设置所述DOM节点在所述浏览器中的显示位置，以及将所述第一数据信息复制到所述DOM节点中。

根据本公开的实施例，在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，所述方法还包括：监听用户在所述浏览器中对所述第一火焰图的第二交互操作；获取所述第二交互操作的第二位置信息；在所述webworker线程中获取所述第一火焰图中与所述第二位置信息对应的位置的数据节点，以得到第一数据节点；在所述webworker线程中从所述第一火焰图的数据信息中获取所述第一数据节点、以及与所述第一数据节点具有预定关系的数据节点的数据信息，得到第二数据信息；在所述webworker线程中，基于所述第二数据信息执行所述离屏渲染功能以绘制第二火焰图；以及在所述浏览器中的所述canvas画布中展示所述第二火焰图。

根据本公开的实施例，在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，所述方法还包括：监听所述浏览器的窗口缩放事件；在所述窗口缩放事件满足重绘条件时，在所述webworker线程中，重新基于所述第一火焰图的数据信息执行所述离屏渲染功能，以重新绘制所述第一火焰图；以及在缩放后的所述浏览器中的所述canvas画布中展示重新绘制后的所述第一火焰图。

根据本公开的实施例，所述重绘条件包括所浏览器的窗口缩放前后canvas画布的可用宽度的相对差异大于预设值。

根据本公开的实施例，所述在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图包括：遍历第一火焰图的数据信息中的所有数据节点，获得所有数据节点间的父子关系或兄弟关系；基于父子关系计算每个数据节点的y轴偏移量，以使得具有父子关系的数据节点沿y轴逐层绘制；基于兄弟关系计算每个数据节点的x轴偏移量，以使得具有兄弟关系的数据节点沿x轴逐一绘制；以及基于所述所有数据节点中每个数据节点的y轴偏移量和x轴偏移量，绘制第一火焰图。

本公开的另一方面，提供了一种应用于浏览器的图像处理装置。所述装置包括响应模块、图像绘制模块以及图像展示模块。所述响应模块用于响应于在所述浏览器中打开网页的用户操作，启动所述浏览器的webworker线程。所述图像绘制模块用于在所述webworker线程中加载所述网页中待显示的第一火焰图的数据信息；在所述浏览器的主线程中创建canvas画布；对所述canvas画布启用离屏渲染功能，其中，所述离屏渲染功能被设置为在所述webworker线程中执行；在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图。所述图像展示模块用于在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图。

根据本公开的实施例，所述装置还包括第一用户交互模块。所述第一用户交互模块用于在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，监听用户在所述浏览器中对所述第一火焰图的第一交互操作，获取所述第一交互操作的第一位置信息，从所述webworker线程中获取所述第一火焰图中与所述第一位置信息对应的位置的数据节点的数据信息，得到第一数据信息，以及将所述第一数据信息展示于所述浏览器的界面中。

根据本公开的实施例，所述第一交互模块还用于在所述主线程创建大小为0的DOM节点，并基于所述第一位置信息设置所述DOM节点在所述浏览器中的显示位置，以及将所述第一数据信息复制到所述DOM节点中。

根据本公开的实施例，所述装置还包括第二用户交互模块。所述第二用户交互模块用于在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，监听用户在所述浏览器中对所述第一火焰图的第二交互操作，获取所述第二交互操作的第二位置信息，在所述webworker线程中获取所述第一火焰图中与所述第二位置信息对应的位置的数据节点，以得到第一数据节点，在所述webworker线程中从所述第一火焰图的数据信息中获取所述第一数据节点、以及与所述第一数据节点具有预定关系的数据节点的数据信息，得到第二数据信息，在所述webworker线程中，基于所述第二数据信息执行所述离屏渲染功能以绘制第二火焰图，以及在所述浏览器中的所述canvas画布中展示所述第二火焰图。

根据本公开的实施例，所述装置还包括第三用户交互模块。所述第三用户交互模块用于在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，监听所述浏览器的窗口缩放事件，在所述窗口缩放事件满足重绘条件时，在所述webworker线程中重新基于所述第一火焰图的数据信息执行所述离屏渲染功能，以重新绘制所述第一火焰图，以及在缩放后的所述浏览器中的所述canvas画布中展示重新绘制后的所述第一火焰图。

本公开的另一方面提供了一种应用于浏览器的图像处理系统。所述系统包括一个或多个存储器以及一个或多个处理器。所述一个或多个存储器存储有可执行指令。所述一个或多个处理器执行所述可执行指令，以实现如上所述的方法。

本公开的另一方面提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行如上所述的方法。

本公开的另一方面提供了一种计算机程序，所述计算机程序包括计算机可执行指令，所述指令在被执行时用于实现如上所述的方法。

根据本公开的实施例，可以至少部分地解决网页形式查看火焰图数据时，页面性能严重下降的问题，并因此可以实现在进行火焰图的渲染时不影响用户查看网页或者在网页中的交互操作的技术效果。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开各个实施例的应用于浏览器的图像处理方法、装置、系统及介质的应用场景；

图2示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法的流程图；

图3示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法中通过离屏渲染来绘制第一火焰图的流程；

图4示意性示出了一个火焰图的示意；

图5示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法的一个应用实例流程图；

图6示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法中基于用户对第一火焰图的第一交互操作的方法流程图；

图7示意性示出了根据本公开另一实施例的应用于浏览器的图像处理方法中基于用户对第一火焰图的第一交互操作的方法流程图；

图8示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法中基于用户对第一火焰图的第二交互操作的方法流程图；

图9示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法中基于用户对第一火焰图的第二交互操作的方法的一个应用实例流程图；

图10示意性实处了根据本公开一实施例的应用于浏览器的图像处理方法中基于浏览器窗口缩放事件的方法流程图；

图11示意性实处了根据本公开一实施例的应用于浏览器的图像处理方法中基于浏览器窗口缩放事件的方法的一个应用实例流程图；

图12示意性示出了根据本公开实施例的应用于浏览器的图像处理装置的方框图；以及

图13示意性示出了适于实现根据本公开实施例的应用于浏览器的图像处理方法的计算机系统的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。本文中“第一”、“第二”用于术语的区分，无其他特殊含义。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。在使用类似于“A、B或C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B或C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

本公开的实施例提供了一种应用于浏览器的图像处理方法、装置、系统及介质。所述方法包括首先响应于在所述浏览器中打开网页的用户操作，启动所述浏览器的webworker线程，然后在所述webworker线程中加载所述网页中待显示的第一火焰图的数据信息，接着在所述浏览器的主线程中创建canvas画布；对所述canvas画布启用离屏渲染功能，其中，所述离屏渲染功能被设置为在所述webworker线程中执行，之后在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图，最后在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图。

根据本公开的实施例，在绘制火焰图时在webWorker线程中通过离屏渲染功能offscreenCanvas来实现，渲染完成后显示在浏览器中的canvas画布中，以此方式，实现在进行火焰图的渲染时不影响用户查看网页或者在网页中的交互操作，使网页的展示更为流畅，避免了相关技术中在浏览器的主线程中渲染火焰图而引起的网页假死等问题，提高了用户体验。

图1示意性示出了根据本公开各个实施例的应用于浏览器的图像处理方法、装置、系统及介质的应用场景100。需要注意的是，图1所示仅为可以应用本公开实施例的应用场景的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的应用场景100可以包括终端设备101、102、103，网络104和服务器105。网络104是用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有浏览器。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将根据用户请求获取或生成的网页反馈给终端设备。

根据本公开的实施例，服务器根据用户请求获取或生成的网页中包括由火焰图数据。终端设备101、102、103接收到该网页的信息后，利用终端设备101、102、103中的浏览器来展示该网页。其中网页中的火焰图数据可以是对服务器105的某一时段的运行状态进行监测收集获得的，或者火焰图的数据可以是对于服务器105通信的某个或多个设备某一时段的运行状态进行监测收集获得的。

需要说明的是，本公开实施例所提供的应用于浏览器的图像处理方法一般可以由终端设备101、102、103执行。相应地，本公开实施例所提供的应用于浏览器的图像处理装置一般可以设置于终端设备101、102、103中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

以下根据图1的应用场景，结合图2～图11对本公开各个实施例的应用于浏览器的图像处理方法进行示例性说明。

图2示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法的流程图。

如图2所示，根据本公开实施例该应用于浏览器的图像处理方法可以包括操作S210～操作S260。

首先在操作S210，响应于在所述浏览器中打开网页的用户操作，启动所述浏览器的webworker线程。例如，用户在终端设备101、102、103中点击浏览器并打开某一个网页时，服务器105会通过网络104将该网页的脚本传输给浏览器。浏览器首先会在主线程对网页的脚本进行解释，然后将解释后的信息展示于浏览器界面上，同时根据本公开的实施例，浏览器也相应地启动webworker线程。

然后在操作S220，在所述webworker线程中加载所述网页中待显示的第一火焰图的数据信息。第一火焰图的数据信息包括具有父子关系、和/或兄弟关系的多个数据节点。

接着在操作S230，在所述浏览器的主线程中创建canvas画布。

之后在操作S240，对所述canvas画布启用离屏渲染功能offscreenCanvas，其中，所述离屏渲染功能被设置为在所述webworker线程中执行。

再接着在操作S250，在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图。

最后在操作S260，在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图。

图3示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法中操作S260中通过离屏渲染来绘制第一火焰图的流程。

如图3所示，操作S260可以包括操作S261～操作S264。

首先在操作S261，遍历第一火焰图的数据信息中的所有数据节点，获得所有数据节点间的父子关系或兄弟关系。

然后在操作S262，基于父子关系计算每个数据节点的y轴偏移量，以使得具有父子关系的数据节点沿y轴逐层绘制。

接着在操作S263，基于兄弟关系计算每个数据节点的x轴偏移量，以使得具有兄弟关系的数据节点沿x轴逐一绘制；以及

最后在操作S264基于所述所有数据节点中每个数据节点的y轴偏移量和x轴偏移量，绘制第一火焰图。

以下结合图4和图5中对一个简单的火焰图40的绘制描述对图2和3所示的方法步骤进行更为详细的介绍。

图4示意性示出了一个火焰图的示意。其中图4所示的是一个正向的火焰图，及根节点ROOT在y轴方向位于最下层。

图4中的火焰图40的数据信息为：

其中，ROOT为所有其他数据节点的根节点，Func A和Func B之间为兄弟关系，FuncA和Func A-1之间为父子关系。需要说明的是以上火焰图40的数据信息仅是一种示例。火焰图40的数据信息也可以具有其他数据结构(例如，树形结构)。

图5示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法的应用实例流程图。

如图5所示，该应用实例可以包括步骤S1～步骤S10。其中，图5中实线部分用以示例在webworker线程中执行的步骤，虚线用以示例在主线程中执行的步骤。

以图4所示的火焰图40为例，对图5的应用实例说明如下。

在步骤S1，在用户启动浏览器并打开网页后，主线程启动webworker线程。

在步骤S2，在web worker线程中加载火焰图40的数据信息，如前所示。

在步骤S3，解析火焰图40的数据信息。例如，深度遍历火焰图40的数据信息，记录所有数据节点的父子、兄弟关系以及层级数据，并记录最大层级。可以得到的结果为火焰图40的数据信息中ROOT为所有其他数据节点的根节点，Func A和Func B之间为兄弟关系，Func A和Func A-1之间为父子关系，最大层级为3。其中，每个数据节点所处的层级与该数据节点和其他数据节点的父子关系来确定。

在步骤S4，根据层级深度计算需要的canvas画布的数量。利用最大层级*单个节点高度得到总画布的高度。比如在图4中火焰图40的最大层级为3，并且设置单个节点高度为50，那么总画布的高度为150。如果浏览器可绘制的canvas画布有大小限制，就可以总画布的高度除以浏览器可绘制的单个canvas画布的最大高度并向上取整，得到所需要的canvas画布的数量。假设计算后火焰图40需要两个canvas画布合并来显示。

在步骤S5，webworker线程通知主线程按照创建的两个canvas画布。

在步骤S6，主线程创建两个canvas画布。

在步骤S7，对创建的canvas开启离屏渲染功能offscreenCanvas，并将所有权转交给webworker线程。

在步骤S8，计算每个数据节点在canvas画布中的位置和大小。首先，获取canvas画布的宽度，以及火焰图40的根节点表示总宽度的数据量(即，100)计算单位数据占用的宽度，记为单位宽度。然后，深度遍历火焰图40中的各个数据节点，根据单位宽度计算每个数据节点的宽度。对于每个数据节点，根据其前一个兄弟节点的x轴偏移量与宽度计算自己的x轴偏移量；根据每个数据节点在火焰图40的数据信息中所处的层级计算节点y轴偏移量。

在步骤S9，执行离屏渲染功能绘制火焰图40。按照计算得到的每个数据节点在canvas画布中的位置和大小，绘制火焰图40。

在步骤S10，在主线程的canvas画布中展示火焰图40，例如离屏渲染完成后同步展示。

根据本公开的实施例，在绘制火焰图时在webworker线程中通过离屏渲染功能offscreenCanvas来实现，渲染完成后显示在浏览器中的canvas画布中，以此方式，实现在进行火焰图的渲染时不影响用户查看网页中的其他内容或者用户在网页中的交互操作，使网页的展示更为流畅，避免了相关技术中在浏览器的主线程中渲染火焰图而引起的网页假死等问题，提高了用户体验。

图6示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法中基于用户对第一火焰图的第一交互操作的方法流程图。其中，图6的方法流程在图2的方法流程之后执行。

结合图2和图6，根据本公开的实施例的应用于浏览器的图像处理方法在操作S210～操作S260之后，还可以包括操作S610～操作S640。更为具体的，操作S610～操作S640在操作S260之后执行。

在操作S610，监听用户在所述浏览器中对所述第一火焰图的第一交互操作。该第一交互操作例如可以是鼠标悬停操作或者触摸悬停操作。

在操作S620，获取所述第一交互操作的第一位置信息。例如获取第一交互操作在canvas画布的坐标信息。

在操作S630，从所述webworker线程中获取所述第一火焰图中与所述第一位置信息对应的位置的数据节点的数据信息，得到第一数据信息。第一火焰图是根据在webworker线程中离屏渲染得到的，

在操作S640，将所述第一数据信息展示于所述浏览器的界面中。

根据本公开的实施例，可以根据用户的第一交互操作向用户展示第一交互操作所针对的火焰图中的数据节点的信息，方便用户了解火焰图的细节。

图7示意性示出了根据本公开另一实施例的应用于浏览器的图像处理方法中基于用户对第一火焰图的第一交互操作的方法流程图。其中，图7的方法流程在图2的方法流程之后执行。

结合图2和图7，根据本公开的实施例的应用于浏览器的图像处理方法在操作S210～操作S260之后，还可以包括操作S710、S610～操作S630、以及操作S740～操作S750。

图7与图6相比，操作S610～操作S630与前述一致，操作S710在操作S610之前执行，操作S740～操作S750为操作S640的一个具体实施例。

具体地，根据本公开的实施例，在监听用户的第一交互操作(操作S610)之前，在操作S710中在所述主线程创建大小为0的DOM节点。

此后，根据用户的第一交互操作的第一位置信息从webworker线程中获取用户的该第一交互操作所针对的第一火焰图中的数据信息(操作S610～操作S630)。

接着在操作S740，基于所述第一位置信息设置所述DOM节点在所述浏览器中的显示位置。

之后在操作S750，将所述第一数据信息复制到所述DOM节点中。通过设置DOM节点的内容和样式，就可以使第一数据信息以特定的样式展示于浏览器界面中。例如，若第一交互操作为鼠标悬浮，且设置DOM节点中的信息高亮显示，那么根据本公开的实施例就可以达到鼠标浮动到一数据节点上则高亮显示该数据节点的信息(例如，函数名，占用资源/时间)的效果。

图8示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法中基于用户对第一火焰图的第二交互操作的方法流程图。其中，图8的方法流程在图2的方法流程之后执行。

结合图2和图8，根据本公开的实施例的应用于浏览器的图像处理方法在操作S210～操作S260之后，还可以包括操作S810～操作S860。更为具体的，操作S810～操作S860位于操作S260之后。

在操作S810，监听用户在所述浏览器中对所述第一火焰图的第二交互操作。第二交互操作例如可以是点击操作。其中，第二交互操作与第一交互操作不同。

在操作S820，获取所述第二交互操作的第二位置信息。例如获取第二交互操作在canvas画布的坐标信息。

在操作S830，在所述webworker线程中获取所述第一火焰图中与所述第二位置信息对应的位置的数据节点，以得到第一数据节点。

在操作S840，在所述webworker线程中从所述第一火焰图的数据信息中获取所述第一数据节点、以及与所述第一数据节点具有预定关系的数据节点的数据信息，得到第二数据信息。

在操作S850，在所述webworker线程中，基于所述第二数据信息执行所述离屏渲染功能以绘制第二火焰图。

在操作S860，在所述浏览器中的所述canvas画布中展示所述第二火焰图。

图9示意性示出了根据本公开一实施例的应用于浏览器的图像处理方法中基于用户对第一火焰图的第二交互操作的方法的应用实例流程图。

如图9所示，该应用实例可以包括操作S901～操作S906。其中，操作S901、操作S902和操作S906是在主线程执行，操作S903～操作S905在webworker线程执行。

结合图4的火焰图40，以点击操作作为第二交互操进行示例性说明。

在操作S901，监听对火焰图40的点击操作，例如用户在火焰图40的Func A所在的位置上进行了点击。

在操作S902，获取点击操作的位置信息，并把该位置信息传输给webworker线程。

在操作S903，根据点击操作的位置信息匹配出用户点击操作的数据节点即FuncA。

在操作S904，以该数据节点Func A为根节点，重新计算数据节点Func A及其子孙节点(在火焰图40中Func A只有一个子节点FuncA-1)的x轴偏移量、y轴偏移量和大小等进行重新绘制。具体偏移量的计算思路可以参考图3和图5的相关描述。

在操作S905，遍历与该数据节点Func A无关的其他所有数据节点。并从在canvas画布中上清除这些其他所有数据节点。

在操作S906，在主线程的canvas画布中展示重新绘制后的火焰图将在webworker线程离屏渲染完成的火焰图10的局部放大的火焰图(即第二火焰图)。这样，可以对用户点击操作的数据节点进行聚焦状态展示。

根据本公开的实施例，在对火焰图的局部重绘也是在webworker线程中通过离屏渲染offscreenCanvas来实现，不影响用户查看网页其他内容或者在网页中的其他交互，使网页的展示更为流畅，提高了用户体验。

图10示意性实处了根据本公开一实施例的应用于浏览器的图像处理方法中基于浏览器窗口缩放事件的方法流程图。

结合图2和图10，根据本公开的实施例的应用于浏览器的图像处理方法在操作S210～操作S260之后，还可以包括操作S1010～操作S1030。更为具体的，操作S1010～操作S1030位于操作S260之后。

在操作S1010，监听所述浏览器的窗口缩放事件。

在操作S1020，在所述窗口缩放事件满足重绘条件时，在所述webworker线程中，重新基于所述第一火焰图的数据信息执行所述离屏渲染功能，以重新绘制所述第一火焰图。根据本公开的实施例，所述重绘条件包括所浏览器的窗口缩放前后canvas画布的可用宽度的相对差异大于预设值(例如，10％)。

在操作S1030，在缩放后的所述浏览器中的所述canvas画布中展示重新绘制后的所述第一火焰图。

图11示意性实处了根据本公开一实施例的应用于浏览器的图像处理方法中基于浏览器窗口缩放事件的方法的应用实例流程图。

如图11所示，该应用实例可以包括操作S1101～操作S1107。

在操作S1101，监听浏览器窗口缩放事件，即监听是否改变浏览器窗口的大小。

在操作S1102，当监听到浏览器窗口大小改变时，延迟300ms获取canvas画布的可用宽度，以此方式进行函数节流处理，避免频繁计算canvas画布的可用宽度带来大量无效的计算。

在操作S1103，基于浏览器窗口缩放后canvas画布的可用宽度w1、或缩放事件发生前的canvas画布的可用宽度w2，计算浏览器的窗口缩放前后canvas画布的可用宽度的相对差异|w1-w2|/w2。并判断该相对差异是否大于10％。若否，则说明属于可接受的图片缩放失真范围，此时执行操作S1104，利用元素样式的transform属性，缩放第一火焰图；若是，则说明直接图像缩放会明显失真，此时执行操作S1105～操作S1107，对第一火焰图在webworker线程中利用offscreenCanvas功能重绘后再展示。

具体地，在操作S1105，在webworker线程重新计算所有数据节点在缩放后的canvas画布中的大小和位置，具体计算过程可以参考前述图3和图5的相关描述。然后在操作S1106，在webworker线程中通过offscreenCanvas功能对第一火焰图进行重绘。最后在操作S1107中在浏览器中展示重绘后的第一火焰图。

图12示意性示出了根据本公开实施例的应用于浏览器的图像处理装置1200的方框图。

如图12所示，该应用于浏览器的图像处理装置1200可以包括响应模块1210、图像绘制模块1220以及图像展示模块1230。该装置1200可以用于执行参考图2～图11所描述的方法。

所述响应模块1210用于响应于在所述浏览器中打开网页的用户操作，启动所述浏览器的webworker线程。

所述图像绘制模块1220用于在所述webworker线程中加载所述网页中待显示的第一火焰图的数据信息；在所述浏览器的主线程中创建canvas画布；对所述canvas画布启用离屏渲染功能，其中，所述离屏渲染功能被设置为在所述webworker线程中执行；在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图。

所述图像展示模块1230用于在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图。

根据本公开的实施例，所述装置1200还包括第一用户交互模块1240。所述第一用户交互模块1240用于在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，监听用户在所述浏览器中对所述第一火焰图的第一交互操作，获取所述第一交互操作的第一位置信息，从所述webworker线程中获取所述第一火焰图中与所述第一位置信息对应的位置的数据节点的数据信息，得到第一数据信息，以及将所述第一数据信息展示于所述浏览器的界面中。

根据本公开的实施例，所述第一交互模块1240还用于在所述主线程创建大小为0的DOM节点，并基于所述第一位置信息设置所述DOM节点在所述浏览器中的显示位置，以及将所述第一数据信息复制到所述DOM节点中。

根据本公开的实施例，所述装置1200还包括第二用户交互模块1250。所述第二用户交互模块1250用于在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，监听用户在所述浏览器中对所述第一火焰图的第二交互操作，获取所述第二交互操作的第二位置信息，在所述webworker线程中获取所述第一火焰图中与所述第二位置信息对应的位置的数据节点，以得到第一数据节点，在所述webworker线程中从所述第一火焰图的数据信息中获取所述第一数据节点、以及与所述第一数据节点具有预定关系的数据节点的数据信息，得到第二数据信息，在所述webworker线程中，基于所述第二数据信息执行所述离屏渲染功能以绘制第二火焰图，以及在所述浏览器中的所述canvas画布中展示所述第二火焰图。

根据本公开的实施例，所述装置1200还包括第三用户交互模块1260。所述第三用户交互模块1260用于在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，监听所述浏览器的窗口缩放事件，在所述窗口缩放事件满足重绘条件时，在所述webworker线程中重新基于所述第一火焰图的数据信息执行所述离屏渲染功能，以重新绘制所述第一火焰图，以及在缩放后的所述浏览器中的所述canvas画布中展示重新绘制后的所述第一火焰图。

根据本公开的实施例的模块、子模块、单元、子单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块、子模块、单元、子单元中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

例如，响应模块1210、图像绘制模块1220、图像展示模块1230、第一交互模块1240、第二用户交互模块1250、以及第三用户交互模块1260中的任意多个可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，响应模块1210、图像绘制模块1220、图像展示模块1230、第一交互模块1240、第二用户交互模块1250、以及第三用户交互模块1260中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，响应模块1210、图像绘制模块1220、图像展示模块1230、第一交互模块1240、第二用户交互模块1250、以及第三用户交互模块1260中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图13示意性示出了适于实现根据本公开实施例的应用于浏览器的图像处理方法的计算机系统的方框图。图13示出的计算机系统仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图13所示，根据本公开实施例的计算机系统1300包括处理器1301，其可以根据存储在只读存储器(ROM)1302中的程序或者从存储部分1308加载到随机访问存储器(RAM)1303中的程序而执行各种适当的动作和处理。处理器1301例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器1301还可以包括用于缓存用途的板载存储器。处理器1301可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 1303中，存储有计算机系统1300操作所需的各种程序和数据。处理器1301、ROM 1302以及RAM 1303通过总线1304彼此相连。处理器1301通过执行ROM 1302和/或RAM1303中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 1302和RAM 1303以外的一个或多个存储器中。处理器1301也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，计算机系统1300还可以包括输入/输出(I/O)接口1305，输入/输出(I/O)接口1305也连接至总线1304。计算机系统1300还可以包括连接至I/O接口1305的以下部件中的一项或多项：包括键盘、鼠标等的输入部分1306；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1307；包括硬盘等的存储部分1308；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1309。通信部分1309经由诸如因特网的网络执行通信处理。驱动器1310也根据需要连接至I/O接口1305。可拆卸介质1311，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1310上，以便于从其上读出的计算机程序根据需要被安装入存储部分1308。

根据本公开的实施例，根据本公开实施例的方法流程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1309从网络上被下载和安装，和/或从可拆卸介质1311被安装。在该计算机程序被处理器1301执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 1302和/或RAM 1303和/或ROM 1302和RAM 1303以外的一个或多个存储器。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (10)

1.一种应用于浏览器的图像处理方法，包括：

响应于在所述浏览器中打开网页的用户操作，启动所述浏览器的webworker线程；

在所述webworker线程中加载所述网页中待显示的第一火焰图的数据信息，其中，第一火焰图的数据信息包括具有父子关系、和/或兄弟关系的多个数据节点；

在所述浏览器的主线程中创建canvas画布；

对所述canvas画布启用离屏渲染功能，其中，所述离屏渲染功能被设置为在所述webworker线程中执行；

在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图；以及

在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图。

2.根据权利要求1所述的方法，其中，在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，所述方法还包括：

监听用户在所述浏览器中对所述第一火焰图的第一交互操作；

获取所述第一交互操作的第一位置信息；

从所述webworker线程中获取所述第一火焰图中与所述第一位置信息对应的位置的数据节点的数据信息，得到第一数据信息；以及

将所述第一数据信息展示于所述浏览器的界面中。

3.根据权利要求2所述的方法，其中，

所述方法还包括：在所述主线程创建大小为0的DOM节点；

所述将所述第一数据信息展示于所述浏览器的界面中包括：

基于所述第一位置信息设置所述DOM节点在所述浏览器中的显示位置；以及

将所述第一数据信息复制到所述DOM节点中。

4.根据权利要求1所述的方法，其中，在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，所述方法还包括：

监听用户在所述浏览器中对所述第一火焰图的第二交互操作；

获取所述第二交互操作的第二位置信息；

在所述webworker线程中获取所述第一火焰图中与所述第二位置信息对应的位置的数据节点，以得到第一数据节点；

在所述webworker线程中从所述第一火焰图的数据信息中获取所述第一数据节点、以及与所述第一数据节点具有预定关系的数据节点的数据信息，得到第二数据信息；

在所述webworker线程中，基于所述第二数据信息执行所述离屏渲染功能以绘制第二火焰图；以及

在所述浏览器中的所述canvas画布中展示所述第二火焰图。

5.根据权利要求1所述的方法，其中，在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图之后，所述方法还包括：

监听所述浏览器的窗口缩放事件；

在所述窗口缩放事件满足重绘条件时，在所述webworker线程中，重新基于所述第一火焰图的数据信息执行所述离屏渲染功能，以重新绘制所述第一火焰图；以及

在缩放后的所述浏览器中的所述canvas画布中展示重新绘制后的所述第一火焰图。

6.根据权利要求5所述的方法，其中，所述重绘条件包括所浏览器的窗口缩放前后所述canvas画布的可用宽度的相对差异大于预设值。

7.根据权利要求1所述的方法，其中，所述在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图包括：

遍历所述第一火焰图的数据信息中的所有数据节点，获得所有数据节点间的父子关系或兄弟关系；

基于父子关系计算每个数据节点的y轴偏移量，以使得具有父子关系的数据节点沿y轴逐层绘制；

基于兄弟关系计算每个数据节点的x轴偏移量，以使得具有兄弟关系的数据节点沿x轴逐一绘制；以及

基于所述所有数据节点中每个数据节点的y轴偏移量和x轴偏移量，绘制所述第一火焰图。

8.一种应用于浏览器的图像处理装置，包括：

响应模块，用于响应于在所述浏览器中打开网页的用户操作，启动所述浏览器的webworker线程；

图像绘制模块，用于

在所述webworker线程中加载所述网页中待显示的第一火焰图的数据信息；

在所述浏览器的主线程中创建canvas画布；

对所述canvas画布启用离屏渲染功能，其中，所述离屏渲染功能被设置为在所述webworker线程中执行；

在所述webworker线程中，基于所述第一火焰图的数据信息执行所述离屏渲染功能以绘制所述第一火焰图；

以及

图像展示模块，用于在所述浏览器中的所述canvas画布中展示绘制完成的所述第一火焰图。

9.一种应用于浏览器的图像处理系统，包括：

一个或多个存储器，存储有可执行指令；以及

一个或多个处理器，执行所述可执行指令，以实现根据权利要求1～7中任一项所述的方法。

10.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行根据权利要求1～7中任一项所述的方法。

Images