CN111651700A - 消息展示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请涉及通讯技术领域，公开了一种消息展示方法、装置、电子设备及存储介质，其中，消息展示方法，包括：获取当前会话中待显示的全部聊天消息，确定用于展示聊天消息的可视区域的可视高度；根据所述可视高度及预设展示规则确定展示于所述可视区域的待展示消息；根据所述全部聊天消息及所述待展示消息确定隐藏消息；根据所述隐藏消息的内容及高度确定DOM隐藏节点，利用确定出的DOM隐藏节点表征所述隐藏消息，并通过所述DOM隐藏节点将所述隐藏消息展示于隐藏区；将所述待展示消息渲染后展示于可视区域。本申请提供的方案，避免对隐藏消息的渲染，减少隐藏消息对系统资源的占用，以优化页面展示性能。

Description

消息展示方法、装置、电子设备及存储介质

技术领域

本申请涉及通讯技术领域，具体而言，本申请涉及一种消息展示方法、装置、电子设备及存储介质。

背景技术

即时通信随着节奏加快越来越流行，即时通信可以通过网页端及客户端展示，以网页端为例，对于即时通信的消息可以全量显示，也可以按需显示当前的聊天消息。

即时通信中，可能会出现某一时间段接收到大量的聊天消息，该聊天消息的进行全量显示的数据处理量会非常大，当数据量大到一定程度时，消息展示界面就会卡顿，由于网页单线程的特点，全量显示所有聊天消息的做法会造成系统的全面卡顿，包括接收和发送消息都无法进行，页面展示性能差。

发明内容

本申请的目的旨在至少能解决上述的技术缺陷之一，特提出以下技术方案：

本申请的一个方面，提供了一种消息展示方法，包括：

获取当前会话中待显示的全部聊天消息，确定用于展示聊天消息的可视区域的可视高度；

根据所述可视高度及预设展示规则确定展示于所述可视区域的待展示消息；

根据所述全部聊天消息及所述待展示消息确定隐藏消息；

根据所述隐藏消息的内容及高度确定DOM隐藏节点，利用确定出的DOM隐藏节点表征所述隐藏消息，并通过所述DOM隐藏节点将所述隐藏消息展示于隐藏区；

将所述待展示消息渲染后展示于可视区域。

本申请的另一个方面，提供了一种消息展示装置，该装置包括：

获取聊天消息模块，用于获取当前会话中待显示的全部聊天消息，确定用于展示聊天消息的可视区域的可视高度；

确定待展示消息模块，用于根据所述可视高度及预设展示规则确定展示于所述可视区域的待展示消息；

确定隐藏消息模块，用于根据所述全部聊天消息及所述待展示消息确定隐藏消息；

隐藏模块，用于根据所述隐藏消息的内容及高度确定DOM隐藏节点，利用确定出的DOM隐藏节点表征所述隐藏消息，并通过所述DOM隐藏节点将所述隐藏消息展示于隐藏区；

展示模块，用于将所述待展示消息渲染后展示于可视区域。

本申请的再一个方面，提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现本申请第一方面所示的消息展示方法。

本申请的又一个方面，提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现本申请第一方面所示的消息展示方法。

本申请提供的技术方案带来的有益效果是：

本申请提供的消息展示方法，利用DOM隐藏节点表征至少一条隐藏消息，隐藏消息采用DOM隐藏节点替代并置于隐藏区，但隐藏区的隐藏消息未经过渲染，因此，减少对隐藏消息的渲染等处理对系统资源的占用，优化页面展示性能。而且，DOM隐藏节点中包含隐藏消息的内容及高度，能够实现对隐藏消息的重新加载显示。

本申请提供的消息展示方法，对聊天消息采用倒序渲染的方式，即首先确定待展示消息中的最后一条消息，再根据每条待展示消息的渲染高度与可视高度确定展示在可视区域的第一条消息，将显示位置处于可视区域顶端的第一条消息至可视区域底端的最后一条消息之间的消息以及该第一条消息、该最后一条消息作为待展示消息。本申请利用滚动轴的位置首先确定可视区域的最后一条消息，结合有可能显示在可视区域的聊天消息的渲染高度倒序确定可视区域的第一条消息，能够准确地确定可视区域中显示的所有待展示消息，进而实现隐藏消息的准确确定。

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

附图说明

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

图1为本申请一个实施例提供的消息展示方法的流程图；

图2-1为本申请一个实施例提供的当前界面上的聊天窗口为空白时对应的界面展示图；

图2-2为本申请一个实施例提供的页面上无滚动轴，将所有聊天消息展示于可视区域的界面展示图；

图2-3为本申请一个实施例提供的可视区域出现滚动轴，且滚动轴在可视区域最底端时，聊天消息的界面展示图；

图3为本申请一个实施例提供的一条聊天消息包括的节点示意图；

图4为本申请一个实施例提供的聊天消息的分布图，该分布图中包括一个隐藏区；

图5为本申请一个实施例提供的图4所示方案的实施流程图；

图6为本申请另一个实施例提供聊天消息的分布图，该分布图中的隐藏区包括第一消息集所在区域及第二消息集所在区域；

图7为本申请另一个实施例提供的图6所示方案的实施流程图；

图8为本申请一个实施例提供的利用本申请提供的消息展示方法进行页面优化前后的页面布局对比图；

图9为本申请实施例提供的一种消息展示装置的结构示意图；

图10为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

下面详细描述本申请的实施例，实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本申请的限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

本领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。

DOM：文档对象模型，是浏览器描述网页节点的对象模型，方便开发人员对文档进行面向对象操作。

发明人在研究过程中发现，由于聊天消息的内容长度不固定，渲染到用户界面上的高度也是不固定的，若每条消息设置固定的渲染高度，会出现内容无法完全展示的情况，因此，无法根据消息的条数简单计算消息在可视区域的渲染高度，也无法准确获知哪些消息能够展示在展示界面上。

对于现有技术中所存在的技术问题，本申请提供的消息展示方法、装置、电子设备及存储介质，旨在解决现有技术的如上技术问题中的至少一项，能够减少对隐藏消息的数据处理量，进而提高页面展示性能。

下面以具体实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

本申请实施例中提供了一种可能的实现方式，如图1所示，提供了一种消息展示方法，该方案可以在客户端执行，包括以下步骤：

步骤S110，获取当前会话中待显示的全部聊天消息，确定用于展示聊天消息的可视区域的可视高度；

步骤S120，根据所述可视高度及预设展示规则确定展示于所述可视区域的待展示消息；

步骤S130，根据所述全部聊天消息及所述待展示消息确定隐藏消息；

步骤S140，根据所述隐藏消息的内容及高度确定DOM隐藏节点，利用确定出的DOM隐藏节点表征所述隐藏消息，并通过所述DOM隐藏节点将所述隐藏消息展示于隐藏区；

步骤S150，将所述待展示消息渲染后展示于可视区域。

即时聊天中，当前会话中待显示的聊天信息可能会出现短时间内数量暴增的情况，用于展示聊天消息的可视区域的面积有限，不能在当前界面上展示所有的聊天消息，因此，本申请基于可视区域的可视高度及预设展示规则确定展示于可视区域的待展示消息，进而确定隐藏消息，实现对可视区域中展示的待展示消息及隐藏消息的准确确定，以及，利用DOM隐藏节点表征隐藏消息，并通过DOM隐藏节点将隐藏消息展示于隐藏区，将待展示消息渲染展示于可视区域，实现有序展示待展示消息的同时，避免数据处理量较大引起的展示卡顿问题。

其中，预设展示规则包括：可视区域是否存在滚动轴，若是，基于滚动轴的位置确定待展示消息，若否，表明全部聊天消息数量不多，可以将全部聊天消息作为待展示消息，渲染后展示于可视区域中。

当前界面上的聊天窗口为空白时，其界面展示图如图2-1所示，当前界面上存在聊天消息，但页面上无滚动轴，将所有聊天消息展示于可视区域的界面展示图如图2-2所示。本地端接收到大量聊天消息时，当前界面上存在大量聊天消息时，聊天消息所占面积超过可视区域面积，可视区域出现滚动轴，滚动轴在可视区域最底端时，聊天消息的界面展示图如图2-3所示，在该页面上，位于可视区域顶端的第一条消息之前的消息无法展示于可视区域，因此用户无法看到，在此情况下，将用户无法看到的消息作为隐藏消息，根据隐藏消息的内容及高度确定DOM隐藏节点，即利用DOM隐藏节点表征所述隐藏消息的内容及高度。

本申请利用可视高度及预设展示规则确定展示于可视区域的待展示消息，进而结合全部的聊天消息确定隐藏消息，能够准确地确定待展示消息和隐藏消息。

利用确定出的DOM隐藏节点表征隐藏消息，通过DOM隐藏节点将隐藏消息展示于隐藏区，DOM隐藏节点对应的高度与隐藏消息的高度之和相等，且DOM隐藏节点中包括隐藏消息的内容，以便后续通过加载DOM隐藏节点实现对隐藏消息的重新加载、显示。

每条聊天消息均包括大量节点，以腾讯企鹅辅导为例，一条聊天消息包括的节点示意图如图3所示，节点按照树形分布，根节点下包括如下四个节点：用户信息、消息内容体、重发按钮、载入状态，其中，用户信息包括：头像、账号类别、昵称(包括真名)、角色、是否禁言等子节点，消息内容体包括：文本内容第一段、表情、文本内容第二段、内嵌图片等子节点，若每条聊天消息均渲染所有的节点，若该消息为隐藏消息，则会浪费大量资源渲染这些没必要渲染的节点。因此，将待展示消息渲染后展示于可视区域，将隐藏消息不加渲染置于隐藏区，实现仅渲染待展示消息，避免了渲染隐藏消息造成的资源浪费。

本申请提供的消息展示方法，利用DOM隐藏节点表征至少一条隐藏消息，即采用DOM隐藏节点替代隐藏消息，DOM隐藏节点中包含隐藏消息的内容及高度，但隐藏消息未经过渲染，因此，避免对隐藏消息的渲染，省去对隐藏消息的渲染，减少隐藏消息对系统资源的占用，以优化页面展示性能。

为了更清楚本申请提供的消息展示方案及其技术效果，接下来以多个实施例对其具体实施方案进行详细阐述。

本申请实施例中提供了一种可能的实现方式，上述步骤S120中，当可视区域存在滚动轴时，根据可视高度及预设展示规则确定展示于可视区域的待展示消息，其可以通过如下方式实现，包括：

A1，获取当前滚动轴的位置，根据滚动轴的位置确定展示在所述可视区域底端的最后一条消息；

A2，获取该最后一条消息及接收时间在该最后一条消息之前的若干条消息中每条消息的渲染高度；

A3，根据每条消息的渲染高度及可视高度确定展示于可视区域顶端的第一条消息；

A4，将该第一条消息、该最后一条消息及两者之间的消息确定为待展示消息。

获取当前滚动轴的位置，根据当前滚动轴的位置确定展示于可视区域的最后一条消息，滚动轴在可视区域中的位置与消息展示位置的对应关系可以预先构建，如：将滚动轴置于可视区域的最底端时，当前接收到的最新消息为展示在可视区域底端的最后一条消息。

获取上述最后一条消息及接收时间在该最后一条消息之前的若干条消息中每条消息的渲染高度，其中，该若干条消息可以通过未经渲染的每条消息的预设高度与可视区域的高度确定。

例如，预先设定未经渲染的每条消息的高度为0.3cm，可视区域的高度为10cm，对10/0.3取整，得到整数33，则示例中，由于最后一条消息占用了一条消息的展示位置，因此，上述若干条消息为32条消息。

可选地，当未经渲染的消息的预设高度为最少内容的消息的高度，则对A/a取整得到的消息条数确定为上述若干条消息的数量，进而明确待渲染的消息，其中，A为可视区域的高度，a为未经渲染的每条消息的预设高度。

对该最后一条消息及上述若干条消息进行渲染，获得该最后一条消息及若干条消息中每条消息的渲染高度。根据最后一条消息及上述若干条消息中每条消息的渲染高度，以及可视高度确定展示于可视区域顶端的第一条消息，例如：可视区域底端的最后一条待展示消息的编号为n，从可视区域底端至顶端方向上，编号依次为(n-1)、(n-2)、…、(n-32)的聊天消息对应的渲染高度依次为0.3cm、0.6cm、1cm、2cm、3cm、3cm、1cm、…、0.6cm，即最后一条消息的渲染高度为0.3cm，可视区域的高度为10cm时，展示于可视区域顶端的第一条消息为编号为(n-5)对应的消息。此时，将编号为n、(n-1)、(n-2)、…、(n-5)对应的消息作为待展示消息展示于可视区域中。

一种实施例提供的所有聊天消息的分布图如图4所示，在该分布图中包括隐藏区和可视区域，所有聊天消息的高度为隐藏区的高度与可视区域的高度之和，对所有聊天消息进行顺序编号，消息的编号依次为1、2、…、k、k+1、…、n，(k、n均为大于2的正整数)，可视区域顶端的第一条消息至可视区域底端的最后一条消息均展示于可视区域，如图4所示，可视区域顶端的第一条消息为编号(k+1)的消息，可视区域底端的最后一条消息为编号为n的消息。

该方案的实施流程，请参照图5，获取所有聊天消息的编号，利用监听接口监听待展示消息的渲染高度，若检测到任一待展示消息的渲染高度发生变化，根据变化后的渲染高度更新包括所有聊天消息的高度组成的第一高度列表数组[h1,h2,h3,…,hn]，其中，hn为编号为n的聊天消息的高度，并根据高度列表数组获得各消息到可视区域底端的最后一条消息的高度组成的第二高度列表数组[H1,H2,H3,…，Hn]，其中，Hn＝hn，H(n-1)＝hn+h(n-1)，H1＝h1+h2+…+hn；获取可视区域顶端的第一条消息的编号k，若聊天消息的编号小于该第一条消息的编号k，则该聊天消息为隐藏消息，插入与该隐藏消息高度相同的DOM隐藏节点，若聊天消息的编号大于该第一条消息的编号，则该聊天消息为待展示消息，保留在可视区域。

本申请实施例提供的方案，目的是确定展示于可视区域的待展示消息，对聊天消息采用倒序渲染的方式，即首先确定待展示消息中的最后一条消息，然后根据每条待展示消息的渲染高度与可视高度确定展示在可视区域的第一条消息，将显示位置处于可视区域顶端的第一条消息至可视区域底端的最后一条消息之间的消息以及该第一条消息、该最后一条消息作为待展示消息。本申请利用滚动轴的位置首先确定的是可视区域的最后一条消息，结合有可能显示在可视区域的聊天消息的渲染高度倒序确定可视区域的第一条消息，能够准确地确定可视区域中显示的所有待展示消息。

在此基础上，步骤S130的根据全部聊天消息及待展示消息确定隐藏消息，包括：

B1，对所有聊天消息按照接收时间的先后顺序进行编号，获得最后一条消息的编号及第一条消息的编号；

B2，若该最后一条消息为当前接收到的最新消息，确定编号小于该第一条消息的编号对应的消息为隐藏消息；

B3，若该最后一条消息并非当前接收到的最新消息，确定编号小于该第一条消息的编号对应的第一消息集，以及，编号大于该最后一条消息的编号对应的第二消息集，确定该第一消息集与第二消息集为隐藏消息。

按照本地终端对聊天消息的接收时间对所有聊天消息进行由小到大排序，按照上一实施例提供的方案获得可视区域中展示的第一条消息和最后一条消息，获取该第一条消息的编号及最后一条消息的编号，结合图4所示，第一条消息的编号为(k+1)，可视区域底端的最后一条消息的编号为n。

若该最后一条消息为当前接收到的最新消息，即编号为n对应的消息为当前接收到的最新消息，由于所有消息的编号是按照由小到大的顺序进行排列的，因此，编号小于可视区域顶端的第一条消息的消息则无法显示在可视区域，确定编号小于该第一消息的编号对应的消息为隐藏消息。而且，由于展示于可视区域底端的最后一条消息为最新消息，该最后一条消息之后暂未接收到新的聊天消息，该种情况下的隐藏消息仅包括编号小于可视区域顶端的第一条消息的消息组成的消息集。

若该最后一条消息并非为当前接收到的最新消息，即，接收时间在可视区域底端的最后一条消息之后，还接收到了其他聊天消息，但是由于滚动轴的移动，最后一条消息之后的消息无法展示在可视区域中，该种情况下，编号大于展示于可视区域底端的最后一条消息的消息也是隐藏消息，也就是说，隐藏消息包括两部分，为了便于区分两部分消息，将编号小于展示于可视区域顶端的第一条消息的消息集合作为第一消息集，将编号大于该最后一条消息的消息集合作为第二消息集，即该种情况下，隐藏消息由两部分组成，包括第一消息集及第二消息集。

本可选实施例提供的聊天消息的分布图如图6所示，该分布图中的隐藏区包括第一消息集所在区域及第二消息集所在区域，第一消息集的消息对应的编号依次为1、2、…、k，第二消息集的消息对应的编号依次为(m+1)、(m+2)、…、n，可视区域中显示的待展示消息对应的编号依次为(k+1)、(k+2)、…、m，所有聊天消息的总高度为第一消息集的高度、可视高度、第二消息集的高度的累加之和。其中，获取隐藏消息的预设高度，那么，第一消息集的高度为第一消息集中的消息条数与该预设高度的乘积，第二消息集的高度为第二消息集中的消息条数与该预设高度的乘积。

该方案的实施流程，请参照图7，获取所有聊天消息的编号，利用监听接口监听待展示消息的渲染高度，若检测到任一待展示消息的渲染高度发生变化，根据变化后的渲染高度更新包括所有聊天消息的高度组成的第一高度列表数组[h1,h2,h3,…,hm,…,hn]，并根据高度列表数组获得各消息到最后一条聊天消息的高度组成的第二高度列表数组[H1,H2,H3,…,Hm,…，Hn]，其中，Hn＝hn，H(n-1)＝hn+h(n-1)，H1＝h1+h2+…+hn；获取可视区域顶端的第一条消息的编号k及可视区域底端的最后一条消息的编号m，若聊天消息的编号小于该第一条消息的编号k或者大于该最后一条消息的编号m，则该聊天消息为隐藏消息，插入与该隐藏消息的高度相等的DOM隐藏节点替代该隐藏消息，若聊天消息的编号不小于该第一条消息的编号且不大于该最后一条消息的编号，则该聊天消息为待展示消息，保留在可视区域。

另外，由于滚动轴的移动，已经在可视区域展示过，但随着滚动轴的移动，该条消息留在了隐藏区，则可以采用渲染高度替代隐藏消息的预设高度，若该条消息的高度采用了渲染高度表征，则可以采用标识表征该条隐藏消息的高度为渲染高度。而未计算过渲染高度的隐藏消息在展示在可视区域之前，需要计算该隐藏消息的渲染高度，上述任一种情况均会导致第一高度列表数组及第二高度列表数组的改变，因此，上述任一情况发生时，需要更新第一高度列表数组及第二高度列表数组，以便基于更新后的第一、第二高度列表数组确定待展示消息及隐藏消息。

本实施例提供的方案，根据当前接收到的最新消息是否为展示于可视区域的最后一条消息，即基于滚动轴的位置确定隐藏区的位置，隐藏区可以位于可视区域之上、位于可视区域之下，然后根据消息的编号与可视区域中第一条消息的编号及最后一条消息的编号之间的关系确定隐藏消息，实现准确确定隐藏消息。

在该种方案中，分别获得表征第一消息集及第二消息集对应的第一DOM隐藏节点及第二DOM隐藏节点，利用第一DOM隐藏节点将第一消息集展示于位于可视区域之上的隐藏区，利用第二DOM隐藏节点将第二消息集展示于可视区域之下的隐藏区。

在一种可选实施例中，A4提供的将第一条消息、最后一条消息及两者之间的消息确定为待展示消息之后，还包括：

A5，检测到滚动轴发生位置移动，根据滚动轴的移动方向及移动距离确定待加载消息；

A6，加载相应DOM隐藏节点中待加载消息的内容，并渲染显示该待加载消息。

检测到滚动轴发生位置移动，获得滚动轴的移动方向，若可视区域中展示的最后一条消息为最新消息，则滚动轴的移动方向仅包括上移方向，若可视区域中展示的最后一条消息并非为最新消息，则滚动轴的移动方向包括上移和下移两个方向。

若滚动轴的移动方向为上移，则加载上移方向上的DOM隐藏节点中的部分隐藏信息的内容，并渲染显示该部分隐藏消息。其中，滚动轴的移动高度与消息的移动高度的关联关系可以预先设定，根据滚动轴的移动方向及移动距离确定待加载消息并加载该待加载消息的内容，如：滚动轴向上移动1cm，对应的聊天消息的向上移动10cm，若可视高度为10cm，则依次加载对应隐藏区中DOM隐藏节点中从上述第一条消息之上，且渲染高度之和为10cm对应的消息的内容，并将该部分消息渲染、显示于可视区域。

若滚动轴的移动方向为下移，加载位于可视区域之下的隐藏区对应的DOM隐藏节点，按照上述相同方式确定待加载的部分隐藏消息，待加载的部分隐藏消息，也可以称为待加载消息，从隐藏消息对应的DOM隐藏节点中提取该待加载消息的内容，并渲染显示该待加载消息。

本实施例提供了加载隐藏消息的方式，由于隐藏消息置于隐藏区，并不显示在可视区域中，并未经过渲染，因此，在需要进行显示时，需要从DOM隐藏节点中加载隐藏消息的内容及高度，该高度为待加载的隐藏消息的渲染高度，以便后续将渲染后的消息展示于可视区域中。有利于实现对隐藏消息的精确加载，避免加载无法显示于可视区域的消息，降低加载该部分消息的资源消耗。

作为一种可选实施例，加载相应DOM隐藏节点中待加载消息的内容，还可以根据如下方式进一步降低数据加载量，具体包括如下步骤：

C1，根据滚动轴移动后的位置确定待展示在可视区域底端的最后一条待加载消息的编号及第一条待加载消息的编号；

C2，当滚动轴的移动方向为上移时，若该最后一条待加载消息的编号大于可视区域中展示的第一条消息的编号，加载编号大于该第一条消息且小于等于该第一条待加载消息对应的隐藏消息的内容；

C3，当滚动轴的移动方向为下移时，若该第一条待加载消息的编号小于可视区域中展示的最后一条消息的编号，加载编号大于最后一条消息且小于等于最后一条待加载消息对应的隐藏消息的内容。

本申请实施例提供的方案，滚动轴当前所在位置对应的可视区域中展示的消息集，与滚动轴移动后所在位置对应的可视区域中展示的待加载消息集存在重合消息，加载滚动轴移动后对应的可视区域中除去重合消息的消息，避免重复加载重合消息，能够避免加载重复消息的资源消耗。

作为一种可选实施例，A4中将第一条消息、最后一条消息及两者之间的消息确定为待展示消息之后，还包括：

D1，通过浏览器的监听接口监测待展示消息的渲染高度；

D2，若任一待展示消息的渲染高度发生变化，根据待展示消息变化后的渲染高度更新待展示消息列表，待展示消息列表包括至少一个待展示消息；

D3，将更新后的待展示消息列表中的待展示消息渲染后展示于可视区域。

可选地，通过浏览器原生API的监听接口，该监听接口可以为MutationObserver，该监听接口可以监听DOM节点所有变化，如任一属性发生变化等，DOM节点的任何一种变化都会进行监听接口的回调，但由于本申请在确定待展示信息及隐藏信息过程中，消息的高度发生改变会引发待展示消息及隐藏消息的调整，因此，本申请利用监听接口监测待展示消息的高度，若监测到任一待展示消息的渲染高度发生改变时，根据变化后的渲染高度更新待展示消息列表，该待展示消息列表包括至少一个待展示消息，由于待展示消息的渲染高度与可视高度能够确定待展示消息，因此，任一待展示消息的渲染高度发生改变可能会引起待展示列表中待展示消息条数的改变，因此基于改变后的渲染高度重新确立待展示消息，即更新待展示消息，并将更新后的待展示消息展示于可视区域。

可选地，保存每次监听接口回调时对应的各待展示消息的渲染高度，对比时间上相邻的两次监听回调时对应的渲染高度，若渲染高度不同，则表明待展示消息的渲染高度发生改变，否则，表明当次监听回调对渲染高度没有影响。

本申请实施例提供的方案，监听待展示消息的渲染高度，利用监听接口实时监控待展示消息的渲染高度，实现待展示消息的动态调整，进而实现根据待展示消息的渲染高度动态调整待展示消息的效果。

在此基础上，为了提高页面性能，一种可选实施例中，在监听接口的回调和/或消息节点的增删中加入throttle和requestAnimationFrame进行节流。

具体地，利用throttle使得监听接口的回调能够按照预设周期有规律地执行，在预设时间内执行次数不超过一次，也就是将多次回调的触发合并成一次执行，将监听接口的回调频率变低，避免DOM节点任一变化都随时进行监听接口回调带给服务器的压力。requestAnimationFrame是另一个频率限制的方法，requestAnimationFrame可以作为throttle的代替方法，该方法能够采用最优的时间周期进行消息渲染，而且可以封装为标准API，不需要维护，使用简单。

一种可选实施例中，S140的利用确定出的DOM隐藏节点表征隐藏消息，包括：

E1，当隐藏消息存在多条时，获取预先为每条隐藏消息设置的隐藏高度，根据隐藏高度与隐藏消息的数量确定隐藏消息的总高度；

E2，根据该总高度确定DOM隐藏节点；

E3，利用DOM隐藏节点表征所述隐藏消息的内容。

利用隐藏消息的内容及高度确定DOM隐藏节点，该DOM隐藏节点表征隐藏消息，DOM隐藏节点包括隐藏消息的高度及内容，其中，DOM隐藏节点的高度为所有隐藏消息的高度之和，获取预先为每条隐藏消息设置的隐藏高度，该隐藏高度可以是相同高度，也可以为不同高度，若隐藏消息对应的隐藏高度都相同，则根据隐藏高度及隐藏消息的数量的乘积确定隐藏消息的总高度，该总高度与DOM隐藏节点的高度相同，可以将DOM隐藏节点划分为隐藏消息的条数对应的份数，按照所述隐藏消息的排列位置或者隐藏消息的编号将隐藏消息的内容附加在对应位置的DOM隐藏节点上，DOM隐藏节点包括隐藏消息的内容，以便后续通过DOM隐藏节点重新加载隐藏消息。

一种可选实施例中，步骤S110提供的确定用于展示聊天消息的可视区域的可视高度，可以通过如下方式实现，包括：

获取浏览器的内高度及展示页面中固定版块的高度，根据浏览器的内高度及固定版块的高度计算当前展示页面上可视区域的可视高度。

其中，固定版块包括浏览器页面中消息编辑版块(如图2中标示有“对全部班级发言”所在的版块)、工具栏版块(如图2中与消息编辑版块相邻，且包含多个编辑工具的版块)、聊天主题(如图2中标示有“讨论/成员，全部/1班/2班”所在的版块)等固定版块，获取这些固定版块的高度，这些固定版块的高度可调，如：消息编辑版块的高度可调。利用浏览器的内高度，即浏览器中用来显示的页面总高度，利用浏览器的内高度及上述固定版块的高度能够准确确定可视区域的可视高度。

利用本申请对聊天消息进行消息展示时，假设一条聊天消息有10个节点，接收到1000条聊天消息，则存在10000个节点，如果可视区域只能显示10条消息，另外的990条聊天消息采用一到两个DOM隐藏节点整体替换，页面优化前后的页面布局对比如图8所示，由于只需要渲染待展示消息，而待展示消息的数量有限，则需要渲染的节点大大减少，实现对页面性能的优化，降低节点渲染对内存的占用。

基于与本申请实施例所提供的方法相同的原理，本申请实施例还提供了一种消息展示装置900，如图9所示，该装置可以包括获取聊天消息模块910、确定待展示消息模块920、确定隐藏消息模块930、隐藏模块940、展示模块950，其中：

获取聊天消息模块910，用于获取当前会话中待显示的全部聊天消息，确定用于展示聊天消息的可视区域的可视高度；

确定待展示消息模块920，用于根据所述可视高度及预设展示规则确定展示于所述可视区域的待展示消息；

确定隐藏消息模块930，用于根据所述全部聊天消息及所述待展示消息确定隐藏消息；

隐藏模块940，用于根据所述隐藏消息的内容及高度确定DOM隐藏节点，利用确定出的DOM隐藏节点表征所述隐藏消息，并通过所述DOM隐藏节点将所述隐藏消息展示于隐藏区；

展示模块950，用于将所述待展示消息渲染后展示于可视区域。

本申请提供的消息展示装置，利用隐藏模块中的DOM隐藏节点表征至少一条隐藏消息，由于隐藏消息采用DOM隐藏节点替代，DOM隐藏节点中包含隐藏消息的内容及高度，但隐藏消息未经过渲染，因此，避免对隐藏消息的渲染，省去对隐藏消息的渲染，减少隐藏消息对系统资源的占用，以优化页面展示性能。

可选的，可视区域中存在滚动轴时，确定待展示消息模块920还包括：

确定最后一条消息单元，用于获取当前滚动轴的位置，根据滚动轴的位置确定展示在所述可视区域底端的最后一条消息；

获取渲染高度单元，用于获取所述最后一条消息及接收时间在所述最后一条消息之前的若干条消息中每条消息的渲染高度；

确定第一条消息单元，用于根据每条消息的渲染高度及可视高度确定展示于可视区域顶端的第一条消息；

确定待展示消息单元，用于将所述第一条消息、所述最后一条消息及两者之间的消息确定为待展示消息。

可选的，确定隐藏消息模块930，具体用于：

对所有聊天消息按照接收时间的先后顺序进行编号，获得所述最后一条消息的编号及所述第一条消息的编号；

若所述最后一条消息为当前接收到的最新消息，确定编号小于所述第一条消息的编号对应的消息为隐藏消息；

若所述最后一条消息并非当前接收到的最新消息，确定编号小于所述第一条消息的编号对应的第一消息集，以及，编号大于所述最后一条消息的编号对应的第二消息集，确定所述第一消息集与第二消息集为隐藏消息。

可选的，消息展示模块900，还包括：

确定待加载模块，用于检测到滚动轴发生位置移动，根据滚动轴的移动方向及移动距离确定待加载消息；

加载显示模块，用于加载相应DOM隐藏节点中所述待加载消息的内容，并渲染显示该待加载消息。

可选的，加载显示模块，具体用于：

根据滚动轴移动后的位置确定待展示在所述可视区域底端的最后一条待加载消息的编号及第一条待加载消息的编号；

当滚动轴的移动方向为上移时，若所述最后一条待加载消息的编号大于可视区域中展示的第一条消息的编号，加载编号大于所述第一条消息且小于等于所述第一条待加载消息对应的隐藏消息的内容；

当滚动轴的移动方向为下移时，若所述第一条待加载消息的编号小于可视区域中展示的最后一条消息的编号，加载编号大于所述最后一条消息且小于等于所述最后一条待加载消息对应的隐藏消息的内容。

可选的，消息展示模块900，还包括：

监听模块，用于通过浏览器的监听接口监测所述待展示消息的渲染高度；

更新列表模块，用于若任一待展示消息的渲染高度发生变化，根据变化后的渲染高度更新待展示消息列表，所述待展示消息列表包括至少一个待展示消息；

更新待展示消息模块，用于将更新后的待展示消息列表的待展示消息渲染后展示于可视区域。

可选的，隐藏模块940，具体用于：

当所述隐藏消息存在多条时，获取预先为每条隐藏消息设置的隐藏高度，根据所述隐藏高度与隐藏消息的数量确定隐藏消息的总高度；

根据所述总高度确定DOM隐藏节点；

利用所述DOM隐藏节点表征所述隐藏消息的内容。

本申请实施例的消息展示装置可执行本申请实施例所提供的消息展示方法，其实现原理相类似，本申请各实施例中的消息展示装置中的各模块所执行的动作是与本申请各实施例中的消息展示方法中的步骤相对应的，对于消息展示装置的各模块的详细功能描述具体可以参见前文中所示的对应的消息展示方法中的描述，此处不再赘述。

基于与本申请的实施例中所示的方法相同的原理，本申请的实施例中还提供了一种电子设备，该电子设备可以包括但不限于：处理器和存储器；存储器，用于存储计算机程序；处理器，用于通过调用计算机程序执行本申请任一可选实施例所示的消息展示方法。与现有技术相比，本申请中提供的消息展示方法，省去对隐藏消息的渲染，减少隐藏消息对系统资源的占用，以优化页面展示性能。

在一个可选实施例中提供了一种电子设备，如图10所示，图10所示的电子设备4000可以为客户端，包括：处理器4001和存储器4003。其中，处理器4001和存储器4003相连，如通过总线4002相连。可选地，电子设备4000还可以包括收发器4004。需要说明的是，实际应用中收发器4004不限于一个，该电子设备4000的结构并不构成对本申请实施例的限定。

处理器4001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器4001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线4002可包括一通路，在上述组件之间传送信息。总线4002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线4002可以分为地址总线、数据总线、控制总线等。为便于表示，图10中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器4003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

存储器4003用于存储执行本申请方案的应用程序代码，并由处理器4001来控制执行。处理器4001用于执行存储器4003中存储的应用程序代码，以实现前述方法实施例所示的内容。

其中，电子设备包括但不限于：移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图10示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

需要说明的是，本申请上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备执行上述实施例所示的方法。

可以以一种或多种程序设计语言或其组合来编写用于执行本申请的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

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

描述于本申请实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称在某种情况下并不构成对该模块本身的限定，例如，隐藏模块还可以被描述为“确定DOM隐藏节点模块”。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种消息展示方法，其特征在于，包括：

获取当前会话中待显示的全部聊天消息，确定用于展示聊天消息的可视区域的可视高度；

根据所述可视高度及预设展示规则确定展示于所述可视区域的待展示消息；

根据所述全部聊天消息及所述待展示消息确定隐藏消息；

根据所述隐藏消息的内容及高度确定DOM隐藏节点，利用确定出的DOM隐藏节点表征所述隐藏消息，并通过所述DOM隐藏节点将所述隐藏消息展示于隐藏区；

将所述待展示消息渲染后展示于可视区域。

2.根据权利要求1所述的方法，其特征在于，当可视区域中存在滚动轴时，所述根据所述可视高度及预设展示规则确定展示于所述可视区域的待展示消息，包括：

获取当前滚动轴的位置，根据滚动轴的位置确定展示在所述可视区域底端的最后一条消息；

获取所述最后一条消息及接收时间在所述最后一条消息之前的若干条消息中每条消息的渲染高度；

根据每条消息的渲染高度及可视高度确定展示于可视区域顶端的第一条消息；

将所述第一条消息、所述最后一条消息及两者之间的消息确定为待展示消息。

3.根据权利要求2所述的方法，其特征在于，根据所述全部聊天消息及所述待展示消息确定隐藏消息，包括：

对所有聊天消息按照接收时间的先后顺序进行编号，获得所述最后一条消息的编号及所述第一条消息的编号；

若所述最后一条消息为当前接收到的最新消息，确定编号小于所述第一条消息的编号对应的消息为隐藏消息；

若所述最后一条消息并非当前接收到的最新消息，确定编号小于所述第一条消息的编号对应的第一消息集，以及，编号大于所述最后一条消息的编号对应的第二消息集，确定所述第一消息集与第二消息集为隐藏消息。

4.根据权利要求2所述的方法，其特征在于，所述将所述第一条消息、所述最后一条消息及两者之间的消息确定为待展示消息之后，还包括：

检测到滚动轴发生位置移动，根据滚动轴的移动方向及移动距离确定待加载消息；

加载相应DOM隐藏节点中所述待加载消息的内容，并渲染显示该待加载消息。

5.根据权利要求4所述的方法，其特征在于，所述加载相应DOM隐藏节点中所述待加载消息的内容，包括：

根据滚动轴移动后的位置确定待展示在所述可视区域底端的最后一条待加载消息的编号及第一条待加载消息的编号；

当滚动轴的移动方向为上移时，若所述最后一条待加载消息的编号大于可视区域中展示的第一条消息的编号，加载编号大于所述第一条消息且小于等于所述第一条待加载消息对应的隐藏消息的内容；

当滚动轴的移动方向为下移时，若所述第一条待加载消息的编号小于可视区域中展示的最后一条消息的编号，加载编号大于所述最后一条消息且小于等于所述最后一条待加载消息对应的隐藏消息的内容。

6.根据权利要求2所述的方法，其特征在于，将所述第一条消息、所述最后一条消息及两者之间的消息确定为待展示消息之后，还包括：

通过浏览器的监听接口监测所述待展示消息的渲染高度；

若任一待展示消息的渲染高度发生变化，根据变化后的渲染高度更新待展示消息列表，所述待展示消息列表包括至少一个待展示消息；

将更新后的待展示消息列表的待展示消息渲染后展示于可视区域。

7.根据权利要求1所述的方法，其特征在于，所述利用确定出的DOM隐藏节点表征所述隐藏消息，包括：

当所述隐藏消息存在多条时，获取预先为每条隐藏消息设置的隐藏高度，根据所述隐藏高度与隐藏消息的数量确定隐藏消息的总高度；

根据所述总高度确定DOM隐藏节点；

利用所述DOM隐藏节点表征所述隐藏消息的内容。

8.一种消息展示装置，其特征在于，包括：

获取聊天消息模块，用于获取当前会话中待显示的全部聊天消息，确定用于展示聊天消息的可视区域的可视高度；

确定待展示消息模块，用于根据所述可视高度及预设展示规则确定展示于所述可视区域的待展示消息；

确定隐藏消息模块，用于根据所述全部聊天消息及所述待展示消息确定隐藏消息；

隐藏模块，用于根据所述隐藏消息的内容及高度确定DOM隐藏节点，利用确定出的DOM隐藏节点表征所述隐藏消息，并通过所述DOM隐藏节点将所述隐藏消息展示于隐藏区；

展示模块，用于将所述待展示消息渲染后展示于可视区域。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-7任一项所述的消息展示方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现权利要求1-7任一项所述的消息展示方法。

Images