CN116226566B - 一种渲染内嵌客户端界面至网页的方法和系统 - Google Patents

Abstract

本说明书实施例提供一种渲染内嵌客户端界面至网页的方法，该方法由网页端对应的客户端执行，网页端和客户端运行在相同的终端设备上；该方法包括：通过第一通信服务，从网页端接收网页内容的生成指令，生成指令包括业务任务信息和显示区域信息；基于生成指令，生成绘制内容；通过第二通信服务，将绘制内容发送至网页端，绘制内容用于在网页端中的对应位置进行显示，对应位置基于显示区域信息确定。

Description

一种渲染内嵌客户端界面至网页的方法和系统

技术领域

本说明书涉及互联网技术领域，具体涉及网页内容处理领域，特别涉及一种渲染内嵌客户端界面至网页的方法和系统。

背景技术

随着信息技术的发展，利用网页呈现新闻、资讯、图形等信息内容的普及，为生活和生产等领域提供了便利。然而，信息内容的丰富多样性也为网页内容呈现的效率和质量提出了较高的要求，诸如卡顿、延时等现象较为常见，对于网页界面的开发和维护的工作量也是个不容忽视课题。对于涉及与用户交互相关的动态内容，尤其是在网页进行图表、图形等复杂数据的渲染与显示方面，对于流畅性和实时性提出了更高的要求。本地终端设备与远程服务器的交互也额外增加了交互的时间成本，同时，由于网络中断或网络带宽的限制等原因所导致的网页无法及时响应也对网页用户的使用体验造成负面影响。另外，网页中也难免涉及复杂的业务处理，尤其涉及到大数据量的实时更新和图像处理等场景，网页的脚本处理效率相对较低，甚至会影响网页端的稳定性和可靠性。

因此提供一种渲染内嵌客户端界面至网页的方法和系统，能够提升网页端显示网页内容的效率和质量，在满足网页内容呈现的实时性和流畅性的同时，提升用户体验。

发明内容

本说明书实施例之一提供一种渲染内嵌客户端界面至网页的方法，所述方法由所述网页端对应的客户端执行，所述网页端和所述客户端运行在相同的终端设备上；所述方法包括：通过第一通信服务，从所述网页端接收网页内容的生成指令，所述生成指令包括业务任务信息和显示区域信息；基于所述生成指令，生成绘制内容；通过第二通信服务，将所述绘制内容发送至所述网页端，所述绘制内容用于在所述网页端中的对应位置进行显示；所述对应位置基于所述显示区域信息确定。

本说明书实施例之一提供一种渲染内嵌客户端界面至网页的方法，所述方法由网页端执行，所述绘制内容由所述网页端对应的客户端生成，所述网页端和所述客户端运行在相同的终端设备上；所述方法包括：通过第一通信服务，基于业务任务向所述客户端发送网页内容的生成指令，所述业务任务相关于所述网页内容，所述生成指令用于由所述客户端生成所述网页内容对应的绘制内容；通过第二通信服务，接收由所述客户端发送的所述绘制内容；基于所述绘制内容，在所述网页端的对应位置进行显示。

本说明书实施例之一提供一种渲染内嵌客户端界面至网页的系统，所述系统包括网页端和网页端，所述网页端和所述客户端运行在相同的终端设备上；所述客户端，被配置为用于：通过第一通信服务，从所述网页端接收网页内容的生成指令，所述生成指令包括业务任务信息和显示区域信息；基于所述生成指令，生成绘制内容；以及通过第二通信服务，将所述绘制内容发送至所述网页端，所述绘制内容用于在所述网页端中的对应位置进行显示；所述对应位置基于所述显示区域信息确定。所述网页端，被配置为用于：通过所述第一通信服务，基于业务任务向所述客户端发送所述网页内容的生成指令，所述业务任务相关于所述网页内容，所述生成指令用于由所述客户端生成所述网页内容对应的绘制内容；通过所述第二通信服务，接收由所述客户端发送的所述绘制内容；基于所述绘制内容，在所述网页端的所述对应位置进行显示。

本说明书实施例之一提供一种计算机可读存储介质，所述存储介质存储计算机指令，当计算机读取存储介质中的计算机指令后，计算机执行上述的渲染内嵌客户端界面至网页的方法。

附图说明

本说明书将以示例性实施例的方式进一步说明，这些示例性实施例将通过附图进行详细描述。这些实施例并非限制性的，在这些实施例中，相同的编号表示相同的结构，其中：

图1是根据本说明书一些实施例所示的渲染内嵌客户端界面至网页的系统的示例性示意图。

图2是根据本说明书一些实施例所示的渲染内嵌客户端界面至网页的方法示例性流程图。

图3是根据本说明书一些实施例所示的生成绘制内容的示例性流程图。

图4是根据本说明书一些实施例所示的另一渲染内嵌客户端界面至网页的方法示例性流程图。

图5是根据本说明书一些实施例所示的渲染内嵌客户端界面至网页的方法的示例性流程图。

图6是根据本说明书一些实施例所示的终端设备的结构示例性示意图。

图7是根据本说明书一些实施例所示的计算机可读存储介质的结构示例性示意图。

具体实施方式

为了更清楚地说明本说明书实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单的介绍。显而易见地，下面描述中的附图仅仅是本说明书的一些示例或实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图将本说明书应用于其他类似情景。除非从语言环境中显而易见或另做说明，图中相同标号代表相同结构或操作。

应当理解，本文使用的“系统”、“装置”、“单元”和/或“模块”是用于区分不同级别的不同组件、元件、部件、部分或装配的一种方法。然而，如果其他词语可实现相同的目的，则可通过其他表达来替换所述词语。

除非上下文明确提示例外情形，“一”、“一个”、“一种”和/或“该”等词并非特指单数，也可包括复数。一般说来，术语“包括”与“包含”仅提示包括已明确标识的步骤和元素，而这些步骤和元素不构成一个排它性的罗列，方法或者设备也可能包含其他的步骤或元素。

本说明书中使用了流程图用来说明根据本说明书的实施例的系统所执行的操作。应当理解的是，前面或后面操作不一定按照顺序来精确地执行。相反，可以按照倒序或同时处理各个步骤。同时，也可以将其他操作添加到这些过程中，或从这些过程移除某一步或数步操作。

图1是根据本说明书一些实施例所示的渲染内嵌客户端界面至网页的系统的示例性示意图。以下将对本说明书实施例所涉及的渲染内嵌客户端界面至网页的系统进行详细说明。需要注意的是，以下实施例仅用于解释本说明书，并不构成对本说明书的限定。

如图1所示，渲染内嵌客户端界面至网页的系统100(以下可以简称系统100)可以包括网页端110、通信服务120和客户端130。

网页端110可以包括多个预设的网页。响应于用户的访问请求，网页端110可以加载访问请求所对应的网页。例如，响应于用户可以通过浏览器输入网页端110中的登录页面的地址，网页端110可以显示登录页面的内容。

网页组件可以指对界面布局以及数据处理方法进行封装的网页模块。在一些实施例中，网页端110可以包括多个预设的网页组件，用于显示网页中的部分或全部网页内容。

如图1所示，一个网页可以加载多个网页组件，如网页组件110-1、网页组件110-2等。一个网页组件也可以应用于多个不同的网页。网页组件可以在当前网页的某个区域(如左侧、右下角等)显示图像、文本等内容。

网页组件可以根据网页端110预设的业务场景，基于网页编程技术预先构建。网页组件可以具有不同的类型。例如，网页组件可以包括表格组件，用于以多行多列的展示形式对网页内容进行显示。其中，网页内容可以是文本、图像、音频、视频或其他自定义类型的一种或多种组合的数据。

网页组件可以包括界面标签。界面标签可以是超文本标记语言(Hyper TextMarkup Language，HTML)的标签。例如，图像(img)标签、块(div)标签、表格(table)标签等。网页组件还可以包括界面样式(Cascading Style Sheets，CSS)。例如，颜色(color)标签，宽度(width)标签，边框(border)标签等。

网页组件可以通过界面标签和界面样式对网页内容进行组织、排版和修饰等处理，以呈现各种效果的网页内容。

在一些实施例中，网页组件可以在网页中进行静态加载。静态加载可以指预先设置于网页代码中。例如，一个静态加载的网页组件，当其附属网页被加载(显示)时，该网页组件即存在于该网页中。网页组件也可以是动态加载的。例如，网页组件可以响应于用户操作事件进行加载。例如，用户通过鼠标点击某个页面控件(如界面按钮等)后，网页的js(JavaScript)脚本可以动态加载该网页组件。

在一些实施例中，网页组件还可以包括画布Canvas标签，用于渲染该网页组件对应的网页内容以展示给用户。如图1所示，网页组件110-1可以包括画布Canvas标签110-11、网页组件110-2可以包括画布Canvas标签110-21。

画布Canvas标签还可以用于监听用户的鼠标操作事件，例如鼠标点击事件、悬浮事件等。此处仅作为示例的，对于智能终端(如智能手机、触摸终端)，画布Canvas标签也可以用于监听用户的手势事件，例如，一个手指的点击事件、两个手指的缩放事件等。

在一些实施例中，网页组件还可以包括输入input标签，用于监听键盘事件。例如，通过输入input标签可以获取用户键盘输入的文本信息。

如图1所示，网页组件110-1可以包括输入input标签110-12、网页组件110-2可以包括输入input标签110-22。

在一些实施例中，网页组件还可以包括事件处理脚本(如JavaScrpit脚本)。事件处理脚本可以指用于处理界面事件(如按钮被按下事件、鼠标点击事件)以及对数据进行分析、处理的程序代码。例如，事件处理脚本可以用于响应用户的鼠标点击事件后，执行鼠标点击事件对应的处理过程。

在一些实施例中，网页组件可以基于事件处理脚本，向服务器(图1中未示出，如云服务器、局域网服务器)发送获取网页数据的请求，进而基于服务器反馈的网页数据，通过事件处理脚本生成绘制内容，并进行渲染显示。网页数据可以是用于被网页和/或网页组件进行处理以生成网页内容的数据(如表格数据、报表数据、图像、用户信息等业务数据)。

在一些实施例中，网页组件可以基于事件处理脚本，向客户端130发送获取网页数据的请求，并基于客户端130反馈的网页数据进行渲染显示。

示例性的，网页组件向客户端130通过第一通信服务120-1向客户端130发送获取网页数据的请求，客户端130接收到网页端110发送的请求后，进而可以向服务器(如云服务器、局域网服务器)发送获取该网页数据的请求，并将服务器反馈的网页数据通过第二通信服务120-2发送至网页端110；最后，网页组件可以基于客户端130反馈的网页数据，通过事件处理脚本生成绘制内容，并通过画布Canvas标签对绘制内容进行显示。其中，绘制内容可以指经过对界面内容进行渲染处理(如颜色设置、纹理等)后可以用于显示的数据(例如bitmap数据对象)。关于绘制内容的相关内容参见图2及其描述。

在一些实施例中，网页组件还可以基于事件处理脚本，构建网页内容的生成指令，通过通信服务120将生成指令发送至客户端130，并基于客户端130反馈的绘制内容进行渲染显示。其中，该生成指令用于由客户端130生成网页内容对应的绘制内容。关于客户端生成网页内容对应的绘制内容的相关内容参见图2及其描述，关于网页端显示绘制内容的相关内容参见图5。

本说明书一些实施例，通过结合业务场景或业务任务，构建对应的多个网页组件，能够实现网页端代码的可移植性和复用性，提高网页端开发的效率，减少网页端开发团队的开发以及维护的工作成本和时间。

通信服务120可以指用于网页端110与客户端130进行数据通信的交互服务。例如，通信服务120可以用于网页端110接收和/或发送数据和/或指令；通信服务120也可以用于客户端130接收和/或发送数据和/或指令。通信服务120可以是根据预设的通信协议构建。示例性的，通信服务120可以基于包括但不限于管道、消息队列、套接字等通信协议构建。

在一些实施例中，通信服务120可以基于webSocket的通信方式实现。其中，客户端130可以作为监听者，网页端110可以作为请求者。

示例性的，客户端130可以配置监听地址和监听端口号。例如，监听地址可以是127.0.0.1，也可以是局域网内的IP地址(如固定配置的192.0.0.100)，监听端口号可以是预设的固定端口号，如7080等。网页端110作为请求者，则可以配置目标连接地址和目标端口号。其中，目标连接地址与客户端130配置的监听地址(如127.0.0.1或192.0.0.100)一致，目标端口号与客户端配置的监听端口号(如7080)一致。网页端110可以基于webSocket协议(如预设的标识ws、wss)和目标连接地址和目标端口号，向客户端130发起webSocket连接请求。

响应于网页端110向客户端130发起的webSocket连接请求为成功状态，通信服务120即为建立成功。

在一些实施例中，通信服务120可以在网页端110和客户端130均处于运行状态时，由网页端110向客户端130发起的webSocket连接请求成功后创建。通信服务120也可以根据网页端110的业务需求进行实时建立。示例性的，响应于网页端110存在需要实时接收和/或发送数据至客户端130的场景，网页端110可以向客户端130发起webSocket连接请求，以建立通信服务120。

在一些实施例中，响应于当前网页存在网页组件(如静态加载的网页组件)，网页端110则可以向客户端130发起webSocket连接请求，以建立通信服务120。

上述关于webSocket连接请求的发起是仅作为示例性的，并不旨在于对此进行限定，例如，当通信服务120处于无效状态(如连接断开)时，当前网页和/或网页组件也可以向客户端130发起webSocket连接请求以建立通信服务120，其中，网页端110可以检测通信服务120是否处于无效状态，关于网页端110检测通信服务120是否处于无效状态的相关内容参见图5及其描述。

在一些实施例中，通信服务120可以通过各种方式进行销毁以释放资源。示例性的，客户端130在关闭或停止运行时，或者网页端110停止运行时(例如，用于运行网页端110的浏览器等关闭时)，客户端130可以停止通信服务120的运行。

在一些实施例中，如图1所示，通信服务120可以包括第一通信服务120-1。第一通信服务120-1可以用于网页端110进行数据和/或指令转发的服务。例如，网页端110可以基于第一通信服务120-1主动向客户端130发送网页内容的生成指令。关于第一通信服务的相关内容，详见下文描述。

在一些实施例中，如图1所示，通信服务120可以包括第二通信服务120-2。第二通信服务120-2可以用于客户端130进行数据和/或指令转发的服务。例如，客户端130可以通过第二通信服务120-2主动向网页端110发送网页内容对应的绘制内容。关于第二通信服务的相关内容，详见下文描述。

客户端130可以指可执行的应用程序，其可以与网页端110运行在相同的终端设备上。其中，终端设备可以是用户所使用的各类终端设备，例如，个人计算机或个人电脑，平板电脑，智能手机等用户设备。

在一些实施例中，客户端130可以是终端设备不同的运行环境(如操作系统)下对应的不同类型的应用程序。例如，微软操作系统(Microsoft Windows)运行环境下的exe可执行应用程序、苹果操作系统(如Apple Mac OS X)的Mac App；也可以是平板电脑或智能手机运行环境(如iOS、Android)下的App。

客户端130可以具有可视化的用户界面，如用户可操作的(如鼠标点击)可视化窗口界面。也可以不具有用户界面，如仅为网页端110提供业务服务(如代理服务、访问服务、数据获取服务)。关于客户端130的可视化形式，本说明书对此不作限定。

在一些实施例中，客户端130的启动或运行可以由用户触发执行，也可以由网页端110触发执行。例如，网页端110可以通过某个网页的加载过程或网页组件中的事件处理脚本(JavaScript)，基于预设的规则(如URL Scheme协议)启动客户端130。

在一些实施例中，客户端130可以包括多个客户端组件。客户端组件可以是基于诸如C、C++、C#、objective-C和Java等计算机编程语言实现的程序或代码。客户端组件可以用于生成网页组件所需要的绘制内容。在一些实施例中，客户端组件的数量相关于业务任务、网页组件的类型和呈现方式等的一种或组合。例如，客户端组件可以根据业务任务(如股票交易信息、企业信息等)设置股票交易信息客户端组件、企业信息客户端组件；也可以根据网页组件的类型和/或呈现方式构建相应的客户端组件(如表格呈现方式的客户端组件)。

在一些实施例中，客户端组件可以与网页组件一一对应，例如，可以根据网页组件a预先构建对应的客户端组件a，其中，客户端组件a所生成的绘制内容(如Bitmap类型数据)，可以由网页组件a中的事件脚本(如调用画布Canvas标签的Canvas相关的API)，实现绘制内容的显示。关于网页组件显示绘制内容的相关内容参见图5及其描述。

在一些实施例中，客户端130可以包括应用程序接口(Application ProgrammingInterface，API)以供网页端110进行访问或调用。在一些实施例中，客户端130提供的应用程序接口可以是对应于各类预设的业务任务的接口。示例性的，客户端130可以提供获取股票基本信息接口、获取股票交易信息接口、获取企业年报信息接口等业务任务对应的应用程序接口。

网页端110向客户端130发起的获取业务数据(网页数据)的请求可以包括访问上述客户端130所提供的应用程序接口。客户端130可以通过应用程序接口与网页端110进行交互。例如，网页端110通过访问获取股票基本信息接口，以获得股票基本信息的相关业务数据，客户端130可以根据网页端110访问该接口时的参数配置(如股票编码、名称等)，向网页端110反馈对应的股票的基本信息。此处关于应用程序接口的说明仅作为示例性的，并不旨在于对此进行限定。例如，应用程序接口还可以包括用于生成绘制内容的接口，以响应网页端110显示绘制内容的处理。也可以包括用于验证通信服务是否有效的心跳消息接口。关于心跳消息的相关内容参见图5及其描述。

在一些实施例中，客户端130可以包括用于监听网页端110进行webSocket连接请求的应用程序接口。示例性的，该应用程序接口包括预设的IP地址和端口号。其中，响应于客户端130和网页端110运行在相同的终端设备上，预设的IP地址可以是127.0.0.1或localhost。预设端口号可以是满足规则的端口号，如7080、8090等。该应用程序接口所对应的客户端监听服务可以随着客户端130的运行而启动。

在一些实施例中，响应于网页端110通过webSocket连接请求成功后，客户端130与网页端110之间即建立了双向数据传输通道。通过该双向数据传输通道，客户端130与网页端110之间可以相互主动发送数据以及接收数据。该双向数据传输通道所实现的客户端130与网页端110之间的交互服务可以称之为通信服务，其可以是如图1所示的通信服务120。

在一些实施例中，响应于网页端110的webSocket连接请求成功后，客户端130能够获得第一webSocket对象，同时，网页端110能够获得第二webSocket对象。

客户端130可以通过第一webSocket对象向网页端110主动发送消息(数据或指令)，同时，也可以通过第一webSocket对象，接收网页端110发送的消息。此时，第一webSocket对象所实现的与网页端110进行数据交互的服务可以实现第一通信服务和/或第二通信服务。示例性的，客户端130可以通过第一webSocket对象接收网页端110发送的消息以实现第一通信服务；也可以通过第一webSocket对象向网页端110发送消息以实现第二通信服务。

相应的，网页端110可以通过第二webSocket对象向客户端130主动发送消息，同时，也可以通过第二webSocket对象，接收客户端130发送的消息。此时，第二webSocket对象所实现的与客户端130进行数据交互的服务可以实现第一通信服务和/或第二通信服务。示例性的，网页端110可以通过第二webSocket对象向客户端130发送消息以实现第一通信服务；也可以通过第二webSocket对象接收客户端130发送的消息以实现第二通信服务。

需要说明的是，网页端110与客户端130通过第一通信服务和/或第二通信服务进行数据交互的数据可以是各种数据形式(如文本、字符流、字节流)。在一些实施例中，网页端110与客户端130可以基于JSON(JavaScript Object Notation)的数据格式对交互的数据进行组织以实现数据的交互，更多内容参见图2及其描述。

本说明书一些实施例，通过第一通信服务和第二通信服务能够实现，网页端与客户端之间彼此主动地接收和/或发送数据，实现数据交互的实时性。

渲染内嵌客户端界面至网页的系统100还可以包括其他的组成部分，例如，系统100还可以包括网络(如本地局域网)，用于网页端110与客户端130的交互(如连接、数据的接收/发送)；系统100还可以包括服务器(如云服务器)，用于为网页端110和/或客户端130提供诸如业务数据、网页数据、公共数据等数据。

应当注意，系统100仅仅是为了说明的目的而提供，并不意图限制本说明书的范围。对于本领域的普通技术人员来说，可以根据本说明书的描述，做出多种修改或变化。例如，系统100以包括其他合适的一个或多个组件以实现类似或不同的功能。然而，变化和修改不会背离本说明书的范围。

图2是根据本说明书一些实施例所示的渲染内嵌客户端界面至网页的方法示例性流程图。

在一些实施例中，流程200可以由客户端执行。如图2所示，流程200包括下述步骤：

步骤210，通过第一通信服务，从网页端接收网页内容的生成指令，生成指令包括业务任务信息和显示区域信息。

在一些实施例中，客户端可以通过第一通信服务持续监听网页端的请求，响应于网页端发送的网页内容的生成请求，客户端可以对该生成请求进行预处理，并获得该生成请求对应的生成指令。其中，预处理可以包括对生成请求的数据解析、校验等处理。在一些实施例中，网页端发送的网页内容的生成请求也可以包括生成指令。关于第一通信服务的相关内容参见图1及其描述。

网页内容的生成指令可以指用于生成网页内容对应的绘制内容的程序指令，其可以基于网页端的实际需求确定。例如，生成指令可以用于指示客户端生成图表、报表、图像等数据的绘制内容。

在一些实施例中，生成指令可以根据网页端的业务场景进行预先设定。业务场景可以包括网页的功能、用户交互等。例如，对于网页端的一个或多个网页中的某一个，其可以包括预设的用于生成动态图表(如股票交易信息、月报表信息等)对应的绘制内容的生成指令。需要说明的是，根据业务场景的不同，生成指令可以是预设的一个或多个。

在一些实施例中，生成指令可以包括业务任务信息和显示区域信息。

业务任务可以指为用户提供的服务或功能。例如，业务任务可以是显示某只股票的交易信息、显示某个企业的年度报表数据等，业务任务也可以是需要为用户提供的各种应用场景的处理，如网页中的图片的放大、缩小，数据的编辑等。在一些实施例中，业务任务信息可以包括业务类别，例如股票类、企业类、用户类等；业务任务信息还可以包括业务名称，例如获取股票基本信息、获取股票交易信息、获取企业年报、获取股东信息等；业务任务信息还可以包括其他信息，例如，参数配置(如股票名称、日期、时间)、所属网页(如首页)、网页组件(如组件名称、编号)等。此处仅作为示例的，业务任务信息可以根据实际的需求进行预先配置。

在一些实施例中，业务任务信息可以针对不同的网页进行预先设定。例如，可以设置网页、网页组件与业务任务信息的对应关系表。响应于用户访问的当前网页，网页端110可以基于该关系表获取当前网页所对应的业务任务信息，并加载对应的网页组件。

显示区域可以指用于网页端对网页内容进行显示的目标区域。例如，显示区域可以是网页中某个预设区域，也可以是浮层、窗口等所对应的区域。显示区域信息可以包括但不限于显示区域的坐标信息(如起始点坐标)、长度(如400)和宽度(如400)信息。

在一些实施例中，显示区域也可以包括多个区域和/或子区域。例如，可以根据业务任务信息，通过多个显示区域对网页内容展示。

生成指令可以指用于生成最终显示的网页内容的程序指令或消息。生成指令可以是各种数据形式，例如，XML的数据形式、满足特定规则(如以分号作为分割标识)的纯文本形式等。

在一些实施例中，生成指令可以是基于JSON(JavaScript Object Notation)的数据形式。网页端110(如网页或网页组件)可以基于业务任务信息构建JSON格式的生成指令。

例如，以“bizType“作为业务类型的关键字(key)，具体业务类型(如“stock”、“company”)作为值(value)，生成{“bizType”：“stock”}或{“bizType”：“company”}的键值对，作为生成指令的一部分。

以“bizName”作为业务任务名称的关键字，具体业务名称(如“getTradeInfo”、“getCompanyInfo”)作为值，生成{“bizName”：“getTradeInfo”}或{“bizName”：“getCompanyInfo”}的键值对，作为生成指令的一部分。

以此原理，网页端110对业务任务信息中的其他配置参数构建键值对，以得到生成指令。

仅作为示例性的，生成指令可以为：

此处仅作为示例的，例如，生成指令中还包括显示区域信息以及其他预设的信息。

步骤220，基于生成指令，生成绘制内容。

在一些实施例中，客户端可以解析生成指令得到业务任务信息，并基于业务任务信息，获取相应的业务数据。例如，客户端可以基于包括但不限于从本地数据(如预先下载的存储于终端设备中的数据包)、远程服务器(如云服务器)等方式获取业务数据。例如，客户端可以解析上述示例的生成指令，并从远程服务器获取苹果公司的股票(APPL)当天(如2023年1月1日)的交易数据，进而根据该交易数据，生成绘制内容。

绘制内容可以指用于由网页端进行显示的界面内容。绘制内容可以是位图数据(Bitmap)的数据形式。该位图数据可以由网页端(如网页组件)通过画布Canvas标签的处理(如调用Canvas相关API)并进行显示。

需要说明的是，网页内容是具有一定的布局、样式的视觉内容。例如，某个业务场景中，需要展示一个用户表格。用户最终在网页和/或网页组件中看到的表格可以称之为网页内容，其中所呈现的原始业务数据(如用户信息中的名称、年龄)在本说明书中可以称之为网页数据。网页数据需要经过表格的界面布局、界面样式的渲染处理，如对表格的背景、边框的宽度、圆角、文本的字体、大小等进行绘制配置，绘制配置所生成的数据可以称之为绘制内容，其可以是bitmap的数据对象。绘制内容可以经过Canvas进行呈现。其中，中间的绘制配置过程可以由终端设备的浏览器完成，也可以由客户端或其他的处理设备完成。

绘制内容可以包括但不限于文本、图像、动画等数据及其数据的显示方式(如颜色、阴影、间距等)。其可以根据网页端的目标网页组件的配置确定。例如，对于表格类型的网页组件，绘制内容可以是表格展示形式的界面内容。

在一些实施例中，客户端可以包括与网页组件对应的客户端组件，以生成与目标网页组件对应的绘制内容。示例性的，响应于网页组件(如表格网页组件)需要显示表格形式的绘制内容，客户端组件可以生成表格展示形式的位图数据。关于客户端组件的相关内容参见图1及其描述。

在一些实施例中，客户端可以基于客户端组件生成绘制内容。

客户端组件可以创建绘制内容上下文。绘制内容上下文可以是窗口或视图。在一些实施例中，绘制内容上下文可以隐藏的。其中，绘制内容上下文的区域大小可以基于生成指令的显示区域信息确定。例如，绘制内容上下文可以是一个400*400的窗口或视图。通过创建与生成指令所配置的显示区域信息一致的绘制内容上下文，可以使得绘制内容与网页端的显示保持一致。

客户端可以创建Bitmap对象，通过客户端组件根据该客户端组件的预设配置(如颜色、线条)以及前述获取的业务数据对该Bitmap对象进行配置处理。配置处理可以是基于Bitmap的绘图API或绘图函数所进行的处理。其中，配置处理的过程可以是基于预设的业务任务预先设定。

示例性的，某个客户端组件对应的业务任务为显示一张图像。该客户端组件可以通过编程技术预设定义好处理的过程，该处理过程可以表示为一个函数或方法(例如，其函数名称为showImageForTaskOne)。该函数或方法的内部可以是多个Bitmap的绘图API或绘图函数的调用过程。该函数或方法的参数配置可以是相应的业务数据。

前述的绘图上下文(如隐藏的窗口)在创建成功时可以调用该函数(如showImageForTaskOne)，并输入业务数据(如一张图像)，完成处理后获得的数据可以为该图像对应的bitmap数据。

在一些实施例中，客户端组件可以在获得业务任务对应的bitmap数据后，将该bitmap数据作为绘制内容，存储于客户端缓存中。在一些实施例中，创建的绘制内容上下文(如隐藏的窗口)可以进行销毁处理。

客户端可以通过客户端缓存存储包括当前生成指令对应的当前绘制内容，也可以存储一个或多个历史生成指令对应的历史绘制内容。

在一些实施例中，客户端可以根据多个不同的客户端缓存确定绘制内容的差异内容，并将该差异内容作为目标绘制内容发送至网页端。更多内容参见图3及其描述。

步骤230，通过第二通信服务，将绘制内容发送至网页端，绘制内容用于在网页端中的对应位置进行显示，对应位置基于显示区域信息确定。

在一些实施例中，客户端可以通过第二通信服务，将绘制内容发送至网页端，同时，网页端可以通过该第二通信服务接收该绘制内容，并根据业务任务信息中的显示区域信息，将绘制内容在对应位置进行显示。关于网页端将绘制内容在对应位置进行显示的相关内容参见图5及其描述。

本说明书一些实施例，通过将网页端需要显示的网页内容，由客户端绘制完成，可以有效利用客户端高效的处理能力，减少网页端的对业务数据的获取以及处理的负荷，提高网页端内容显示的流畅性；同时，通过第一通信服务和第二通信服务，能够提升网页端与客户端之间交互的实时性。

图3是根据本说明书一些实施例所示的生成绘制内容的示例性流程图。

在一些实施例中，流程300可以由客户端执行。如图3所示，流程300包括下述步骤：

在一些实施例中，客户端可以包括第一缓存和第二缓存。客户端可以根据生成指令，通过第一缓存和/或第二缓存生成绘制内容。

步骤310，基于第一缓存存储第一缓存数据，第一缓存数据对应本次绘制内容。

第一缓存可以指用于存储本次绘制内容的存储设备。本次绘制会内容可以表征当前的生成指令所对应的绘制内容。

在一些实施例中，客户端可以包括多个第一缓存，多个第一缓存的每一个可以对应于一个业务任务。示例性的，获取苹果公司股票交易数据的业务任务可以对应一个第一缓存，客户端对该业务任务中苹果公司股票的实时交易信息进行缓存处理。获取微软公司股票交易数据的业务任务可以对应另一个第一缓存，客户端对该业务任务中微软公司股票的实时交易信息进行缓存处理。

步骤320，基于第二缓存存储第二缓存数据，第二缓存数据对应前一次绘制内容。

第二缓存可以指用于存储前一次绘制内容的存储设备。例如，网页端的上一次用户操作对应的生成指令所生成的绘制内容。

在一些实施例中，客户端可以包括多个第二缓存，多个第二缓存中的每一个可以对应于一个业务任务，其中，第二缓存所对应的业务任务与第一缓存对应的业务任务相同。

在一些实施例中，客户端可以将第一缓存中的第一缓存数据作为第二缓存数据存储于第二缓存中。示例性的，根据用户操作信息获取苹果公司股票交易数据的业务任务，第一缓存数据可以是当前11:00的交易数据，1min后，第一缓存中11:00的交易数据将作为第二缓存数据存储至第二缓存，同时当前11:01的交易数据作为第一缓存数据存储于第一缓存。

需要说明的是，不同的业务任务对应的绘制内容不同，同时，不同业务任务可以并行执行，相应的，客户端可以包括多个不同的业务任务所对应的不同的第一缓存和/或第二缓存。

步骤330，获取第一缓存数据与第二缓存数据的差异数据。

客户端可以通过客户端组件，基于第一缓存数据生成对应的绘制内容，并发送至网页端。

差异数据可以表征本次绘制内容与上一次绘制内容的不同数据。例如，若本次绘制内容与上一次绘制内容相同，则客户端可以不做生成绘制内容的处理。

在一些实施例中，客户端可以基于预设方法获取第一缓存数据与第二缓存数据的差异数据。

在一些实施例中，响应于第一缓存数据和/或第二缓存数据为位图数据，客户端可以基于位图异或操作获取第一缓存数据对应的第一位图与第二缓存数据对应的第二位图的差异数据。差异数据可以包括差异位置索引和差异量。其中，差异位置索引可以是索引的序列，其可以用于表征两个位图数据中位数据存在差异的多个不同的位。示例性的，第一位图和第二位图的某一个对应索引(位置)的二进制位(0或者1)不同时，位异或运算的结果为1，否则为0。差异量可以用于表征两个位图数据差异的数量。如差异量为0，则表示第一位图与第二位图相同。

本说明书一些实施例，通过位图异或操作，利用位运算在计算机处理设备的运算高效性，能够快速确定第一缓存数据对应的位图数据与第二缓存数据对应的位图数据的差异数据。

步骤340，基于差异数据以及前一次绘制内容，生成本次绘制内容。

在一些实施例中，客户端可以基于差异数据以及前一次绘制内容，生成本次绘制内容。示例性的，客户端可以基于差异数据中的差异位置以及差异量，根据前一次绘制内容，绘制差异部分的绘制内容。例如，前一次绘制内容为一帧人脸图像，本次绘制内容仅为该人脸图像中的眼睛部分存在差异，客户端可以通过异或绘图等预设算法，仅绘制眼睛部分，并将绘制处理完成后的本次绘制内容发送至网页端。可以理解的是，客户端基于差异数据生成本次绘制内容，可以减少绘制处理过程的工作量，减少客户端处理能力的消耗，提升响应网页端绘制内容需求的速度。

在一些实施例中，客户端也可以将差异数据对应的绘制内容发送至网页端，由网页端根据当前的网页内容(前一次绘制内容)以及该差异数据对应的绘制内容进行局部(差异位置)绘制处理，以生成目标网页内容(本次绘制内容)。可以理解的是，客户端发送差异数据对应的绘制内容，可以减少发送的数据量，减轻通信服务的负载。关于通信服务的相关内容，参见图1及其描述。

本说明书一些实施例，在数据交互较为频繁、数据量较大的应用场景，通过差异数据以及前一次绘制内容，生成本次绘制内容，可以有效降低客户端处理以及通信服务的负载。

在一些实施例中，客户端还可以对差异数据以及前一次绘制内容进行评估，以确定绘制内容的生成策略。

在一些实施例中，绘制内容的生成策略相关于用户操作事件频率，用户操作事件频率可以包括鼠标事件频率和键盘事件频率。

用户操作事件频率可以用于表征用户操作的频繁程度。频繁程度越高，表征本次绘制内容与前次绘制内容的差异数据小的概率越大。在一些实施例中，客户端可以预设鼠标事件间隔阈值(如1s)，响应于用户实际的鼠标事件间隔阈值小于预设鼠标事件间隔阈值，客户端可以忽略本次绘制内容的生成。示例性的，客户端可以记录每次获取到生成指令的时间点，并基于多个生成指令的时间点的时间的差值，以确定用户实际的鼠标事件间隔。例如，上一次获取的生成指令的时间点为11:00:20.100，本次获取的生成指令的时间点为11:00:20.200，即，用户的相邻两次操作为100ms，在1s内，表征该用户操作为频繁操作，客户端可以忽略本次绘制内容的生成，以减少不必要的数据处理。

本说明书一些实施例，通过对用户操作事件频率的评估，能够提高网页端与客户端之间的数据传输效率，有效避免频繁操作对客户端处理资源的浪费，同时避免网页端过于频繁对差异数据极小的页面内容进行更新所导致的用户体验不佳的影响。

在一些实施例中，生成策略相关于鼠标事件的类型。客户端可以预设鼠标事件类型，响应于实际的用户鼠标事件类型为预设鼠标事件类型，客户端均需要生成绘制内容。例如，对于缩放类型的鼠标(或手势)事件，客户端将及时反馈绘制内容。通过评估鼠标事件的类型，可以适配用户操作需求对网页更新的需求，使得绘制内容的生成策略更加符合使用的实际操作对于更新网页的需求，进一步优化用户体验。

在一些实施例中，生成策略还可以相关于业务任务类型。客户端可以预先设置不同的业务任务的响应等级。响应等级可以是[1,10]区间内的数值形式，值越大，响应等级越高，越需要及时生成绘制内容并发送至网页端，以及时更新网页内容。

通过引入业务任务类型，能够将绘制内容的生成策略在考虑数据传输效率的同时，能够更好的结合业务场景，满足业务的需求。

在一些实施例中，生成策略还可以相关于生成指令的差异性。客户端可以确定本次生成指令与前一次生成指令的差异性。示例性的，若本次生成指令与前一次生成指令相同，客户端可以将第二缓存数据，即上一次绘制内容反馈给网页端，以避免客户端重复的数据处理过程。相应的，客户端还可以包括预设数量的第三缓存，用于储存一个或多个历史绘制内容。预设数量可以根据终端设备的处理能力、处理资源等预先设定。通过本次生成指令与历史生成指令的差异性，以更快获得与本次生成指令相匹配的历史绘制内容，减少客户端的重复或冗余的处理，提高客户端确定本次绘制内容的效率。

需要说明的是，关于绘制内容的生成策略，客户端可以是上述用户操作事件频率、鼠标事件的类型、业务任务类型和生成指令差异性的一种或组合，其可以是综合评估的结果，例如，可以对部分或全部影响因素设置不同的权重系数，综合评估的结果可以是各影响因素的加权求和等方式以确定评估系数，其可以是数值的形式，值越大则需要及时和/或实时进行本次绘制内容的处理和生成，以确定是否向网页端反馈本次绘制内容。

本说明书一些实施例，引入第一缓存和第二缓存，可以评估本次绘制内容与前一次绘制的差异性；通过预设的绘制内容的生成策略，可以结合网页端的实际情况以更有效率得确定本次绘制内容的生成。可以避免用户过多的操作以及重复或冗余处理所导致的资源消耗。

本说明书一些实施例，通过获取本地绘制内容和上一次绘制内容的差异数据，可以减少发送至网页端的数据量，同时，引入绘制内容的生成策略可以结合业务任务以及用户操作的实际情况，使得网页端与客户端之间的数据数传输更有效率。

图4是根据本说明书一些实施例所示的另一渲染内嵌客户端界面至网页的方法示例性流程图。

在一些实施例中，流程400可以由客户端执行。如图4所示，流程400包括下述步骤：

步骤410，从网页端接收用户操作信息。

用户操作信息可以指用户在网页端的操作信息。

用户操作信息可以包括鼠标操作信息或手势操作信息。鼠标操作信息可以包括用户通过鼠标设备在网页界面中的单击操作、双击操作、鼠标悬浮、上下滑动等鼠标操作信息，手势操作信息也可以是智能设备(如平板电脑、智能手机设备)上的手指放大、缩小、点击、双击等手势信息。

用户操作信息还可以包括键盘操作信息。键盘操作信息可以包括键盘设备的键盘按键操作序列信息，例如，一个或多个字母按键、特殊字符按键等键盘按键被按下、释放的操作。键盘操作信息可以用于表征用户的键盘输入文本信息。

不同的用户操作信息可以表征网页端不同的业务任务。例如，网页中包括某个图表的概要信息，用户操作可以通过鼠标单击查看该图表详情的界面控件，以查看该图表更详细的内容，此时，该用户操作信息对应“查看图表详情”的业务任务。关于业务任务的相关内容参见图2及其描述。

在一些实施例中，客户端可以基于第一通信服务实时获取用户操作信息。关于第一通信服务的相关内容参见图1及其描述。

步骤420，基于操作信息和生成指令，生成绘制内容。

在一些实施例中，客户端可以根据用户操作信息，获取用户操作所对应的业务数据。可以理解的是，用户在网页端所进行的实时操作，其所对应需要呈现的网页内容可能不同，客户端可以根据不同的用户操作获取相应业务任务的业务数据。

在一些实施例中，客户端可以从本地(终端设备)存储器(如硬盘、磁盘)获取业务数据，如，预先下载并存储于存储器的公共数据。

在一些实施例中，客户端也可以从服务器(如远程服务器、第三方服务器)获取业务数据。如，响应于动态更新的业务数据，客户端可以从服务器获取最新的数据。

响应于成功获取业务数据后，客户端可以根据获取的业务数据生成绘制内容。关于生成绘制内容的相关内容参见图2及其描述。

本说明书一些实施例，通过转发用户在网页端的操作事件，有助于客户端及时响应用户的操作信息，同时，通过第一通信服务和/或第二通信服务的消息转发方式，能够提升网页端与客户端之间用户操作信息交互的实时性，有助于网页端及时呈现用户操作事件后的对应网页内容。

图5是根据本说明书一些实施例所示的渲染内嵌客户端界面至网页的方法的示例性流程图。

在一些实施例中，流程500可以由网页端执行。如图5所示，流程500包括下述步骤：

步骤510，通过第一通信服务，基于业务任务向客户端发送网页内容的生成指令，业务任务相关于网页内容，生成指令用于由客户端生成网页内容对应的绘制内容。

网页端可以通过第一通信服务，向客户端发送网页端消息。网页端消息可以包括多种预设消息类型的消息，其中，预设消息类型可以包括业务消息类型和心跳消息类型中的至少一种。

在一些实施例中，网页端可以通过第一通信服务，根据实际的业务任务(业务需求)向客户端发送业务消息。业务消息包括网页内容(如表格数据等)的生成指令。其中，业务任务相关于网页内容，生成指令用于由客户端生成网页内容对应的绘制内容。关于业务任务、绘制内容的相关内容参见图2及其描述。

在一些实施例中，网页端可以监听用户操作事件，并基于用户操作事件构建生成指令。关于用户操作事件的相关内容参见图4及其描述。

示例性的，响应于用户点击(如鼠标点击、手指触摸)了查看股票A的交易信息按钮的操作，网页端(如网页组件)可以构建股票A的交易信息的网页内容的生成指令，其中，该生成指令可以包括该股票的参数(如编号、名称等)、显示区域的配置参数等，并通过第一通信服务将生成指令发送至客户端。

在一些实施例中，网页端可以通过发送心跳消息以检查第一通信服务的有效性。示例性的，网页端可以通过第一通信服务，基于预设的时间周期向客户端发送心跳消息，其中，心跳消息可以是预设的文本，如“ask”、“1”。若网页端接收到客户端的预设回复信息(如“OK”、“2”)，表明第一通信服务为有效状态。其中，预设回复信息可以由客户端进行预先配置。

在一些实施例中，网页端可以通过预设超时时长以确认第一通信服务的有效性。例如，预设超时时长可以是5s、10s等。响应于网页端在预设超时时长内未能接收到客户端的回复信息，表明第一通信服务为无效状态。无效状态可以包括网络异常或客户端程序异常等。在一些实施例中，响应于第一通信服务为无效状态，网页端可以重新发起webSocket连接请求以重新建立通信服务，关于网页端发起webSocket连接请求以重新建立通信服务的相关内容参见图1及其描述。

在一些实施例中，网页端还可以预设连接重试次数，响应于发起的webSocket连接请求失败的次数达到预设连接重试次数，网页端可以向用户发起警示信息。警示信息可以是文本、短信、邮件、声音等形式。示例性的，可以向用户提示“网络异常，请稍后重试”、“通信服务已中断，请手动打开客户端”等。

本说明书一些实施例，通过引入心跳机制以及断线重连，能够实现网页端和客户端之间的通信服务的稳定性和可靠性，保障网页端与客户端之间的数据传输能够持续、有效得进行。

步骤520，通过第二通信服务，接收由客户端发送的绘制内容。

在一些实施例中，网页端可以通过第二通信服务，实时地接收由客户端发送的绘制内容。

响应于客户端对业务消息的成功反馈，网页端可以通过第二通信服务读取反馈消息。在一些实施例中，网页端可以通过事件处理脚本对该反馈消息进行预处理。预处理可以包括对反馈消息进行解密、校验等。例如，可以基于预设的加密解密规则进行解密处理、长度大小的校验等。

在一些实施例中，网页端可以基于预设的解析规则从反馈消息中获取绘制内容。示例性的，响应于反馈消息为JSON格式，网页端可以基于预设的关键字(如source关键字)从反馈消息中获取该关键字对应的value的值，以获得目标绘制内容。

步骤530，基于绘制内容，在网页端的对应位置进行显示。

在一些实施例中，响应于接收到客户端发送的绘制内容，网页端可以通过网页组件的画布Canvas标签对绘制内容进行渲染显示。示例性的，网页组件可以基于事件处理脚本，调用画布Canvas标签的API，如drawBitmap、drawLine、drawPoint、drawText以进行画图、画线、画点、画文本等以实现网页内容的显示。

在一些实施例中，网页端通过第二通信服务接收到客户端发送的Bitmap类型的数据，通过画布Canvas标签调用drawBitmap(Bitmap bitmap,Rect src,Rect dst,Paintpaint)以实现该Bitmap类型的数据的渲染显示。其参数可以分别表示Bitmap类型的数据对象、源区域、目标区域、画笔对象。其中，该Bitmap类型的数据对象可以基于客户端发送的绘制内容确定；目标区域可以基于网页端的对应位置确定，其可以是网页组件预设定的参数。源区域可以与目标区域相同，画笔对象可以是由事件处理脚本创建的对象，用于执行绘制内容的绘制处理。

响应于绘制完成，网页端可以显示出绘制内容所对应的网页内容。其中，网页组件还可以配置呈现方式。例如，可以是嵌入到网页中的对应位置，也可以是以浮层或窗口的形式，呈现方式可以基于网页组件的预先配置确定。

本说明书一些实施例，通过将网页端的目标渲染内容的处理过程由客户端完成，使得网页端能够专注于用户界面相关的用户体验工作，有效利用客户端的处理能力。通过网页端和客户端的协同工作，能够提升用户对网页端使用的流畅性，避免实时、动态以及数据量大的场景下的显示卡顿现象。

图6是根据本说明书一些实施例所示的终端设备的结构示例性示意图。

如图6所示，终端设备600包括处理器610、与处理器610耦接的存储器620。

其中，存储器620存储有用于实现上述任一实施例的方法的程序指令；处理器610用于执行存储器620存储的程序指令以实现上述方法实施例的步骤。其中，处理器610还可以称为CPU(Central Processing Unit，中央处理单元)。处理器610可能是一种集成电路芯片，具有信号的处理能力。处理器610还可以是通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

图7是根据本说明书一些实施例所示的计算机可读存储介质的结构示例性示意图。

如图7所示，计算机可读存储介质700存储有程序指令710，该程序指令710被执行时实现本说明书上述实施例提供的方法。其中，该程序指令710可以形成程序文件以软件产品的形式存储在上述计算机可读存储介质700中，以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本说明书各个实施方式方法的全部或部分步骤。而前述的计算机可读存储介质700包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质，或者是计算机、服务器、手机、平板等终端设备。

上文已对基本概念做了描述，显然，对于本领域技术人员来说，上述详细披露仅仅作为示例，而并不构成对本说明书的限定。虽然此处并没有明确说明，本领域技术人员可能会对本说明书进行各种修改、改进和修正。该类修改、改进和修正在本说明书中被建议，所以该类修改、改进、修正仍属于本说明书示范实施例的精神和范围。

同时，本说明书使用了特定词语来描述本说明书的实施例。如“一个实施例”、“一实施例”、和/或“一些实施例”意指与本说明书至少一个实施例相关的某一特征、结构或特点。因此，应强调并注意的是，本说明书中在不同位置两次或多次提及的“一实施例”或“一个实施例”或“一个替代性实施例”并不一定是指同一实施例。此外，本说明书的一个或多个实施例中的某些特征、结构或特点可以进行适当的组合。

此外，除非权利要求中明确说明，本说明书所述处理元素和序列的顺序、数字字母的使用、或其他名称的使用，并非用于限定本说明书流程和方法的顺序。尽管上述披露中通过各种示例讨论了一些目前认为有用的发明实施例，但应当理解的是，该类细节仅起到说明的目的，附加的权利要求并不仅限于披露的实施例，相反，权利要求旨在覆盖所有符合本说明书实施例实质和范围的修正和等价组合。例如，虽然以上所描述的系统组件可以通过硬件设备实现，但是也可以只通过软件的解决方案得以实现，如在现有的服务器或移动设备上安装所描述的系统。

同理，应当注意的是，为了简化本说明书披露的表述，从而帮助对一个或多个发明实施例的理解，前文对本说明书实施例的描述中，有时会将多种特征归并至一个实施例、附图或对其的描述中。但是，这种披露方法并不意味着本说明书对象所需要的特征比权利要求中提及的特征多。实际上，实施例的特征要少于上述披露的单个实施例的全部特征。

一些实施例中使用了描述成分、属性数量的数字，应当理解的是，此类用于实施例描述的数字，在一些示例中使用了修饰词“大约”、“近似”或“大体上”来修饰。除非另外说明，“大约”、“近似”或“大体上”表明所述数字允许有±20％的变化。相应地，在一些实施例中，说明书和权利要求中使用的数值参数均为近似值，该近似值根据个别实施例所需特点可以发生改变。在一些实施例中，数值参数应考虑规定的有效数位并采用一般位数保留的方法。尽管本说明书一些实施例中用于确认其范围广度的数值域和参数为近似值，在具体实施例中，此类数值的设定在可行范围内尽可能精确。

针对本说明书引用的每个专利、专利申请、专利申请公开物和其他材料，如文章、书籍、说明书、出版物、文档等，特此将其全部内容并入本说明书作为参考。与本说明书内容不一致或产生冲突的申请历史文件除外，对本说明书权利要求最广范围有限制的文件(当前或之后附加于本说明书中的)也除外。需要说明的是，如果本说明书附属材料中的描述、定义、和/或术语的使用与本说明书所述内容有不一致或冲突的地方，以本说明书的描述、定义和/或术语的使用为准。

最后，应当理解的是，本说明书中所述实施例仅用以说明本说明书实施例的原则。其他的变形也可能属于本说明书的范围。因此，作为示例而非限制，本说明书实施例的替代配置可视为与本说明书的教导一致。相应地，本说明书的实施例不仅限于本说明书明确介绍和描述的实施例。

Claims (9)

1.一种渲染内嵌客户端界面至网页的系统，其特征在于，所述系统包括客户端和网页端，所述网页端和所述客户端运行在相同的终端设备上；

所述客户端，被配置为用于：

通过第一通信服务，从所述网页端接收网页内容的生成指令，所述生成指令包括业务任务信息和显示区域信息；

基于所述生成指令，生成绘制内容；以及

通过第二通信服务，将所述绘制内容发送至所述网页端，所述绘制内容用于在所述网页端中的对应位置进行显示，所述对应位置基于所述显示区域信息确定；其中，所述客户端包括第一缓存和第二缓存，

所述客户端进一步配置为用于：

基于所述第一缓存储存第一缓存数据，所述第一缓存数据对应本次绘制内容；

基于所述第二缓存储存第二缓存数据，所述第二缓存数据对应前一次绘制内容；

获取所述第一缓存数据与所述第二缓存数据的差异数据；

基于所述差异数据以及前一次绘制内容，生成本次绘制内容；

所述网页端，被配置为用于：

通过所述第一通信服务，基于业务任务向所述客户端发送所述网页内容的生成指令，所述业务任务相关于所述网页内容，所述生成指令用于由所述客户端生成所述网页内容对应的绘制内容，其中，所述网页端包括多种不同预设类型的业务网页组件中的至少一个所述业务网页组件，所述业务网页组件相关于所述业务任务，所述业务网页组件包括画布canvas标签，所述画布canvas标签用于监听鼠标事件以及显示所述绘制内容；

通过所述第二通信服务，接收由所述客户端发送的所述绘制内容；

基于所述绘制内容，在所述网页端的所述对应位置进行显示；其中，所述业务任务相关于用户操作事件，

所述网页端进一步被配置为用于：

监听所述网页端的所述用户操作事件，所述用户操作事件包括所述鼠标事件和键盘事件；

基于所述用户操作事件，生成所述生成指令。

2.根据权利要求1所述的系统，其特征在于，所述客户端还被配置为用于：

从所述网页端接收用户操作信息，其中，所述用户操作信息基于所述网页端的所述用户操作事件生成；

基于所述操作信息和所述生成指令，生成所述绘制内容。

3.根据权利要求1所述的系统，其特征在于，所述业务网页组件还包括输入input标签，所述输入input标签用于监听所述键盘事件。

4.根据权利要求1所述的系统，其特征在于，所述网页端还被配置为用于：

响应于所述绘制内容为差异绘制内容，基于所述绘制内容，确定所述绘制内容在所述网页端的目标对应位置；

基于所述目标对应位置，显示所述绘制内容。

5.一种渲染内嵌客户端界面至网页的方法，其特征在于，应用于如权利要求1所述的系统中的网页端对应的客户端，所述网页端和所述客户端运行在相同的终端设备上；

所述方法包括：

通过第一通信服务，从所述网页端接收网页内容的生成指令，所述生成指令包括业务任务信息和显示区域信息；

基于所述生成指令，生成绘制内容；

通过第二通信服务，将所述绘制内容发送至所述网页端，所述绘制内容用于在所述网页端中的对应位置进行显示，所述对应位置基于所述显示区域信息确定；其中，所述客户端包括第一缓存和第二缓存，

所述方法还包括：

基于所述第一缓存储存第一缓存数据，所述第一缓存数据对应本次绘制内容；

基于所述第二缓存储存第二缓存数据，所述第二缓存数据对应前一次绘制内容；

获取所述第一缓存数据与所述第二缓存数据的差异数据；

基于所述差异数据以及前一次绘制内容，生成本次绘制内容。

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

从所述网页端接收用户操作信息；

基于所述用户操作信息和所述生成指令，生成所述绘制内容。

7.一种渲染内嵌客户端界面至网页的方法，其特征在于，应用于如权利要求1所述的系统中的客户端对应的网页端，所述网页端和所述客户端运行在相同的终端设备上；

所述方法包括：

通过第一通信服务，基于业务任务向所述客户端发送网页内容的生成指令，所述业务任务相关于所述网页内容，所述生成指令用于由所述客户端生成所述网页内容对应的绘制内容，其中，所述网页端包括多种不同预设类型的业务网页组件中的至少一个所述业务网页组件，所述业务网页组件相关于所述业务任务，所述业务网页组件包括画布canvas标签，所述画布canvas标签用于监听鼠标事件以及显示所述绘制内容；

通过第二通信服务，接收由所述客户端发送的所述绘制内容；

基于所述绘制内容，在所述网页端的对应位置进行显示；其中，所述业务任务相关于用户操作事件，

所述网页端进一步被配置为用于：

监听所述网页端的所述用户操作事件；

基于所述用户操作事件，生成所述生成指令。

8.根据权利要求7所述的方法，其特征在于，所述基于所述绘制内容在所述网页端的对应位置进行显示包括：

响应于所述绘制内容为差异绘制内容，基于所述绘制内容，确定所述绘制内容在所述网页端的目标对应位置；

基于所述目标对应位置，显示所述绘制内容。

9.一种计算机可读存储介质，其特征在于，所述存储介质存储计算机指令，当所述计算机指令被处理器执行时实现如权利要求5至8中任意一项所述的方法。