CN116302600A - 一种浏览器页面的显示方法、电子设备及存储介质 - Google Patents

Abstract

本申请实施例涉及网络安全技术，公开了一种浏览器页面的显示方法、电子设备及存储介质。浏览器页面的显示方法，应用于代理服务器，代理服务器包括远程浏览器，方法包括：根据远程浏览器当前显示的页面，获取变更区域对应的第一像素数据并对第一像素数据进行压缩，得到第二像素数据；向客户端发送第二像素数据，供客户端根据第二像素数据显示对应的浏览器页面；根据远程浏览器当前显示的页面，获取变更区域对应的第三像素数据，第三像素数据用于对压缩第一像素数据时所损失的像素进行补充；向客户端发送第三像素数据，供客户端根据第三像素数据显示对应的浏览器页面。至少有利于提高用户的浏览交互体验。

Description

一种浏览器页面的显示方法、电子设备及存储介质

技术领域

本申请实施例涉及网络安全技术，特别涉及一种浏览器页面的显示方法、电子设备及存储介质。

背景技术

Web服务因其具有开放性、源站技术多样性、终端环境复杂性而面临较多安全风险。在现有网络安全中，Web安全一直是主要研究方向。远程浏览器隔离(Remote BrowserIsolation，RBI)技术是当前提出的一种在浏览网页页面时用于保障Web安全的重要手段。其实现方式是将源站返回的浏览器页面交由代理服务器中的远程浏览器进行显示，客户端处接收到的是远程浏览器显示的浏览器页面的像素数据，这样避免源站和客户端直接交互，将两者隔离起来，最终达到保障Web安全的目的。

然而，目前基于RBI的浏览器显示方法带给用户的浏览交互体验较差。

发明内容

本申请实施例的目的在于提供一种浏览器页面的显示方法、电子设备及存储介质，至少有利于提高用户的浏览交互体验。

根据本申请的一些实施例，本申请实施例一方面提供一种浏览器页面的显示方法，应用于代理服务器，所述代理服务器包括远程浏览器，所述方法包括：根据所述远程浏览器当前显示的页面，获取变更区域对应的第一像素数据并对所述第一像素数据进行压缩，得到第二像素数据；向所述客户端发送所述第二像素数据，供所述客户端根据所述第二像素数据显示对应的浏览器页面；根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据，所述第三像素数据用于对压缩所述第一像素数据时所损失的像素进行补充；向所述客户端发送所述第三像素数据，供所述客户端根据所述第三像素数据显示对应的浏览器页面。

根据本申请的一些实施例，本申请实施例另一方面还提供一种浏览器页面的显示方法，应用于客户端，所述客户端包括本地浏览器，所述方法包括：接收第二像素数据；在所述本地浏览器当前显示的页面中，将变更区域替换显示为所述第二像素数据；接收第三像素数据；根据所述第三像素数据，在所述本地浏览器中显示待显示的浏览器页面；其中，所述待显示的浏览器页面在所述变更区域对应的像素数据为第一像素数据，所述第二像素数据为所述第一像素数据的压缩数据，所述第三像素数据用于对压缩所述第一像素数据时所损失的像素进行补充。

根据本申请的一些实施例，本申请实施例另一方面还提供一种电子设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上任一项所述的浏览器页面的显示方法。

根据本申请的一些实施例，本申请实施例另一方面还提供一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项所述的浏览器页面的显示方法。

本申请实施例提供的技术方案至少具有以下优点：

第二像素数据是由变更区域在远程浏览器当前显示的页面中对应的第一像素数据经过压缩得到，因此，相对于远程浏览器当前显示的页面的整个页面的像素数据而言，第二像素数据的数据量更少，能够被更快地传输到客户端，从而变更区域所显示的内容能够被高效地同步到客户端，并与其他未变更的区域共同显示出完整的浏览器页面，供用户获取完整的浏览页面信息；并且还在发送第二像素数据的基础上，发送用于对压缩第一像素数据时所损失的像素进行补充的第三像素数据，从而客户端能够根据第三像素数据对第二像素数据进行补充，从而显示出无损的变更区域的像素数据，供用户获取无损的浏览页面信息。在能够显示清晰页面的情况下，还有利于减少用户得到页面信息的时延，提高了用户的浏览交互体验。

附图说明

一个或多个实施例通过与之对应的附图中的图片进行示例性说明，这些示例性说明并不构成对实施例的限定，附图中具有相同参考数字标号的元件表示为类似的元件，除非有特别申明，附图中的图不构成比例限制。

图1是本申请一实施例中提供的浏览器页面的显示方法的流程图；

图2是本申请一实施例中提供的包括监测页面变更事件步骤的浏览器页面的显示方法的流程图；

图3是本申请一实施例中提供的包括确定压缩率步骤的浏览器页面的显示方法的流程图；

图4是本申请一实施例中提供的包括基于定时器获取第二任务步骤的浏览器页面的显示方法的流程图；

图5是本申请一实施例中提供的包括检测第二任务队列步骤的浏览器页面的显示方法的流程图；

图6是本申请一实施例中提供的包括检测是否延迟步骤的浏览器页面的显示方法的流程图；

图7是本申请一实施例中提供的包括划分变更区域步骤的浏览器页面的显示方法的流程图；

图8是本申请一实施例中提供的浏览器页面的显示方法相关的代理服务器内部流程之间的交互示意图；

图9是本申请一实施例中提供的包括接收第二像素数据步骤的浏览器页面的显示方法的流程图；

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

具体实施方式

由背景技术可知，目前基于RBI的浏览器页面的显示方法的用户浏览交互体验有待提高。

经分析发现，基于RBI的浏览器页面的显示方法的用户浏览交互体验较差的原因之一在于：RBI同步到客户端的是远程浏览器显示的完整页面的像素数据，在这个过程中传输的数据量较大，客户端需要加载的数据也较多，用户等待时间较长，浏览交互响应实时性差，导致用户的体验差。

本申请实施例提供的技术方案，不再每次都向客户端发送完整页面的像素数据，而是发送变更区域对应的像素数据，此时，客户端已经具备其余未变更区域的像素数据，不会影响用户获取的信息的完整性。并且，还将变更区域对应的像素数据分为两次发送，先发送变更区域对应的第一像素数据经过压缩得到的第二像素数据，数据量更少，使得能够更快地将新信息显示给用户，再发送用于补充第二像素数据所损失的像素的第三像素数据，从而用户最终能够得到清晰的浏览信息，兼顾了用户浏览交互的实时性和清晰性，有利于提高用户的浏览交互体验。

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合附图对本申请的各实施例进行详细的阐述。然而，本领域的普通技术人员可以理解，在本申请各实施例中，为了使读者更好地理解本申请而提出了许多技术细节。但是，即使没有这些技术细节和基于以下各实施例的种种变化和修改，也可以实现本申请所要求保护的技术方案。

以下各个实施例的划分是为了描述方便，不应对本申请的具体实现方式构成任何限定，各个实施例在不矛盾的前提下可以相互结合相互引用。

本申请实施例一方面提供了一种浏览器页面的显示方法，应用于代理服务器，代理服务器包括远程浏览器。其中，远程浏览器是相对于客户端的本地浏览器而言，其强调的是与客户端中部署的本地浏览器并不是同一浏览器，而代理服务器可以是任一个或一些部署有远程浏览器的具有代理功能的服务器设备。在一些实施例中，浏览器页面的显示方法的流程如图1所示，包括以下步骤：

步骤101，根据远程浏览器当前显示的页面，获取变更区域对应的第一像素数据并对第一像素数据进行压缩，得到第二像素数据。

本实施例中，变更区域是远程浏览器显示页面中相对于在前显示的内容发生变更的区域。变更区域对应的第一像素数据是指远程浏览器当前显示的页面在变更区域内所呈现的内容以图像形式表示时的数据。例如某个浏览器页面分为A、B、C三个区域，在T1时刻，A、B、C三个区域显示的内容分别为a1、b1、c1，在T1+ΔT(ΔT大于0)时刻，A、B、C三个区域显示的内容分别为a2、b2、c1，则此时的变更区域为A区域+B区域。

需要说明的是，本实施例不对变更的方式进行限定，可以是整个显示页面均发生内容变更，如网页跳转时远程浏览器对页面重新进行加载等；也可以是部分显示页面发生内容变更，如认证时对话框弹出等。在用户浏览过程中，可以将远程浏览器当前显示的页面中相对于上一完整同步至客户端的页面发生了变化的区域均可以作为变更区域；在用户进行浏览的初始时刻，可以将远程浏览器当前显示的页面均作为变更区域。

在一些实施例中，如图2所示，根据远程浏览器当前显示的页面，获取相对于上一显示页面的变更区域对应的第一像素数据之前，浏览器页面的显示方法还包括：

步骤105，对页面变更事件进行监测，页面变更事件包括源站加载事件和/或与页面变更相关的用户交互事件。

本实施例中，监测可以通过多种方式实现，如对源站返回的内容进行检测、对用户指令进行检测等，此处就不再一一赘述了。

步骤106，在监测到页面变更事件后，确定页面变更事件对应的变更区域。

当用户刚开始浏览时，需要初次加载页面，此时页面将会发生变更，并且该变更对应的是源站加载事件。而当用户在浏览中时，此时页面发生的变更通常是用户交互导致的。也就是说，源站加载事件、与页面变更相关的用户交互事件包含了初次加载和初次加载后的浏览过程，有利于对页面初次加载和非初次加载过程的变更区域确定进行统一，降低整个浏览过程中的页面显示实现难度。

还需要说明的是，本实施例也不对压缩的方式进行限定，可以是任何一种减少第一像素数据的数据量并且仍然能够减少了的像素数据进行显示的处理方式，如可以是色度抽样、变换编码等。在一些例子中，还可以通过对第一像素数据进行数据格式转换得到第二像素数据，以实现数据量的减少，此处就不再一一赘述了。

在一些实施例中，压缩第一像素数据时所采用的压缩率可以是动态值，这样第二像素数据相对于第一像素数据的像素损失程度可调整，从而能够在客户端呈现灵活可变的呈现效果，有利于提高用户体验。

在一些实施例中，如图3所示，浏览器页面的显示方法的流程还包括以下步骤：

步骤107，根据代理服务器当前的工作压力，确定压缩率。

本实施例中，工作压力包括传输压力和/或处理压力。

相应地，步骤101可以通过如下方式实现：根据远程浏览器当前显示的页面，获取变更区域对应的第一像素数据并根据压缩率对第一像素数据进行压缩，得到第二像素数据。

也就是说，将压缩率与代理服务器的工作压力进行关联，使得压缩率能够与代理服务器的工作压力相适应，从而在充分利用各种资源的情况下对第一像素数据以适宜的压缩率进行压缩，有利于在不影响工作效率的同时更好地减少数据量，从而更好地将变更区域的像素变化同步到客户端，提升客户端的展示效果和用户体验。

需要说明的是，图3中仅以步骤101在步骤107之后实现为例进行说明，在其他实施例中，步骤107可以在根据远程浏览器当前显示的页面，获取变更区域对应的第一像素数据之后或同时实现，此处就不再一一赘述了。

在一些实施例中，传输压力可以与第二像素数据的传输和/或第三像素数据的传输相关。这样，将压缩率与第二像素数据和/或第三像素数据的发送情况相关联，有利于充分利用发送资源将压缩得到的第二像素数据高效地发送到客户端，避免了由于压缩率过小，使得第二像素数据的数据量超过当前的发送资源可支持的发送数据量，影响第二像素数据的发送效率的情况，也避免了由于压缩率过大，使得当前的发送资源出现冗余的情况。

在一些实施例中，在发送第二像素数据后，浏览器页面的显示方法还包括：根据第二像素数据的发送情况，更新传输压力。即基于当前的第二像素数据的发送情况为后续代理服务器发送第二像素数据的发送情况进行预测，由于参考的发送情况和预测的发送情况都是第二像素数据的，因此，当前的第二像素数据的发送情况的参考性强，预测的准确性高，有利于提高压缩率的准确性。

在一些实施例中，在发送第三像素数据后，浏览器页面的显示方法还包括：根据第三像素数据的发送情况，更新传输压力。第三像素数据的发送与下一次第二像素数据的发送在时间上接近，其对发送时的网络状态等信息的描述实时性高，有利于提高压缩率的准确性。

需要说明的是，浏览器的显示方法还可以是既根据第二像素数据的发送情况更新传输压力，又根据第三像素数据的发送情况更新传输压力。从而增加了传输压力的更新频次，提高了记录的传输压力的实时性，有利于提高传输压力的准确性。

在一些例子中，为了简化传输压力更新过程，可以利用第二像素数据和/或第三像素数据发送过程中得到的相关参数表征传输压力，如利用往返时延(Round Trip Time，RTT)、发送时延、信道利用率、丢包率等表征传输压力。

当然，上述仅为对传输压力更新的举例说明，在一些实施例中，传输压力还可以与代理服务器的其他传输过程相关，如传输压力还可以是与代理服务器与源站交互时的传输情况相关，这样将会进一步增加传输压力的更新频次，提高传输压力的实时性，进而提高压缩率的准确性，此处就不再一一赘述了。

在一些实施例中，处理压力可以与代理服务器对第一像素数据、第二像素数据、第三像素数据等中的至少一个的处理过程有关。这样，将压缩率与第一像素数据、第二像素数据、第三像素数据等的处理相关联，有利于充分利用处理资源，如中央处理器(CentralProcessing Unit，CPU)、存储资源等，平衡了第一像素数据彼此之间的处理效率以及第一像素数据与第二像素数据、第三像素数据之间的处理效率，实现了整体的高效处理，有利于降低整体的时延，提高用户体验。

在一些实施例中，将与第一像素数据、第二像素数据、第三像素数据的处理过程表示为任务的形式，从而可以根据任务的多少衡量处理压力的大小，有利于简化处理压力的表征，从而提高处理压力的更新效率和实现难度。

为便于本领域技术人员更好地理解，以下将以第一像素数据的处理表示为任务的形式情况下的处理压力更新进行举例说明。

在一些实施例中，根据远程浏览器当前显示的页面，获取变更区域对应的第一像素数据之前，浏览器页面的显示方法还包括：在确定具有变更区域后，向预设的第一任务队列中添加第一任务；其中，第一任务用于触发对应的指令，以执行根据远程浏览器当前显示的页面，获取当前获取的第一任务对应的变更区域对应的第一像素数据。

也就是说，通过变更区域的确定，触发向预设的第一任务队列中添加第一任务的指令，从而触发对应的指令，以及时执行根据远程浏览器当前显示的页面，获取当前第一任务对应的变更区域对应的第一像素数据。

相应地，根据代理服务器当前的工作压力，确定压缩率之前，浏览器页面的显示方法还包括：根据第一任务队列中的第一任务的数量，确定处理压力。

从而，根据需要处理的关于第一像素数据的任务数量对处理压力进行更新，考虑到第一像素数据的处理主要是压缩处理，因此，上述过程实际是根据压缩任务的多少表征处理压力，即根据压缩任务的多少确定压缩率，有利于实现在多个压缩任务之间实现平衡，达到整体上地高效处理，避免在先的压缩处理影响在后的压缩处理，有利于提高用户体验。

当然，在其他实施例中还可以将第二像素数据、第三像素数据的处理过程表示为任务，并据此更新压缩率，使得第一像素数据的处理与后续第二像素数据、第三像素数据的处理具有相适应的效率，从而能够流畅、高效地将第二像素数据和第三像素数据同步到客户端，有利于提高用户体验。

在一些实施例中，处理压力还可以与处理的数据量相关。这样，将压缩率与处理的数据量相关联，使得能够针对不同的数据量提供不同的压缩率，有利于在处理的数据量不同的基础上提供相对稳定的处理时间，从而更好地控制客户端显示对应的浏览器页面的时延，提高了用户体验。

在一些实施例中，根据代理服务器当前的工作压力，确定压缩率之前，浏览器页面的显示方法还包括：根据当前未获取对应的第一像素数据的所有变更区域的大小，确定处理压力。

也就是说，通过变更区域的大小表征需要处理的数据量，直观简洁，有利于降低对处理的数据量的衡量难度。并且获取的是所有未处理(即未获取对应的第一像素数据)的变更区域的大小，考虑了当前所有的需要处理的变更区域，有利于实现整体上的高效。

当然，在其他实施例中，还可以是根据当前需要压缩的第一像素数据对应的变更区域的大小更新处理压力，将关注更集中于当前的任务，有利于高效地实现当前第一像素数据的处理；或者，根据第一像素数据的数据量更新处理压力，第一像素数据的数据量能够更准确地描述处理工作量，有利于更准确地确定压缩率等，此处就不再一一赘述了。

步骤102，向客户端发送第二像素数据，供客户端根据第二像素数据显示对应的浏览器页面。

本实施例不对发送方式进行限定，可以采用加密发送，也可以采用非加密发送，还可以通过专用通道进行发送等。

步骤103，根据远程浏览器当前显示的页面，获取变更区域对应的第三像素数据，第三像素数据用于对压缩第一像素数据时所损失的像素进行补充。

本实施例不对第三像素数据对压缩第一像素数据时所损失的像素的补充方式进行限定，相应地，根据不同的补充方式，第三像素数据的含义和内容也随之存在差异。

在一些例子中，第三像素数据可以是包含压缩第一像素数据时所损失的像素，从而第三像素数据与第二像素数据结合得到第一像素数据，实现对第一像素数据被压缩而造成的像素损失。

在一些例子中，第三像素数据还可以是包含完整的第一像素数据，从而通过第三像素数据可以弥补第一像素数据被压缩而造成的像素损失。

在一些例子中，第三像素数据还可以是一些经过特定处理的数据，从而第三像素数据通过与第二像素数据配合能够还原出第一像素数据。

当然，以上仅为具体的举例说明，在其他例子中第三像素数据还可以是其他任何一种能够实现对第一像素数据被压缩时所损失的像素进行补充的数据，此处就不再一一赘述了。

在一些实施例中，如图4所示，根据远程浏览器当前显示的页面，生成第三像素数据之前，浏览器页面的显示方法还包括：

步骤108，在确定具有变更区域后，向预设的第二任务队列中添加第二任务。

也就是说，通过变更区域的确定触发并执行向第二任务队列中添加第二任务。

相应地，根据远程浏览器当前显示的页面，获取变更区域对应的第三像素数据，可以通过如下步骤实现：

步骤1031，基于定时器从第二任务队列中获取第二任务。

步骤1032，根据当前获取的所述第二任务，触发对应的指令，以执行根据远程浏览器当前显示的页面，获取变更区域对应的第三像素数据。

也就是说，第二任务被添加后并不是立即读取、执行，而是由定时器定时触发并执行第二任务的读取，从而在确定变更区域后，第二任务的读取、执行将会与第一像素数据的压缩异步实现，从而保证了第二像素数据在先、对应的第三像素数据在后的发送顺序。

可以理解的是，第二像素数据是第一像素数据经过压缩得到，即第二像素数据所显示的画面为低分辨率的画面；而在第三像素数据对第一像素数据压缩时所损失的像素进行补充后，所显示的画面为高分辨率的画面。因此，先发送第二像素数据再发送第三像素数据将会使得先显示低分辨率的画面再显示高分辨率的画面，避免先显示高分辨率的画面再显示低分辨率的画面的情况出现，有利于提高浏览器页面的显示效果，提高用户体验。

在一些实施例中，如图5所示，基于定时器从第二任务队列中获取第二任务，可以通过如下方式实现：在定时器被触发后，从第二任务队列中获取第二任务。

并且，根据当前获取的第二任务，触发对应的指令，以执行根据远程浏览器当前显示的页面，获取变更区域对应的第三像素数据之后，浏览器的页面显示方法还包括以下步骤：

1033，检测第二任务队列中是否缓存有至少一个第二任务。

也就是说，在执行完一个第二任务后，检测是否还有等待执行的第二任务。

步骤1034，在第二任务队列中缓存有至少一个第二任务的情况下，从第二任务队列中获取下一第二任务，以触发对应的指令，直到第二任务队列中无缓存的第二任务。

也就是说，在执行完一个第二任务后，如果检测到还有需要执行的第二任务，将会继续执行下一个等待执行的第二任务。

结合前述的“在定时器被触发后，从第二任务队列中获取第二任务”可以得到，本实施例实际是第二任务队列中的第二任务等待定时器被触发，并在定时器触发后开始依次读取并执行第二任务队列中的第二任务，直到第二任务队列中无等待执行的第二任务，之后，第二任务队列若是再次添加了第二任务队列后，将会等待下一次定时器被触发。

需要说明的是，定时器的触发机制可以有多种方式，如定时器可以持续开启，从而每间隔一定时间被触发，此时若是已经正在执行某个第二任务，不再读取新的第二任务，若是当前并未执行第二任务，则从第二任务队列中开始读取第二任务；或者，定时器在依次读取并执行完第二队列后开启并每间隔一定时间触发，直到第二任务队列中具有至少一个第二任务队列后，定时器关闭，直到第二任务队列中的第二任务均被执行完后再次开启等。

这样，通过定时器触发第二任务的顺序执行，相对于由定时器逐个触发第二任务的方式，有利于在具有多个第二任务待执行时提高执行效率，以及，有利于避免上一第二任务触发的动作未完成，下一第二任务已经开始导致的显示内容混乱的问题。

还需要说明的是，图5仅以步骤1033和步骤1034在步骤104之前执行为例，在其他实施例中，步骤1033和步骤1034可以在步骤104之后或同时执行，还可以步骤104在步骤1033和步骤1034之间执行，此处就不再一一赘述了。

当然，在一些实施例中还可以是定时器逐个触发第二任务的读取和执行。

可以理解的是，第二像素数据和第三像素数据分别根据其生成时远程浏览器显示的页面得到的，在一些情况下，远程浏览器在变更区域所显示的页面内容可能不一致。针对这些情况，在一些实施例中，如图6所示，根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据之前，浏览器页面的显示方法还包括：

步骤109，检测远程浏览器当前显示的页面相对于远程浏览器在获取与变更区域对应的第一像素数据时显示的页面是否出现延迟。

也就是说，检测第二像素数据和第三像素数据各自其生成时远程浏览器显示的页面之间是否出现延迟。

在一些情况下，出现延迟表示远程浏览器当前显示的页面相对于远程浏览器在获取与变更区域对应的第一像素数据时显示的页面不一致。

在一些情况下，出现延迟表示远程浏览器当前显示的页面相对于远程浏览器在获取与变更区域对应的第一像素数据时显示的页面之间的时间差超过预设时间。

在一些情况下，出现延迟表示远程浏览器当前显示的页面相对于远程浏览器在获取与变更区域对应的第一像素数据时显示的页面之间间隔的预设数量的内容不同的页面。

当然，以上仅为具体的举例说明，在其他情况下还可以根据需求进行设置，此处就不再一一赘述了。

相应地，根据远程浏览器当前显示的页面，获取变更区域对应的第三像素数据是在未出现延迟的情况下实现。

而在出现延迟的情况下，可以实现如下步骤：

步骤1010，根据远程浏览器当前显示的页面，获取下一变更区域对应的第三像素数据。

各变更区域分别对应有第二像素数据和第三像素数据，当某个第二像素数据生成时的浏览器页面与其对应的第三像素数据生成时的浏览器页面存在延迟的情况下，其不再是相同内容的低分辨率的画面和高分辨率的画面，因此，不再获取该变更区域基于远程浏览器当前显示的页面的内容得到的第三像素数据，而是开始处理下一变更区域对应的第三像素数据，减少了无效数据的生成和发送，有利于节约资源，并有利于加快后续变更区域对应的第三像素数据的处理，向客户端及时发送未延迟的第三像素数据，提高用户体验。

通过延迟检测，有利于减少向客户端发送延迟的浏览器页面像素数据造成的用户体验降低问题。

当然，在一些实施例中，在出现延迟的情况下，还可以检测当前需要生成对应的第三像素数据的变更区域的处理量，并在处理量未超过预设值的情况下，获取当前变更区域的第三像素数据等，此处就不一一赘述了。

在一些实施例中，如图7所示，根据远程浏览器当前显示的页面，获取变更区域对应的第三像素数据之前，浏览器页面的显示方法还包括：

步骤1011，对变更区域进行划分，得到若干瓦片区域。

相应地，步骤103通过如下方式实现：根据远程浏览器当前显示的页面，依次获取各瓦片区域对应的第三像素数据。

在一些情况下，划分的粒度可以根据第二像素数据和/或第三像素数据的处理压力进行灵活调整，此处就不再一一赘述了。

也就是说，对变更区域进行瓦片化，基于瓦片化得到的各瓦片区域，分别获取对应的第三像素数据并发送，这样有利于减小第三像素数据的处理压力以及传输压力，能够更高效地将第三像素数据同步到客户端。

步骤104，向客户端发送第三像素数据，供客户端根据第三像素数据显示对应的浏览器页面。

本实施例不对发送方式进行限定，可以采用加密发送，也可以采用非加密发送，还可以通过专用通道进行发送等。

为便于本领域技术人员更好地理解上述实施例提供的浏览器页面的显示方法，以下对其进行举例说明。

如图8所示，代理服务器的远程浏览器中部署有两个流程有——paint流程和improve流程，在页面变更事件发生时，paint流程触发，此时paint流程将会确定页面变更事件对应的变更区域，并将第一任务添加到第一任务队列中，接着，异步触发压缩率的确定以及渲染流程，并触发对应的指令，以将第二任务添加到第二任务队列。从而在渲染流程中根据在前确定的压缩率、页面变更区域以及远程浏览器当前显示的页面生成第二像素数据并在发送流程中通过发送接口发送到对应的客户端。并在远程浏览器窗口创建时添加的定时被触发时，触发improve流程，以执行第二任务，生成对应的第三像素数据，并在发送流程中通过发送接口发送到对应的客户端。

其中，improve流程还会反向感知paint流程的处理压力对变更区域进行瓦片化，进而得到各个瓦片区域对应的第三像素数据。并且，improve流程还可以根据远程浏览器所显示的页面的变更情况对第二任务队列中的第二任务进行优化，即如前述实施例所述的延迟情况下，获取下一变更区域对应的第三像素数据，不再获取当前处理的变更区域的第三像素数据。

本申请实施例一方面还提供了一种浏览器页面的显示方法，应用于客户端，客户端包括本地浏览器。其中，客户端可以是能够部署浏览器的电子设备。在一些实施例中，浏览器页面的显示方法的流程如图9所示，包括以下步骤：

步骤901，接收第二像素数据。

步骤902，在本地浏览器当前显示的页面中，将变更区域替换显示为第二像素数据。

本实施例中，本地浏览器当前显示的页面对应的像素数据包括另一第二像素数据或另一第三像素数据。也就是说，本地浏览器当前显示的页面可以是在接收到某一变更区域对应的第二像素数据所显示的画面，也可以是接收到某一变更区域对应的第三像素数据所显示的画面。

步骤903，接收第三像素数据。

步骤904，根据第三像素数据，在本地浏览器中显示待显示的浏览器页面。

本实施例中，待显示的浏览器页面在变更区域对应的像素数据为第一像素数据，第二像素数据为第一像素数据的压缩数据，第三像素数据用于第一像素数据压缩时所损失的像素进行补充。

也就是说，本地浏览器先根据第一像素数据经过压缩得到的第二像素数据在变更区域进行显示，然后在根据第三像素数据在变更区域进行显示，使得变更区域最终呈现出第一像素数据的显示效果。

需要说明的是，本实施例中的变更区域、第二像素数据、第三像素数据的含义与前述实施例相对应，此处就不再一一赘述了。

可以理解的是，根据第三像素数据的不同，步骤904的实现可能有所不同，如在第三像素数据包括完整的第一像素数据时，可以在变更区域显示第三像素数据；在第三像素数据包括第一像素数据被压缩所损失的像素时，第三像素数据结合第二像素数据还原出第一像素数据后再进行显示等。

上面各种方法的步骤划分，只是为了描述清楚，实现时可以合并为一个步骤或者对某些步骤进行拆分，分解为多个步骤，只要包括相同的逻辑关系，都在本专利的保护范围内；对算法中或者流程中添加无关紧要的修改或者引入无关紧要的设计，但不改变其算法和流程的核心设计都在该专利的保护范围内。

本申请实施例另一方面还提供了一种代理服务器，包括：

第一处理模块，用于根据远程浏览器当前显示的页面，获取变更区域对应的第一像素数据并对第一像素数据进行压缩，得到第二像素数据。

第二处理模块，用于根据远程浏览器当前显示的页面，获取变更区域对应的第三像素数据，第三像素数据用于对压缩第一像素数据时所损失的像素进行补充。

发送模块，用于向客户端发送第二像素数据，供客户端根据第二像素数据显示对应的浏览器页面；以及，向客户端发送第三像素数据，供客户端根据第三像素数据显示对应的浏览器页面。

本申请实施例另一方面还提供了一种客户端，包括：

接收模块，用于接收第二像素数据；以及，接收第三像素数据。

显示模块，用于在本地浏览器当前显示的页面中，将变更区域替换显示为第二像素数据；以及，根据第三像素数据，在本地浏览器中显示待显示的浏览器页面。

其中，待显示的浏览器页面在变更区域对应的像素数据为第一像素数据，第二像素数据为第一像素数据的压缩数据，第三像素数据用于对压缩第一像素数据时所损失的像素进行补充。

不难发现，上述两个实施例为与方法实施例相对应的装置实施例，上述两个实施例可与方法实施例互相配合实施。方法实施例中提到的相关技术细节在上述两个实施例中依然有效，为了减少重复，这里不再赘述。相应地，上述两个实施例中提到的相关技术细节也可应用在方法实施例中。

值得一提的是，上述两个实施例中所涉及到的各模块均为逻辑模块，在实际应用中，一个逻辑单元可以是一个物理单元，也可以是一个物理单元的一部分，还可以以多个物理单元的组合实现。此外，为了突出本申请的创新部分，上述两个实施例中并没有将与解决本申请所提出的技术问题关系不太密切的单元引入，但这并不表明上述两个实施例中不存在其它的单元。

本申请实施例另一方面还提供了一种电子设备，如图10所示，包括：至少一个处理器1001；以及，与至少一个处理器1001通信连接的存储器1002；其中，存储器1002存储有可被至少一个处理器1001执行的指令，指令被至少一个处理器1001执行，以使至少一个处理器1001能够执行上述任一方法实施例所描述的方法。

其中，存储器1002和处理器1001采用总线方式连接，总线可以包括任意数量的互联的总线和桥，总线将一个或多个处理器1001和存储器1002的各种电路连接在一起。总线还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路连接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口在总线和收发机之间提供接口。收发机可以是一个元件，也可以是多个元件，比如多个接收器和发送器，提供用于在传输介质上与各种其他装置通信的单元。经处理器1001处理的数据通过天线在无线介质上进行传输，进一步，天线还接收数据并将数据传输给处理器1001。

处理器1001负责管理总线和通常的处理，还可以提供各种功能，包括定时，外围接口，电压调节、电源管理以及其他控制功能。而存储器1002可以被用于存储处理器1001在执行操作时所使用的数据。

本申请实施方式另一方面还提供了一种计算机可读存储介质，存储有计算机程序。计算机程序被处理器执行时实现上述方法实施例。

即，本领域技术人员可以理解实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序存储在一个存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本领域的普通技术人员可以理解，上述各实施例是实现本申请的具体实施例，而在实际应用中，可以在形式上和细节上对其作各种改变，而不偏离本申请的精神和范围。

Claims (15)

1.一种浏览器页面的显示方法，其特征在于，应用于代理服务器，所述代理服务器包括远程浏览器，所述方法包括：

根据所述远程浏览器当前显示的页面，获取变更区域对应的第一像素数据并对所述第一像素数据进行压缩，得到第二像素数据；

向客户端发送所述第二像素数据，供所述客户端根据所述第二像素数据显示对应的浏览器页面；

根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据，所述第三像素数据用于对压缩所述第一像素数据时所损失的像素进行补充；

向所述客户端发送所述第三像素数据，供所述客户端根据所述第三像素数据显示对应的浏览器页面。

2.根据权利要求1所述的浏览器页面的显示方法，其特征在于，所述对所述第一像素数据进行压缩之前，所述方法还包括：

根据所述代理服务器当前的工作压力，确定压缩率，所述工作压力包括传输压力和/或处理压力；

所述对所述第一像素数据进行压缩，包括：

根据所述压缩率对所述第一像素数据进行压缩。

3.根据权利要求2所述的浏览器页面的显示方法，其特征在于，所述工作压力包括所述传输压力，所述方法还包括：

在发送所述第二像素数据后，根据所述第二像素数据的发送情况，更新所述传输压力；和/或，

在发送所述第三像素数据后，根据所述第三像素数据的发送情况，更新所述传输压力。

4.根据权利要求2或3所述的浏览器页面的显示方法，其特征在于，所述工作压力包括所述处理压力；

所述根据所述远程浏览器当前显示的页面，获取变更区域对应的第一像素数据之前，所述方法还包括：

在确定具有所述变更区域后，向预设的第一任务队列中添加第一任务；其中，所述第一任务用于触发对应的指令，以执行根据所述远程浏览器当前显示的页面，获取当前获取的所述第一任务对应的所述变更区域对应的所述第一像素数据；

所述根据所述代理服务器当前的工作压力，确定压缩率之前，所述方法还包括：

根据所述第一任务队列中的所述第一任务的数量，确定所述处理压力。

5.根据权利要求2或3所述的浏览器页面的显示方法，其特征在于，所述工作压力包括所述处理压力，所述根据所述代理服务器当前的工作压力，确定压缩率之前，所述方法还包括：

根据当前未获取对应的所述第一像素数据的所有所述变更区域的大小，确定所述处理压力。

6.根据权利要求1或2所述的浏览器页面的显示方法，其特征在于，所述根据所述远程浏览器当前显示的页面，生成第三像素数据之前，所述方法还包括：

在确定具有所述变更区域后，向预设的第二任务队列中添加第二任务；

所述根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据，包括：

基于定时器从所述第二任务队列中获取所述第二任务；

根据当前获取的所述第二任务，触发对应的指令，以执行根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据。

7.根据权利要求6所述的浏览器页面的显示方法，其特征在于，所述基于定时器从所述第二任务队列中获取所述第二任务，包括：

在所述定时器被触发后，从所述第二任务队列中获取所述第二任务；

所述根据当前获取的所述第二任务，触发对应的指令，以执行根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据之后，所述方法还包括：

检测所述第二任务队列中是否缓存有至少一个所述第二任务；

在所述第二任务队列中缓存有至少一个所述第二任务的情况下，从所述第二任务队列中获取下一所述第二任务，以触发对应的指令，直到所述第二任务队列中无缓存的所述第二任务。

8.根据权利要求1或2所述的浏览器页面的显示方法，其特征在于，所述根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据之前，所述方法还包括：

检测所述远程浏览器当前显示的页面相对于所述远程浏览器在获取与所述变更区域对应的所述第一像素数据时显示的页面是否出现延迟；

所述根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据，包括：

在未出现延迟的情况下，根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据。

9.根据权利要求8所述的浏览器页面的显示方法，其特征在于，所述检测所述远程浏览器当前显示的页面相对于所述远程浏览器在获取所述变更区域对应的所述第一像素数据时显示的页面是否出现延迟之后，所述方法还包括：

在出现延迟的情况下，根据所述远程浏览器当前显示的页面，获取下一所述变更区域对应的所述第三像素数据。

10.根据权利要求1或2所述的浏览器页面的显示方法，其特征在于，

所述根据所述远程浏览器当前显示的页面，获取所述变更区域对应的第三像素数据之前，所述方法还包括：

对所述变更区域进行划分，得到若干瓦片区域；

根据所述远程浏览器当前显示的页面，依次获取各所述瓦片区域对应的所述第三像素数据。

11.根据权利要求1或2所述的浏览器页面的显示方法，其特征在于，所述根据所述远程浏览器当前显示的页面，获取相对于上一显示页面的变更区域对应的第一像素数据之前，所述方法还包括：

对页面变更事件进行监测，所述页面变更事件包括源站加载事件和/或与页面变更相关的用户交互事件；

在监测到所述页面变更事件后，确定所述页面变更事件对应的所述变更区域。

12.一种浏览器页面的显示方法，其特征在于，应用于客户端，所述客户端包括本地浏览器，所述方法包括：

接收第二像素数据；

在所述本地浏览器当前显示的页面中，将变更区域替换显示为所述第二像素数据；

接收第三像素数据；

根据所述第三像素数据，在所述本地浏览器中显示待显示的浏览器页面；

其中，所述待显示的浏览器页面在所述变更区域对应的像素数据为第一像素数据，所述第二像素数据为所述第一像素数据的压缩数据，所述第三像素数据用于对压缩所述第一像素数据时所损失的像素进行补充。

13.根据权利要求12所述的浏览器页面的显示方法，其特征在于，所述本地浏览器当前显示的页面对应的像素数据包括另一所述第二像素数据或另一所述第三像素数据。

14.一种电子设备，其特征在于，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至11中任一项所述的浏览器页面的显示方法，或者，执行如权利要求12或13所述的浏览器页面的显示方法。

15.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至11中任一项所述的浏览器页面的显示方法，或者，实现如权利要求12或13所述的浏览器页面的显示方法。

Images