CN111125592B - 应用程序的热力图渲染方法及其装置 - Google Patents

Abstract

本发明提出一种应用程序的热力图渲染方法及其装置，其中应用程序的热力图渲染方法，可以包括：通过移动终端上的应用程序建立移动终端、服务器、浏览器之间的连接；服务器将采集的应用程序的信息发送到浏览器，在浏览器上绘制与应用程序的元素节点对应的控件元素；根据预先存储的应用程序的元素节点的位置信息，在浏览器上绘制出对应的控件元素的热力图；在减少渲染和/或减小渲染范围的情况下，对热力图进行前端渲染。借助于本发明的应用程序的热力图渲染方法、装置例如存储了热点相对于控件元素的位置，这样保证了热点的准确性；另外减轻了服务器压力，优化了渲染性能，提升了用户体验等等。

Description

应用程序的热力图渲染方法及其装置

技术领域

本发明涉及数据分析领域，尤其涉及一种应用程序的热力图渲染方法、装置、计算机设备及其计算机可读存储介质。

背景技术

移动设备的热力图是以特殊高亮的形式显示用户在移动终端例如手机的应用程序(APP)中的点击位置，根据颜色深浅区分点击热度情况(即，热点)。借助热力图可以直观清楚地查看APP中每个区域的访客兴趣焦点，无须报告数据分析、图形化展现，而且也无须任何页面分析经验；借助热力图还能够框出任意区域点击数以及占比，同时支持按照操作系统、设备型号、地域、日期等维度进行筛选。

现有技术的移动终端上的APP热力图普遍采用如下方案：分页面展现热力图报告，以“页面退出”时候的APP页面截图作为热力图背景，同时记录用户在当前页面点击时的位置信息；同样是分页面展现热力图报告，但是以用户在APP“第一次点击”时的页面截图作为热力图背景，同时记录用户在当前页面点击时的位置信息。即，现有技术的热力图报表都需要分页面展现，而且在不同时刻的截图上渲染用户点击相对于截图的位置信息。

现有技术中的移动设备的APP存在比如如何保证热点绘制的准确性、如何处理APP多层次组件的覆盖关系、如何保证热力图更新的实时性、如何优化渲染性能等等问题。另外，现有技术中的移动设备的APP热力图渲染方案存在如下缺陷：建立连接后，截图信息跟随日志回传，增加服务器压力；移动设备的分辨率多种多样，相同APP会拥有不同尺寸的截图，由于位置信息是相对于截图存在的，因此会出现数据不准确的情况；回传截图的方法会造成生成多个报表页面，会产生众多不符合要求的冗余报表，增加查看、查找、删除的成本；无法做到热力图更新的实时性；热点较多的情况下，渲染需要花费较长的时间。

因此现有技术中迫切需要对于目前存在的缺陷进行改进。

发明内容

本发明旨在至少在一定程度上解决相关技术中的技术问题之一。

根据本发明的第一个方面，提供了一种应用程序的热力图渲染方法，可以包括：

通过移动终端上的应用程序建立移动终端、服务器、浏览器之间的连接；

服务器将采集的应用程序的信息发送到浏览器，在浏览器上绘制与应用程序的元素节点对应的控件元素；

根据预先存储的应用程序的元素节点的位置信息，在浏览器上绘制出对应的控件元素的热力图；

在减少渲染和/或减小渲染范围的情况下，对热力图进行前端渲染。

根据本发明第一个方面的一个实施例，其中服务器采集的应用程序的信息可以包括：

应用程序的截图信息、控件信息、组件层级信息。

根据本发明第一个方面的另一个实施例，其中根据预先存储的应用程序的元素节点的位置信息，在浏览器上绘制出对应的控件元素的热力图包括：

对应用程序的元素节点的位置信息进行遍历，缓存每个元素节点的位置信息，计算每个元素节点的权重关系；

根据每个元素节点的权重关系对每个元素节点进行排序；

计算每个元素节点的层叠关系和/或覆盖情况，移除脏数据。

根据本发明第一个方面的再一个实施例，其中在减少渲染和/或减小渲染范围的情况下，对热力图进行前端渲染包括：

对热力图进行渐进式渲染；

在浏览器上绘制与应用程序的元素节点对应的控件元素时使用的画布大小包含全部热点的最小宽度和最小高度；和/或

选择相对于坐标原点最近点的坐标作为画布的起始位置。

根据本发明第一个方面的又一个实施例，其中相对于坐标原点最近点是指相对于坐标原点最近的、开始具有热力图相关数据的点。

根据本发明第一个方面的一个实施例，其中对热力图进行渐进式渲染包括：

对浏览器上显示的热力图的第一次显示的内容进行同步渲染，后面显示的内容进行异步渐进式渲染。

根据本发明的第二个方面，提供了一种应用程序的热力图渲染装置，可以包括：

移动终端；

服务器；

浏览器，其中移动终端、服务器、浏览器通过移动终端上的应用程序建立相互连接，服务器采集应用程序的信息并且发送到浏览器，浏览器绘制与应用程序的元素节点对应的控件元素；浏览器还根据预先存储的应用程序的元素节点的位置信息，绘制对应的控件元素的热力图；在减少渲染和/或减小渲染范围的情况下，浏览器对热力图进行前端渲染。

根据本发明第二个方面的一个实施例，其中服务器采集的应用程序的信息可以包括：

应用程序的截图信息、控件信息、组件层级信息。

根据本发明第二个方面的另一个实施例，其中浏览器还根据预先存储的应用程序的元素节点的位置信息，绘制对应的控件元素的热力图包括：

对应用程序的元素节点的位置信息进行遍历，缓存每个元素节点的位置信息，计算每个元素节点的权重关系；

根据每个元素节点的权重关系对每个元素节点进行排序；

计算每个元素节点的层叠关系和/或覆盖情况，移除脏数据。

根据本发明第二个方面的再一个实施例，其中在减少渲染和/或减小渲染范围的情况下，浏览器对热力图进行前端渲染包括：

对热力图进行渐进式渲染；

在浏览器上绘制与应用程序的元素节点对应的控件元素时使用的画布大小包含全部热点的最小宽度和最小高度；和/或

选择相对于坐标原点最近点的坐标作为画布的起始位置。

根据本发明第二个方面的又一个实施例，其中相对于坐标原点最近点是指相对于坐标原点最近的、开始具有热力图相关数据的点。

根据本发明第二个方面的一个实施例，其中对热力图进行渐进式渲染可以包括：

对浏览器上显示的热力图的第一次显示的内容进行同步渲染，后面显示的内容进行异步渐进式渲染。

根据本发明的第三个方面，提供了一种计算机设备，可以包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现上述的方法。

根据本发明的第四个方面，提供了一种计算机可读存储介质，其存储有计算机程序，当该程序被处理器执行时实现上述的方法。

借助于本发明的应用程序的热力图渲染方法、装置、计算机设备及其计算机可读存储介质，例如经由WebSocket网络通信协议建立了移动终端、服务器、浏览器之间的连接，可以实时同步移动终端上的APP页面信息，从而能够保证实时性；存储了热点相对于控件元素的位置，这样保证了热点的准确性；另外减轻了服务器压力，不需要存储APP的截图信息；优化了渲染性能，提升了用户体验；最后只存在一个热力图报表，除去了用户筛选、查找、删除的烦恼，除去了额外的工作。

上述概述仅仅是为了说明的目的，并不意图以任何方式进行限制。除上述描述的示意性的方面、实施方式和特征之外，通过参考附图和以下的详细描述，本发明进一步的方面、实施方式和特征将会是容易明白的。

附图说明

在附图中，除非另外规定，否则贯穿多个附图相同的附图标记表示相同或相似的部件或元素。这些附图不一定是按照比例绘制的。应该理解，这些附图仅描绘了根据本发明公开的一些实施方式，而不应将其视为是对本发明范围的限制。

图1示意性示出根据本发明一个实施例的应用程序的热力图渲染方法流程图；

图2示意性示出根据本发明一个实施例的服务器采集的应用程序的信息；

图3示意性示出根据本发明一个实施例的根据预先存储的应用程序的元素节点的位置信息，在浏览器上绘制出对应的控件元素的热力图的情形；

图4示意性示出根据本发明一个实施例的在减少渲染和/或减小渲染范围的情况下，对热力图进行前端渲染的情形；

图5示意性示出根据本发明一个实施例的相对于坐标原点最近点的情形；

图6示意性示出根据本发明一个实施例的对热力图进行渐进式渲染的情形；

图7示意性示出根据本发明一个实施例的热力图在采用本发明应用程序的热力图渲染方法进行优化前后的对照情形；

图8示意性示出根据本发明一个实施例的热力图在采用本发明应用程序的热力图渲染方法进行优化前后的另一对照情形；

图9示意性示出根据本发明一个实施例的应用程序的热力图渲染装置的框图；

图10示意性示出根据本发明一个实施例的计算机设备的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。

在本公开的实施例的描述中，术语“包括”及其类似用语应当理解为开放性包含，即“包括但不限于”。术语“基于”应当理解为“至少部分地基于”。术语“一个实施例”或“该实施例”应当理解为“至少一个实施例”。下文还可能包括其他明确的和隐含的定义。

在本发明的各个实施例中提到的术语“元素节点”一般是指拥有一对开闭合标签的元素整体，例如计算机程序、移动终端的应用程序APP中出现的<ul>...</ul>等这些部分都属于一个元素节点。

在本发明的各个实施例中使用的术语“控件”具有本领域通常的含义，例如是指对数据和方法的封装。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能、控件创建过程包括设计、开发、调试工作，然后是控件的使用。“控件”大致可以分为用户界面控件(用于开发构建用户界面(UI)的控件，帮助完成软件开发中视窗、文本框、按钮、下拉式菜单等界面元素的开发)、图表控件(用于开发图表的控件，帮助软件实现数据可视化，实现开发时较难独立完成的复杂图表)等等。在本发明的各个实施例中使用的“控件”具有用户界面控件和图表控件的属性等。换句话说，“控件”是互联网/软件产品的最小界面元素，包括按钮、单选框、复选框、滚动条等等。

在本发明的各个实施例中使用的术语“组件”具有本领域通常的含义，通常是指通过合理的组合和布局方式形成的比较通用、好用的控件组合。例如“组件”可以分为基本组件、不可编辑信息的显示组件、可编辑信息的显示组件、特殊对话框组件等等。

下面将结合本发明的附图1-10对本发明的实施例进行详细的描述。

根据本发明第一个方面的一个实施例，提供了一种应用程序的热力图渲染方法10，如在图1所示的，可以包括：步骤2，通过移动终端上的应用程序建立移动终端、服务器、浏览器之间的连接；步骤4，服务器将采集的应用程序的信息发送到浏览器，在浏览器上绘制与应用程序的元素节点对应的控件元素；步骤6，根据预先存储的应用程序的元素节点的位置信息，在浏览器上绘制出对应的控件元素的热力图；步骤8，在减少渲染和/或减小渲染范围的情况下，对热力图进行前端渲染。

在本发明的一个实施例中，步骤2中提到的通过移动终端上的应用程序建立移动终端、服务器、浏览器之间的连接具体可以通过下述方式实现：

例如用户在移动终端例如手机的某个APP中通过手势或扫描二维码的方式经由WebSocket网络通信协议建立与服务器的长连接，从而与浏览器例如WEB浏览器建立数据通道。

通过手势的方式建立数据通道，可以例如通过打开手机中的某个特定APP，用两个手指同时按手机屏幕保持30秒，从而建立了移动终端、服务器、浏览器之间的连接。

扫描二维码的方式建立数据通道，可以例如通过“扫一扫二维码，即可查看热力图”方式，从而建立了移动终端、服务器、浏览器之间的连接。

在本发明的一个实施例中，其中服务器采集的应用程序的信息可以包括：应用程序的截图信息、控件信息、组件层级信息，如在图2中所示的。“截图信息”是指APP页面截图包含的信息。“控件信息”例如可以是指上面提到的用户界面控件、图表控件等等包含的信息。“组件层级信息”是指基本组件、不可编辑信息的显示组件、可编辑信息的显示组件、特殊对话框组件等等的层级信息。

在本发明的一个实施例中，其中步骤6中提到的根据预先存储的应用程序的元素节点的位置信息，在浏览器上绘制出对应的控件元素的热力图可以包括：

步骤12，对应用程序的元素节点的位置信息进行遍历，缓存每个元素节点的位置信息，计算每个元素节点的权重关系；

步骤14，根据每个元素节点的权重关系对每个元素节点进行排序；

步骤16，计算每个元素节点的层叠关系和/或覆盖情况，移除脏数据。

借助于例如WebSocket网络通信协议，服务器采集移动终端例如手机上的特定APP的截图信息、控件信息、组件层级信息(图2中所示的)等，并且发送到浏览器端，例如WEB浏览器端，WEB浏览器端则会根据这些信息在浏览器中绘制出来，使得组件层级或者层次结构能够清晰地展现在浏览器中，在浏览器中体现的是与特定APP中的元素节点对应的控件元素。

如在步骤6中提到的根据预先存储的应用程序APP的元素节点的位置信息，其中这些位置信息是预先存储在数据查询服务单元38中的，如在图9中所示的，数据查询服务单元38可以包括存储器等部件。应用程序APP的元素节点的位置信息是相对于控件元素的相对位置，这些相对位置记录了例如特定应用程序APP中的特定元素节点的热点位置，即APP中的相关控件或者组件使用的热度。在根据APP的元素节点的位置信息得到对应的控件元素的位置信息之后，就可以绘制出热力图。但此时的热力图在例如WEB浏览器的浏览器基本上仍是不可见的，下面需要对于得到的热力图进行渲染。

需要说明的是，本发明各个实施例中的使用的应用程序的热力图渲染方法、装置中关键问题的解决在于，如何在浏览器上的截图中绘制控件元素以及如何进行渲染性能的优化。

下面将结合附图介绍如何在浏览器上的截图中绘制控件元素。

为了保证数据的准确性，例如手机上的特定APP的截图信息、控件信息、组件层级信息等的准确性，所有点击的位置信息均是按照相对于APP控件元素的位置进行存储的。这里所指的点击的位置信息是指特定APP中的特定元素节点被用户的手指或者触笔点击的位置信息。例如可能用户经常点击特定APP中左上角的功能选项，此时记录的就是左上角的元素节点被点击的位置信息。在浏览器上映射得到的是特定APP中左上角的控件元素和/或组件的位置信息。例如可能用户经常点击特定APP中右上角的功能选项，此时记录的就是右上角的元素节点被点击的位置信息。在浏览器上映射得到的是特定APP中右上角的控件元素和/或组件的位置信息。例如可能用户经常点击特定APP中左下角的功能选项，此时记录的就是左下角的元素节点被点击的位置信息。在浏览器上映射得到的是特定APP中左下角的控件元素和/或组件的位置信息等等。之后，热力图渲染的关键点则转化为如何在浏览器上的截图中绘制各个控件元素和/或组件。

在本发明的一个实施例中，在经由WebSocket网络通信协议建立移动终端、服务器、浏览器之间的连接之后，服务器一般会主动推送与当前APP的元素节点对应的控件元素和/或组件的信息。本发明的发明人是把这些与当前APP的元素节点对应的控件元素和/或组件的信息进行解析、优化，使其能够在渲染时达到最理想的效果，从而保证热力图的准确性。正如在图3中所示的，步骤6中提到的根据预先存储的应用程序的元素节点的位置信息，在浏览器上绘制出对应的控件元素和/或组件的热力图可以包括：步骤12、步骤14、步骤16。

步骤12中在对应用程序的元素节点的位置信息可以进行广度优先遍历，例如应用程序的每个元素节点的位置信息都进行了遍历，然后缓存每个元素节点的位置信息。这些缓存的每个元素节点的位置信息可以存储在数据查询服务单元38中，例如存储器的部件中。然后计算每个元素节点的权重关系。例如缓存的每个元素节点的位置信息可以包含每个元素节点的位置、左上角点的坐标、矩形的宽度和高度尺寸等等。在本发明的一个实施例中，计算每个元素节点的权重关系可以设计为将控件元素和/或组件层级较深的部分，赋予较大的权重，对于控件元素和/或组件层级较浅的部分，赋予较小的权重。这是因为在浏览器上绘制的热力图中控件元素和/或组件层级较深的部分更容易显现出来，常常出现于热力图的表面，而在浏览器上绘制的热力图中控件元素和/或组件层级较浅的部分不太容易显现出来，经常被层级较深的控件元素和/或组件覆盖，而且这些控件元素和/或组件层级较浅的部分常常更加靠近绘制的热力图的底层。

步骤14中提到了根据每个元素节点的权重关系对每个元素节点进行排序。例如根据每个元素节点的权重从小到大的顺序，或者根据每个元素节点的权重从大到小的顺序，对每个元素节点进行排序。

在步骤16中提到了计算每个元素节点的层叠关系和/或覆盖情况，移除脏数据。考虑到与每个元素节点对应的将被映射到浏览器上的控件元素和/或组件的层叠关系以及相互之间的覆盖情况，移除脏数据。例如与元素节点m对应的将被映射到浏览器上的控件元素m’和/或组件m”、与元素节点n对应的将被映射到浏览器上的控件元素n’和/或组件n”之间是控件元素n’和/或组件n”代表的矩形框比控件元素m’和/或组件m”代表的矩形框要大，并且在位置上正好控件元素n’和/或组件n”代表的矩形框覆盖了控件元素m’和/或组件m”代表的矩形框，这时可以认为控件元素m’和/或组件m”代表的矩形框对于绘制热力图基本上没有什么贡献，而且还会增加计算量和计算时间、和平均耗时等，在这样的情况下，可以认为与元素节点m对应的将被映射到浏览器上的控件元素m’和/或组件m”的相关数据是脏数据，移除这样的脏数据可以减少计算量、减小计算时间、和平均耗时，使得得到的热力图的图像更加清晰等。例如在图7A和图7B中分别示出了优化前后的热力图的前后对照。根据图7A和图7B的显示，可见在计算每个元素节点的层叠关系和/或覆盖情况下移除脏数据后得到的热力图7B在线条轮廓上相对于热力图7A来讲更加清晰，更加方便用户迅速看清特定APP的热力图，图7A中的热力图存在线条重合交叉、重点部分不突出的缺陷。

上面提到了本发明各个实施例中应用程序的热力图渲染方法、装置中关键问题的解决在于，如何在浏览器上的截图中绘制控件元素以及如何进行渲染性能的优化。下面将结合附图介绍如何进行渲染性能的优化。

在本发明的一个实施例中，步骤8中提到的在减少渲染和/或减小渲染范围的情况下，对热力图进行前端渲染可以包括下面的方式，例如对热力图进行渐进式渲染18；在浏览器上绘制与应用程序的元素节点对应的控件元素时使用的画布大小包含全部热点的最小宽度和最小高度22；和/或选择相对于坐标原点最近点的坐标作为画布的起始位置24，如在图4中所示的。

在本发明的一个实施例中，例如当热点数据量很大的时候，例如有许多控件元素和/或组件都是热点的情况下，即，针对多个控件元素和/或组件，用户的点击量都很大的情况下，这时候热力图渲染就会比较耗费时间。如果从后端角度出发，优化点常常就是对这些数据进行聚合，控制热点的数量，但是热点数量太少又会影响热力图的渲染效果，导致不精确，因此从前端角度出发对渲染性能进行优化是有必要的，所以在步骤8中提到了对热力图进行前端渲染。

还需要指出的是，在浏览器端绘制的热力图是根据画布(canvas)绘制的，但是随着画布大小的增大，绘制的时间也是不断飙升，因此最直接的有效的方法就是减少渲染和/或减小渲染范围。例如可以进行如下的优化：

例如对热力图进行渐进式渲染18，可以包括对浏览器上显示的热力图的第一次显示的内容进行同步渲染，后面显示的内容进行异步渐进式渲染，如在图6所示的。

备选的，上面提到的在浏览器上绘制与应用程序的元素节点对应的控件元素时使用的画布大小包含全部热点的最小宽度和最小高度22是因为，使用的画布大小包含全部热点的最小宽度和最小高度可以减少渲染和/或减小渲染的范围，从而减少平均耗时，减少无谓的渲染时间。

备选的，上面提到的选择相对于坐标原点最近点的坐标作为画布的起始位置24(图5示意性示出)是因为有可能例如在画布上的点(10,10)处才开始具有控件元素和/组件的位置数据，因此画布的起始位置如果取坐标原点(0，0)作为绘制热力图的起始点的话就会存在计算量的无谓增大，浪费计算资源，延长平均耗时。上面提到的，“相对于坐标原点最近点”是指相对于坐标原点最近的、开始具有热力图相关数据的点。选择相对于坐标原点最近点的坐标作为画布的起始位置同样可以减少渲染和/或减小渲染的范围，从而减少平均耗时。例如图8A中示出了在没有减少渲染和/或减小渲染范围的情况下，平均耗时为648.97毫秒(ms)；图8B中示出了在减少渲染和/或减小渲染范围的情况下，平均耗时为437.3毫秒(ms)，

根据本发明的第二个方面的一个实施例，提供了一种应用程序的热力图渲染装置30，可以包括：

移动终端32；

服务器34；

浏览器36，其中移动终端32、服务器34、浏览器36通过移动终端32上的应用程序建立相互连接，服务器34采集应用程序的信息并且发送到浏览器36，浏览器36绘制与应用程序的元素节点对应的控件元素；浏览器36还根据预先存储的应用程序的元素节点的位置信息，绘制对应的控件元素的热力图；在减少渲染和/或减小渲染范围的情况下，浏览器36对热力图进行前端渲染。

备选的，一种应用程序的热力图渲染装置30还可以包括与服务器34进行连接的数据查询服务单元38。

在根据本发明第二个方面的一个实施例中，其中服务器34采集的应用程序的信息可以包括：

应用程序的截图信息、控件信息、组件层级信息。

在根据本发明第二个方面的一个实施例中，其中浏览器36还根据预先存储的应用程序的元素节点的位置信息，绘制对应的控件元素的热力图可以包括：

对应用程序的元素节点的位置信息进行遍历，缓存每个元素节点的位置信息，计算每个元素节点的权重关系；

根据每个元素节点的权重关系对每个元素节点进行排序；

计算每个元素节点的层叠关系和/或覆盖情况，移除脏数据。

在根据本发明第二个方面的一个实施例中，其中在减少渲染和/或减小渲染范围的情况下，浏览器36对热力图进行前端渲染包括：

对热力图进行渐进式渲染；

在浏览器36上绘制与应用程序的元素节点对应的控件元素时使用的画布大小包含全部热点的最小宽度和最小高度；和/或

选择相对于坐标原点最近点的坐标作为画布的起始位置。

在根据本发明第二个方面的一个实施例中，其中相对于坐标原点最近点是指相对于坐标原点最近的、开始具有热力图相关数据的点。

在根据本发明第二个方面的一个实施例中，其中对热力图进行渐进式渲染可以包括：

对浏览器36上显示的热力图的第一次显示的内容进行同步渲染，后面显示的内容进行异步渐进式渲染。

在根据本发明第三方面的实施例中，提供了一种计算机设备，可以包括：一个或多个处理器；存储装置，用于存储一或多个程序；当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现如上的方法。

在根据本发明第四方面的实施例中，提供了一种计算机可读存储介质，其存储有计算机程序，其特征在于，该程序被处理器执行时实现如上的方法。

例如，图10示出了可以用来实施本公开的实施例的示例计算机设备40的示意性框图。应当理解，计算机设备40可以用于实现本公开所描述的应用程序的热力图渲染方法10。如图所示，计算机设备40包括中央处理单元(CPU)42，其可以根据存储在只读存储器(ROM)44中的计算机程序指令或者从存储单元56加载到随机访问存储器(RAM)46中的计算机程序指令，来执行各种适当的动作和处理。在RAM 46中，还可存储计算机设备40操作所需的各种程序和数据。CPU42、ROM 44以及RAM 46通过总线48彼此相连。输入/输出(I/O)接口50也连接至总线48。

计算机设备40中的多个部件连接至I/O接口50，包括：输入单元52，例如键盘、鼠标等；输出单元54，例如各种类型的显示器、扬声器等；存储单元56，例如磁盘、光盘等；以及通信单元58，例如网卡、调制解调器、无线通信收发机等。通信单元58允许计算机设备40通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

处理单元42执行上文所描述的各个方法和过程，例如方法10。例如，在一些实施例中，方法10可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元56。在一些实施例中，计算机程序的部分或者全部可以经由ROM 44和/或通信单元58而被载入和/或安装到计算机设备40上。当计算机程序加载到RAM 46并由CPU42执行时，可以执行上文描述的方法10的一个或多个动作或步骤。备选地，在其他实施例中，CPU42可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行方法10。

借助于本发明的应用程序的热力图渲染方法、装置、计算机设备及其计算机可读存储介质，例如经由WebSocket网络通信协议建立了移动终端、服务器、浏览器之间的连接，可以实时同步移动终端上的APP页面信息，从而能够保证实时性；存储了热点相对于控件元素的位置，这样保证了热点的准确性；另外减轻了服务器压力，不需要存储APP的截图信息；优化了渲染性能，提升了用户体验；最后只存在一个热力图报表，除去了用户筛选、查找、删除的烦恼，除去了额外的工作。

本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)，等等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

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

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得程序，然后将其存储在计算机存储器中。

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

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成的，该程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读存储介质中。存储介质可以是只读存储器，磁盘或光盘等。

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

Claims (12)

1.一种应用程序的热力图渲染方法，其特征在于，包括：

通过移动终端上的所述应用程序建立所述移动终端、服务器、浏览器之间的连接；

所述服务器将采集的所述应用程序的信息发送到所述浏览器，在所述浏览器上绘制与所述应用程序的元素节点对应的控件元素；

根据预先存储的所述应用程序的元素节点的位置信息，在所述浏览器上绘制出对应的所述控件元素的热力图；

在减少渲染和/或减小渲染范围的情况下，对所述热力图进行前端渲染；

其中，所述根据预先存储的所述应用程序的元素节点的位置信息，在所述浏览器上绘制出对应的所述控件元素的热力图包括：

对所述应用程序的元素节点的位置信息进行遍历，缓存每个所述元素节点的位置信息，计算每个所述元素节点的权重关系；

根据每个所述元素节点的权重关系对每个所述元素节点进行排序；

计算每个所述元素节点的层叠关系和/或覆盖情况，移除脏数据。

2.根据权利要求1所述的应用程序的热力图渲染方法，其中所述服务器采集的所述应用程序的信息包括：

所述应用程序的截图信息、控件信息、组件层级信息。

3.根据权利要求1所述的应用程序的热力图渲染方法，其中在减少渲染和/或减小渲染范围的情况下，对所述热力图进行前端渲染包括：

对所述热力图进行渐进式渲染；

在所述浏览器上绘制与所述应用程序的元素节点对应的控件元素时使用的画布大小包含全部热点的最小宽度和最小高度；和/或

选择相对于坐标原点最近点的坐标作为所述画布的起始位置。

4.根据权利要求3所述的应用程序的热力图渲染方法，其中所述相对于坐标原点最近点是指相对于坐标原点最近的、开始具有热力图相关数据的点。

5.根据权利要求4所述的应用程序的热力图渲染方法，其中所述对所述热力图进行渐进式渲染包括：

对所述浏览器上显示的热力图的第一次显示的内容进行同步渲染，后面显示的内容进行异步渐进式渲染。

6.一种应用程序的热力图渲染装置，其特征在于，包括：

移动终端；

服务器；

浏览器，其中所述移动终端、服务器、浏览器通过移动终端上的所述应用程序建立相互连接，所述服务器采集所述应用程序的信息并且发送到所述浏览器，所述浏览器绘制与所述应用程序的元素节点对应的控件元素；所述浏览器还根据预先存储的所述应用程序的元素节点的位置信息，绘制对应的所述控件元素的热力图；在减少渲染和/或减小渲染范围的情况下，所述浏览器对所述热力图进行前端渲染；

其中，所述浏览器还根据预先存储的所述应用程序的元素节点的位置信息，绘制对应的所述控件元素的热力图包括：

对所述应用程序的元素节点的位置信息进行遍历，缓存每个所述元素节点的位置信息，计算每个所述元素节点的权重关系；

根据每个所述元素节点的权重关系对每个所述元素节点进行排序；计算每个所述元素节点的层叠关系和/或覆盖情况，移除脏数据。

7.根据权利要求6所述的应用程序的热力图渲染装置，其中所述服务器采集的所述应用程序的信息包括：

所述应用程序的截图信息、控件信息、组件层级信息。

8.根据权利要求6所述的应用程序的热力图渲染装置，其中在减少渲染和/或减小渲染范围的情况下，所述浏览器对所述热力图进行前端渲染包括：

对所述热力图进行渐进式渲染；

在所述浏览器上绘制与所述应用程序的元素节点对应的控件元素时使用的画布大小包含全部热点的最小宽度和最小高度；和/或

选择相对于坐标原点最近点的坐标作为所述画布的起始位置。

9.根据权利要求8所述的应用程序的热力图渲染装置，其中所述相对于坐标原点最近点是指相对于坐标原点最近的、开始具有热力图相关数据的点。

10.根据权利要求9所述的应用程序的热力图渲染装置，其中所述对所述热力图进行渐进式渲染包括：

对所述浏览器上显示的热力图的第一次显示的内容进行同步渲染，后面显示的内容进行异步渐进式渲染。

11.一种计算机设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。

12.一种计算机可读存储介质，其存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-5中任一所述的方法。

Images