CN113032705A - 浏览器页面数据的处理处理方法、装置、设备及介质 - Google Patents

Abstract

本申请实施例提供了浏览器页面数据的处理方法、装置、电子设备及存储介质，涉及数据处理技术领域。该浏览器页面数据的处理方法包括以下步骤：当浏览器执行TAF请求时，通过主线程独立地向子线程发送TAF请求数据，通知所述子线程对所述TAF请求数据执行处理；利用所述子线程对TAF请求数据进行处理后发送至服务器，并由所述子线程接收所述服务器返回的响应数据；通过所述主线程接收所述子线程回传所述响应数据，得到TAF请求响应结果。本申请的技术方案能够能够提高浏览器页面的数据处理效率。

Description

浏览器页面数据的处理处理方法、装置、设备及介质

技术领域

本申请实施例涉及数据处理技术领域，具体而言，本申请实施例涉及浏览器页面数据的处理方法、装置、电子设备及存储介质。

背景技术

TAF网络传输都是二进制的数据，基于二进制的传输可以跨各端各种语言解析，也有加密效果。对于web端来说，每次请求数据都需要对请求的数据进行二进制的封包，并与返回来的二进制数据进行解包；而每一次的网络请求都要进行封包与解包，不但额外增加了请求的耗时。

目前，对于浏览器web端来说，由于JavaScript的脚本语言是以单线程的方式执行，也就是JavaScript执行脚本与UI渲染需要占用同一个主线程，因此，当浏览器在html页面中执行脚本时，无法进行TAF请求，此时页面状态是不可响应的；同样，当前主线程进行TAF请求数据的封包与解包时，浏览器无法进行UI渲染就会出现页面卡顿，严重影响了浏览器页面数据的处理效率。

发明内容

为了能够解决浏览器页面数据的处理效率低的技术问题，本申请实施例提供了一种浏览器页面数据的处理方法、装置、电子设备及存储介质。

第一方面，本申请实施例提供了一种浏览器页面数据的处理方法，该方法包括以下步骤：

当浏览器执行TAF请求时，通过主线程独立地向子线程发送TAF请求数据，通知所述子线程对所述TAF请求数据执行处理；

利用所述子线程对TAF请求数据进行处理后发送至服务器，并由所述子线程接收所述服务器返回的响应数据；

通过所述主线程接收所述子线程回传所述响应数据，得到TAF请求响应结果。

在第一方面的可选实施例中，所述利用所述子线程对TAF请求数据进行处理后发送至服务器的步骤，包括：

获取客户端信息，利用所述子线程将所述客户端信息添加至所述TAF请求数据并进行封包，形成一个TAF请求数据包；其中，所述TAF请求数据包的数据结构为二进制结构。

在第一方面的可选实施例中，所述当浏览器执行TAF请求时，通过主线程独立地向子线程发送消息通知的步骤之前，还包括：

在浏览器页面中针对业务数据配置主线程，在所述主线程中创建一个webworker子线程。

在第一方面的可选实施例中，所述通过主线程独立地向子线程发送TAF请求数据的步骤，包括：

通过所述主线程获取所述子线程的地址，并根据所述地址独立地向子线程发送所述发送TAF请求数据。

在第一方面的可选实施例中，所述由所述子线程接收所述服务器返回的响应数据的步骤，包括：

由所述子线程接收所述服务器响应数据包，经过解包处理得到响应数据和接收方客户端信息，并反馈至所述主线程；

其中，所述响应数据包的数据结构为二进制结构。

在第一方面的可选实施例中，所述浏览器页面数据的处理方法，还包括：

实时监听所述子线程对所述响应数据包的解包处理结果，直至所述子线程向所述主线程返回所述响应数据的执行结束，关闭所述子线程。

在第一方面的可选实施例中，所述浏览器页面数据的处理方法，还包括：

所述主线程根据所述响应数据和接收方客户端信息得到更新后的UI渲染脚本，通过所述主线程执行所述更新后的UI渲染脚本。

第二方面，还提供一种浏览器页面数据的处理装置，其包括：

请求模块，用于当浏览器执行TAF请求时，通过主线程独立地向子线程发送TAF请求数据，通知所述子线程对所述TAF请求数据执行处理；

响应模块，用于利用所述子线程对TAF请求数据进行处理后发送至服务器，并由所述子线程接收所述服务器返回的响应数据；

反馈模块，用于通过所述主线程接收所述子线程回传所述响应数据，得到TAF请求响应结果。

第三方面，提供了一种电子设备，该电子设备包括：

一个或多个处理器；

存储器；

一个或多个应用程序，其中一个或多个应用程序被存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序配置用于：执行实现本申请实施例的第一方面所提供的浏览器页面数据的处理方法。

第四方面，提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，其特征在于，该程序被处理器执行时实现本申请实施例第一方面所提供的浏览器页面数据的处理方法。

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

在本申请所提供的浏览器页面数据的处理方案，针对TAF请求数据的处理利用独立于主线程的子线程进行交互和处理，将该TAF请求数据的处理独立于浏览器的其他处理任务，避免因任务在主线程等待处理而造成的阻塞情况，从而提高浏览器页面的数据处理效率。

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

附图说明

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

图1为本申请的一个实施例所提供的浏览器页面数据的处理方法的流程示意图；

图2为本申请的一个实施例所提供的浏览器页面数据的处理方法的架构图；

图3为本申请公开的实施例所提供的浏览器页面数据的处理装置的结构示意；

图4为本申请一个实施例所提供的一种浏览器页面数据的处理的电子设备的结构示意图。

具体实施方式

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

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

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

在程序开发的过程中为了方便编译，创造了不少编译框架。各种编译框架的数据结构也各不相同。而对于TAF框架下的网络传输数据结构均为二进制。基于二进制的数据结构可以实现跨越各个端、各种编译语言进行解析和加密的目的。但是，对于web端而言，对数据结构为二进制的数据进行封包，以及对返回的数据进行二进制解包处理，需要额外增加了数据处理的时间。并且，利用JavaScript实现的浏览器是以的单线程的方式执行的。也就是浏览器针对同一业务数据进行执行时，是利用同一主线程对JavaScript的脚本执行与UI渲染占用进行数据处理的。在数据处理的过程中，直至JavaScript的脚本执行完毕之前，对UI渲染占用的任务是不可响应的。相对应地，如果主线程对UI渲染占用的任务处理过程中，也无法进行对脚本执行任务。因此，现有的浏览器页面的数据处理效率受到了很大影响。

针对现有浏览器页面的数据处理效率低的问题，本申请提供一种浏览器页面数据的处理方法。

参照图1，图1为本申请的一个实施例所提供的浏览器页面数据的处理方法的流程示意图。

本申请所提供一种浏览器页面数据的处理方法，其包括以下步骤：

S110、当浏览器执行TAF请求时，通过主线程独立地向子线程发送TAF请求数据，通知所述子线程对所述TAF请求数据执行处理。

在本申请的实施例中，浏览器所处理的数据为客户端在TAF框架的协议下所产生的数据。

当用户在客户端的浏览器进行操作时，基于TAF框架的协议生成TAF请求。根据该TAF请求获取业务数据的业务类型，调用对应的主线程，并根据该TAF请求生成对应的TAF请求数据，通过该主线程向子线程发送该TAF请求数据。通知该子线程，启动对TAF请求数据的执行处理。在本实施例中，该子线程是用于独立处理该主线程所处理的业务数据的TAF请求数据。

S120、利用所述子线程对TAF请求数据进行处理后发送至服务器，并由所述子线程接收所述服务器返回的响应数据。

在本步骤中，子线程获取该TAF请求数据，并对TAF请求数据进行处理后发送至服务器。

当服务器接收到对该TAF请求数据的响应数据，并反馈至该子线程，由该子线程接收服务器该响应数据。

S130、通过所述主线程接收所述子线程回传所述响应数据，得到TAF请求响应结果。

将上述步骤S120中子线程所接收的响应数据通过主线程进行接收，并通过浏览器将该响应数据的处理结果进行展示。

在本申请所提供的浏览器页面数据的处理方法，针对TAF请求数据的处理利用独立于主线程的子线程进行交互和处理，将该TAF请求数据的处理独立于浏览器的其他处理任务，避免因任务在主线程等待处理而造成的阻塞情况，从而提高浏览器页面的数据处理效率。

基于上述实施例，在步骤S110之前，还包括：

在浏览器页面中针对业务数据配置主线程。在本申请的实施例中，浏览器所执行的指令源于TAF请求，该TAF请求是以JavaScript语言所编写的脚本。该主线程也可使用JavaScript语言进行编译配置的。

在本实施例中，该浏览器为HTML5浏览器。在客户端获取TAF请求时，在该主线程中，加载一个JavaScript文件，在该主线程中创建一个webworker子线程。并且，在该主线程中记录有该子线程的地址。

以此基础上，步骤S110中的通过主线程独立地向子线程发送消息通知的步骤，可进一步包括：

通过该主线程，得到上述步骤所创建的子线程的地址，并根据该地址向该子线程发送TAF请求所生成的TAF请求数据。

在本实施例中，该TAF请求数据通过postMessage接口向子线程发送，其包括业务数据的参数信息。

例如在直播过程中，用户通过其客户端的浏览器打开应用，并登录直播页面，通过点击的操作方式向主播发送礼物。此时，浏览器得到关于送礼物这一业务数据的TAF请求，并生成关于该业务数据的业务类型和业务数量的字符串参数，并调用postMessage方法，向子线程传递TAF请求数据。该调用并传递的TAF请求数据如下：

postMessage({

type:’xxx’,

num:100

})

其中，type代表业务数据的业务类型，num代表业务数据的业务数量。

该子线程接收到该TAF请求数据后，依据TAF框架协议对该字符串参数进行封包，生成TAF请求数据包。

针对该TAF请求数据的处理，即针对步骤S120中的利用所述子线程对TAF请求数据进行处理后发送至服务器的步骤，可以进一步包括：

在客户端根据用户的操作形成的TAF请求的同时，获取客户端的终端信息和账户信息，得到客户端信息。该客户端信息至少包括客户端的源地址和数据处理交互中的端口号等信息，利用子程序将该客户端信息添加至TAF请求数据，并进行数据封包。其中，该客户端信息包括发送方客户端信息，和/或接收方客户端信息。

基于上述的实施例，针对业务数据的传输和封包的过程具体可以包括以下步骤：

S1、根据用户在浏览器的操作，得到TAF请求数据，其中该TAF请求数据包括业务数据的业务类型和业务数量的信息，并利用postMessag的方法传递至子线程。

S2、子线程从主线程得到该浏览器对应的终端信息和账户信息。其中，该终端信息包括业务数据的源端口号和源IP地址等信息，账户信息包括用户所登录的账户的信息。若该主线程所产生的数据预设特定的接收对象，则该终端信息包括业务数据的目的端口号和目的IP地址等信息，账户信息包括接收用户所登录的账户的信息。

S3、将该终端信息和账户信息作为数据首部，添加至TAF请求数据，并依据TAF框架协议进行封包得到TAF请求数据包。该TAF请求数据包的数据结构是二进制结构。

其中，当主线程向子线程传递TAF请求数据时，子线程利用onmessage接口得到该TAF请求数据。具体是，利用onmessage接口接收JavaScript文件中利用postMessage方法所形成的TAF请求数据，从该TAF请求数据获取包括业务类型和业务数量的字符串参数。

对于子线程对服务器所返回的响应数据，即步骤S120中的由所述子线程接收所述服务器返回的响应数据的步骤，包括：

由所述子线程接收所述服务器响应数据包，经过解包处理得到响应数据和接收方客户端信息，并反馈至所述主线程；

其中，所述响应数据包的数据结构为二进制结构。

服务器对根据上述任一实施例所得到的TAF请求数据包进行数据处理，和/或从接收方客户端进行数据处理后得到的响应数据，同样是遵循TAF架构协议，以二进制的数据结构存在。

子线程对该响应数据包的二进制数据进行解包处理，得到响应数据和客户端信息。该客户端信息包括接收方客户端信息。若该实施例中包含接收方客户端，该响应数据可以包括经过交互和处理后，对应各个接收方客户端的业务数据的业务类型和业务数量的变更后的参数值。

利用postMessage方法，将响应数据，具体为业务数据的业务类型和业务数量的变更后的参数值返回给主线程，并通过浏览器对该响应数据进行显示。

在本申请所提供的实施例中，还包括：

实时监听所述子线程对所述响应数据包的解包处理结果，直至所述子线程向所述主线程返回所述响应数据的执行结束，关闭所述子线程。

在上述利用onmessage接口接收JavaScript文件中postMessage所形成的TAF请求数据的步骤，还可以包括形成一TAF数据处理的onmessage事件。客户端通过实时监听该TAF数据处理的onmessage事件，即通过onmessage接口实时监听针对该TAF请求数据的响应情况。在本实施例中，该响应数据包经过子线程进行解包处理，将处理得到的响应数据利用postMessage方法返回至主线程。即利用postMessage的形式将业务数据的业务类型和业务数量的变更后的参数值返回给主线程。在本实施例中，将该情况设定为返回所述响应数据的任务执行结束。当监听到该任务结束时，形成terminate命令，主线程将该子线程进行关闭，使得该子线程无法进行信息传递。

若后续产生TAF请求时，再另行创建对应的子线程。

另外，上述的terminate命令也可以通过预设数据处理时长。从子程序接收到TAF请求数据时开始计时，当预设数据处理时长届满时，若无法获取响应数据，向浏览器发出报错提示。

在本申请的上述任一实施例中，浏览器在执行UI渲染脚本，均是通过主线程执行所述UI渲染脚本。当主线程接收到子线程所返回的响应数据时，根据业务数据的业务类型和业务数量的变更后的参数值，对UI渲染脚本对应的参数值进行更新，得到更新后的UI渲染脚本，并通过主线程执行更新后的UI渲染脚本。

参照图2，图2为本申请的一个实施例所提供的浏览器页面数据的处理方法的架构图。

在图2中包括发送方客户端、服务器，其中，发送方客户端包括浏览器、主线程和子线程。

为了更清楚地对本申请的发明设计思想进行描述，利用一直播送礼的实施例进行举例说明。该实施例执行方法包括如下步骤：

S11、根据直播的送礼功能，配置对应的主线程；

S12、对该主线程加载一个JavaScript文件，创建一个webworker子线程；

S13、根据用户通过发送方客户端的浏览器的直播界面上对特定的礼物图标的选定操作，生成关于赠送礼物的TAF请求，并发送至该主线程；

S14、主线程根据该TAF请求生成TAF请求数据，向子线程发送该TAF请求数据；

S15、子线程对TAF请求数据和发送方客户端的终端信息和账户信息进行封包，得到TAF请求数据包，并向服务器发送；

S16、服务器将该TAF请求数据包转发至接收方客户端；

S17、根据相对用户通过接收方客户端选定礼物的类型和数量，产生并向服务器返回包括业务数据的业务类型和业务数量的变更后的参数值的响应数据包；

S18、服务器将响应数据包返回至子线程；

S19、子线程对该响应数据包进行解压处理，得到响应数据和接收方客户端信息；

S21、子线程将该响应数据和接收方客户端信息返回至主线程，在此之前，主线程实时监听子线程对所述响应数据包的解包处理结果；

S22、主线程程根据所述响应数据和接收方客户端信息得到更新后的UI渲染脚本，通过所述主线程执行所述更新后的UI渲染脚本，利用浏览器将该响应数据的处理结果进行展示。

基于与时序数据的存储方法相同的申请构思，本申请实施例还提供了一种时序数据的存储装置。

参考图3，图3为本申请公开的实施例所提供的浏览器页面数据的处理装置的结构示意图。该浏览器页面数据的处理装置300，包括：

请求模块310，用于当浏览器执行TAF请求时，通过主线程独立地向子线程发送TAF请求数据，通知所述子线程对所述TAF请求数据执行处理；

响应模块320，用于利用所述子线程对TAF请求数据进行处理后发送至服务器，并由所述子线程接收所述服务器返回的响应数据；

反馈模块330，用于通过所述主线程接收所述子线程回传所述响应数据，得到TAF请求响应结果。

本申请实施例所提供的浏览器页面数据的处理装置300，针对TAF请求数据的处理利用独立于主线程的子线程进行交互和处理，将该TAF请求数据的处理独立于浏览器的其他处理任务，避免因任务在主线程等待处理而造成的阻塞情况，从而提高浏览器页面的数据处理效率。

基于与本申请实施例中所示的方法相同的原理，本申请实施例中还提供了一种电子设备，该电子设备可以包括但不限于：处理器和存储器；存储器，用于存储计算机操作指令；处理器，用于通过调用计算机操作指令执行实施例所示的方法。与现有技术相比，本申请实施例中的电子设备在本申请所提供的浏览器页面数据的处理方法，针对TAF请求数据的处理利用独立于主线程的子线程进行交互和处理，将该TAF请求数据的处理独立于浏览器的其他处理任务，避免因任务在主线程等待处理而造成的阻塞情况，从而提高浏览器页面的数据处理效率。

参照图4，图4为本申请一个实施例所提供的一种浏览器页面数据的处理方法的电子设备的结构示意图。

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

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

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，当其在计算机上运行时，使得计算机可以执行前述方法实施例中相应内容。与现有技术相比，本申请实施例中的计算机可读存储介质在本申请所提供的浏览器页面数据的处理方法，针对TAF请求数据的处理利用独立于主线程的子线程进行交互和处理，将该TAF请求数据的处理独立于浏览器的其他处理任务，避免因任务在主线程等待处理而造成的阻塞情况，从而提高浏览器页面的数据处理效率。

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

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

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

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

Claims (10)

1.一种浏览器页面数据的处理方法，其特征在于，包括以下步骤；

当浏览器执行TAF请求时，通过主线程独立地向子线程发送TAF请求数据，通知所述子线程对所述TAF请求数据执行处理；

利用所述子线程对TAF请求数据进行处理后发送至服务器，并由所述子线程接收所述服务器返回的响应数据；

通过所述主线程接收所述子线程回传所述响应数据，得到TAF请求响应结果。

2.根据权利要求1所述的方法，其特征在于，

所述利用所述子线程对TAF请求数据进行处理后发送至服务器的步骤，包括：

获取客户端信息，利用所述子线程将所述客户端信息添加至所述TAF请求数据并进行封包，形成一个TAF请求数据包；其中，所述TAF请求数据包的数据结构为二进制结构。

3.根据权利要求1所述的方法，其特征在于，

所述当浏览器执行TAF请求时，通过主线程独立地向子线程发送消息通知的步骤之前，还包括：

在浏览器页面中针对业务数据配置主线程，在所述主线程中创建一个webworker子线程。

4.根据权利要求3所述的方法，其特征在于，

所述通过主线程独立地向子线程发送TAF请求数据的步骤，包括：

通过所述主线程获取所述子线程的地址，并根据所述地址独立地向子线程发送所述发送TAF请求数据。

5.根据权利要求1所述的方法，其特征在于，

所述由所述子线程接收所述服务器返回的响应数据的步骤，包括：

由所述子线程接收所述服务器响应数据包，经过解包处理得到响应数据和接收方客户端信息，并反馈至所述主线程；

其中，所述响应数据包的数据结构为二进制结构。

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

实时监听所述子线程对所述响应数据包的解包处理结果，直至所述子线程向所述主线程返回所述响应数据的执行结束，关闭所述子线程。

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

所述主线程根据所述响应数据和接收方客户端信息得到更新后的UI渲染脚本，通过所述主线程执行所述更新后的UI渲染脚本。

8.一种浏览器页面数据的处理装置，其特征在于，其包括：

请求模块，用于当浏览器执行TAF请求时，通过主线程独立地向子线程发送TAF请求数据，通知所述子线程对所述TAF请求数据执行处理；

响应模块，用于利用所述子线程对TAF请求数据进行处理后发送至服务器，并由所述子线程接收所述服务器返回的响应数据；

反馈模块，用于通过所述主线程接收所述子线程回传所述响应数据，得到TAF请求响应结果。

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

一个或多个处理器；

存储器；

一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序配置用于：执行根据权利要求1-7任一项所述的浏览器页面数据的处理方法。

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

Images