CN117271014A - 基于web worker的数据处理方法和客户端 - Google Patents

基于web worker的数据处理方法和客户端 Download PDF

Info

Publication number
CN117271014A
CN117271014A CN202311460529.7A CN202311460529A CN117271014A CN 117271014 A CN117271014 A CN 117271014A CN 202311460529 A CN202311460529 A CN 202311460529A CN 117271014 A CN117271014 A CN 117271014A
Authority
CN
China
Prior art keywords
data
processed
sub
target
threads
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311460529.7A
Other languages
English (en)
Inventor
刘晓龙
赵启雯
郭子嫚
李雪
宋兵兵
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Postal Savings Bank of China Ltd
Original Assignee
Postal Savings Bank of China Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Postal Savings Bank of China Ltd filed Critical Postal Savings Bank of China Ltd
Priority to CN202311460529.7A priority Critical patent/CN117271014A/zh
Publication of CN117271014A publication Critical patent/CN117271014A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/448Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4482Procedural
    • G06F9/4484Executing subprograms
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485Scrolling or panning
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46Multiprogramming arrangements
    • G06F9/54Interprogram communication
    • G06F9/547Remote procedure calls [RPC]; Web services

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请提供了一种基于web worker的数据处理方法和客户端,该方法包括:接收服务器发送的待处理数据集;将待处理数据集拆分成多个第一子数据集;基于web worker创建多个第一子线程,并对各第一子线程中的数据进行并行处理,得到多个已处理数据集;将所有的已处理数据放入第一主线程中,并基于虚拟滚动技术对第一主线程中所有的已处理数据进行渲染,以控制显示页面显示第一目标内容。该方法利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,解决在数据量较大的情况下客户端处理数据的时间大幅增加,导致屏幕卡顿的问题。

Description

基于web worker的数据处理方法和客户端
技术领域
本申请涉及数据处理领域,具体而言,涉及一种基于web worker的数据处理方法、客户端、计算机可读存储介质和电子设备。
背景技术
目前的大数据量节点树设计方案大都采用异步加载或者虚拟滚动方式,使用异步加载,当子节点数据量大或者展开的子节点越来越多时,会导致性能大幅降低,浏览器卡顿,而且搜索时需要后端搜索,导致后端接口改造成本高,虚拟滚动+全量数据,当数据量十万级以上时,接口响应时间大幅增加,以及前端大数据量的转换计算,会导致首屏渲染时间变长,用户体验差。
发明内容
本申请的主要目的在于提供一种基于web worker的数据处理方法、客户端、计算机可读存储介质和电子设备,以至少解决在数据量较大的情况下客户端处理数据的时间大幅增加,导致屏幕卡顿的问题。
为了实现上述目的,根据本申请的一个方面,提供了一种基于web worker的数据处理方法,应用于客户端,所述数据处理方法包括:接收服务器发送的待处理数据集,所述待处理数据集包括多个待处理数据,所述待处理数据为支持所述客户端运行目标应用的数据;将所述待处理数据集拆分成多个第一子数据集,各所述第一子数据集中分别包括至少一个所述待处理数据;基于web worker创建多个第一子线程,并将各所述第一子数据集分别放入对应的所述第一子线程中并对各所述第一子线程中的数据进行并行处理,得到多个已处理数据集,各所述已处理数据集中分别包括至少一个已处理数据,各所述已处理数据分别为对应的所述待处理数据经过处理后的数据;将所有的所述已处理数据放入第一主线程中,并基于虚拟滚动技术对所述第一主线程中所有的所述已处理数据进行渲染,以使得显示页面显示第一目标内容。
可选地,在基于虚拟滚动技术对所述第一主线程中所有的所述已处理数据进行渲染,以控制显示页面显示目标内容之后,所述方法还包括:获取搜索信息,所述搜索信息为用户输入至所述客户端的信息;根据所述搜索信息,对所有的所述已处理数据进行搜索,确定目标数据,所述目标数据为符合所述搜索信息的数据;将所有的所述目标数据放入第二主线程中,并基于虚拟滚动技术对所述第二主线程中所有的所述目标数据进行渲染,使得显示页面显示第二目标内容。
可选地,根据所述搜索信息,对所有的所述已处理数据进行搜索,确定目标数据,包括:将所有的所述已处理数据拆分成多个搜索数据集,一个所述搜索数据集中包括至少一个所述已处理数据;基于web worker创建多个第二子线程;将各所述搜索数据集分别放入对应的所述第二子线程中,且根据所述搜索信息对各所述第二子线程中的数据进行并行搜索,得到目标数据集,所述目标数据集中包括至少一个所述目标数据。
可选地,基于虚拟滚动技术对所述第一主线程中所有的所述已处理数据进行渲染,以使得显示页面显示第一目标内容,包括:接收作用在所述显示页面上的滚动操作;根据所述滚动操作,确定显示数据,所述显示数据为所述显示页面下一帧的显示内容的数据;基于所述虚拟滚动技术对所述显示数据进行渲染,使得所述显示页面显示所述第一目标内容,所述第一目标内容为所述显示页面下一帧的显示内容。
可选地,所述显示数据有多个,基于所述虚拟滚动技术对所述显示数据进行渲染,使得所述显示页面显示所述第一目标内容,包括:确定与所述显示数据对应的dom元素,所述dom元素为目标节点树中的一个节点,所述目标节点树与所述显示页面的显示内容对应;按照所述目标节点树中节点的级联关系,渲染各所述dom元素,使得所述显示页面显示所述第一目标内容。
可选地,基于web worker创建多个第一子线程,包括:确定所述待处理数据集中的所述待处理数据的数量级;根据所述待处理数据的数量级,确定所述第一子线程的个数,所述第一子线程的个数与所述待处理数据的数量级正相关,所述第一子线程的个数小于或者等于最大阈值个数,一个所述第一子线程中所述待处理数据的数据量小于或者等于最大阈值数据量;根据所述第一子线程的个数,创建各所述第一子线程。
可选地,将所述待处理数据集拆分成多个第一子数据集,包括:将所述待处理数据集平均拆分成多个所述第一子数据集,其中,各所述第一子数据集中的所述待处理数据的数据量相同。
根据本申请的另一方面,提供了一种客户端,包括:接收单元,用于接收服务器发送的待处理数据集,所述待处理数据集包括多个待处理数据,所述待处理数据为支持所述客户端运行目标应用的数据;拆分单元,用于将所述待处理数据集拆分成多个第一子数据集,各所述第一子数据集中分别包括至少一个所述待处理数据;处理单元,用于基于webworker创建多个第一子线程,并将各所述第一子数据集分别放入对应的所述第一子线程中并对各所述第一子线程中的数据进行并行处理,得到多个已处理数据集,各所述已处理数据集中分别包括至少一个已处理数据,各所述已处理数据分别为对应的所述待处理数据经过处理后的数据;渲染单元,用于将所有的所述已处理数据放入第一主线程中,并基于虚拟滚动技术对所述第一主线程中所有的所述已处理数据进行渲染,以使得显示页面显示第一目标内容。
根据本申请的另一方面,提供了一种计算机可读存储介质,所述计算机可读存储介质包括存储的程序,其中,在所述程序运行时控制所述计算机可读存储介质所在设备执行任意一种所述的基于web worker的数据处理方法。
根据本申请的另一方面,提供了一种电子设备,包括:一个或多个处理器,存储器,以及一个或多个程序,其中,所述一个或多个程序被存储在所述存储器中,并且被配置为由所述一个或多个处理器执行,所述一个或多个程序包括用于执行任意一种所述的基于webworker的数据处理方法。
应用本申请的技术方案,上述基于web worker的数据处理方法,应用于客户端,首先接收服务器发送的待处理数据集,待处理数据集包括多个待处理数据,待处理数据为支持客户端运行目标应用的数据;之后将待处理数据集拆分成多个第一子数据集,各第一子数据集中分别包括至少一个待处理数据;然后基于web worker创建多个第一子线程,并将各第一子数据集分别放入对应的第一子线程中并对各第一子线程中的数据进行并行处理,得到多个已处理数据集,各已处理数据集中分别包括至少一个已处理数据,各已处理数据分别为对应的待处理数据经过处理后的数据;最后将所有的已处理数据放入第一主线程中,并基于虚拟滚动技术对第一主线程中所有的已处理数据进行渲染,以控制显示页面显示第一目标内容。该方法利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,然后推送到主线程,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,当搜索时,同样利用web worker分段搜索组合,提高了搜索效率,解决在数据量较大的情况下客户端处理数据的时间大幅增加,导致屏幕卡顿的问题。
附图说明
构成本申请的一部分的说明书附图用来提供对本申请的进一步理解,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1示出了根据本申请的实施例中提供的一种执行基于web worker的数据处理方法的移动终端的硬件结构框图;
图2示出了根据本申请的实施例提供的一种基于web worker的数据处理方法的流程示意图;
图3示出了根据本申请的实施例提供的另一种基于web worker的数据处理方法的流程示意图;
图4示出了根据本申请的实施例提供的一种客户端的结构框图。
其中,上述附图包括以下附图标记:
102、处理器;104、存储器;106、传输设备;108、输入输出设备。
具体实施方式
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
为了使本技术领域的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。
需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了便于描述,以下对本申请实施例涉及的部分名词或术语进行说明:
web worker:运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能;
虚拟滚动:用户在滚动查看内容时,只在可视区域加载相关数据;
节点树:节点彼此之间都有等级关系。父、子和同级节点用于描述这种关系。父节点拥有子节点,位于相同层级上的子节点称为同级节点(兄弟节点或姐妹节点)。
正如背景技术中所介绍的,现有技术中虚拟滚动一般采用全量数据加载,当数据量上万级时,请求接口耗时较长,同时web处理时间也会大幅增加,导致节点树首次加载耗时较长,用户体检差,为解决在数据量较大的情况下客户端处理数据的时间大幅增加,导致屏幕卡顿的问题,本申请的实施例提供了一种基于web worker的数据处理方法、客户端、计算机可读存储介质和电子设备。
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述。
本申请实施例中所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。以运行在移动终端上为例,图1是本发明实施例的一种基于web worker的数据处理方法的移动终端的硬件结构框图。如图1所示,移动终端可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)和用于存储数据的存储器104,其中,上述移动终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解,图1所示的结构仅为示意,其并不对上述移动终端的结构造成限定。例如,移动终端还可包括比图1中所示更多或者更少的组件,或者具有与图1所示不同的配置。
存储器104可用于存储计算机程序,例如,应用软件的软件程序以及模块,如本发明实施例中基于web worker的数据处理方法对应的计算机程序,处理器102通过运行存储在存储器104内的计算机程序,从而执行各种功能应用以及数据处理,即实现上述的方法。存储器104可包括高速随机存储器,还可包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中,存储器104可进一步包括相对于处理器102远程设置的存储器,这些远程存储器可以通过网络连接至移动终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。传输设备106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括移动终端的通信供应商提供的无线网络。在一个实例中,传输设备106包括一个网络适配器(Network InterfaceController,简称为NIC),其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中,传输设备106可以为射频(Radio Frequency,简称为RF)模块,其用于通过无线方式与互联网进行通讯。
在本实施例中提供了一种运行于移动终端、计算机终端或者类似的运算装置的基于web worker的数据处理方法,需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
图2是根据本申请实施例的基于web worker的数据处理方法的流程图。如图2所示,该方法包括以下步骤:
步骤S201,接收服务器发送的待处理数据集,上述待处理数据集包括多个待处理数据,上述待处理数据为支持上述客户端运行目标应用的数据;
具体地,待处理数据集包括支持客户端运行目标应用的全部数据,这样可以在用户使用目标应用时直接采用数据运行,节省了客户端再向服务器发送请求,服务器再发送数据给客户端的时间,减少屏幕卡顿,提高用户体验度。
其中,客户端可以为手机、电脑等。
另外,在接收服务器发送的待处理数据集之前,客户端需先向服务器发送请求,服务器相应于客户端发送的请求将待处理数据集发送至客户端。
步骤S202,将上述待处理数据集拆分成多个第一子数据集,各上述第一子数据集中分别包括至少一个上述待处理数据;
具体地,待处理数据集中的数据量一般为十万级以上,此时浏览器卡顿,而且搜索时需要后端搜索,导致后端接口改造成本高。将待处理数据集中的数据拆分成多个第一子数据集,后续再基于web worker的子线程进行并行处理可以大大减少数据处理的时间,提高数据处理的效率。而第一子数据集的个数与基于web worker创建的第一子线程的个数相同,在待处理数据集中的数据量较多的情况下,可以相应的增加第一子数据集和第一子线程的个数,但是第一子数据集和第一子线程的个数不能过多,否则也会对数据处理的效率造成影响。
其中,将上述待处理数据集拆分成多个第一子数据集,包括:将上述待处理数据集平均拆分成多个上述第一子数据集,其中,各上述第一子数据集中的上述待处理数据的数据量相同。
具体地,将待处理数据集平均拆分成多个第一子数据集,可以使得各第一子线程中的数据量相同,处理数据的时间相同,最大程度上减少数据处理的时间,提高数据处理的效率,避免一些第一子线程中的数据量过少,处理较快,而另一些第一子线程中的数据量过多,处理较慢的情况。
步骤S203,基于web worker创建多个第一子线程,并将各上述第一子数据集分别放入对应的上述第一子线程中并对各上述第一子线程中的数据进行并行处理,得到多个已处理数据集,各上述已处理数据集中分别包括至少一个已处理数据,各上述已处理数据分别为对应的上述待处理数据经过处理后的数据;
具体地,上述步骤利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,然后推送到主线程,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,当搜索时,同样利用web worker分段搜索组合,提高了搜索效率。
其中,在第一子线程中对数据进行处理,是将从服务器获得的数据进行组装,进行数据格式的转换,使得转换后的格式可以被客户端识别并运行。
目前的大数据量节点树设计方案大都采用异步加载或者虚拟滚动方式,使用异步加载,当子节点数据量大或者展开的子节点越来越多时,会导致性能大幅降低,浏览器卡顿,而且搜索时需要后端搜索,导致后端接口改造成本高,虚拟滚动+全量数据这种数据处理方式,当数据量十万级以上时,接口响应时间大幅增加,以及前端大数据量的转换计算,会导致首屏渲染时间变长,用户体验差。采用上述实施例中web worker与虚拟滚动结合的方法可以有效解决上述问题。
其中,基于web worker创建多个第一子线程的具体实施步骤如下:
步骤S2031,确定上述待处理数据集中的上述待处理数据的数量级;
步骤S2032,根据上述待处理数据的数量级,确定上述第一子线程的个数,上述第一子线程的个数与上述待处理数据的数量级正相关,上述第一子线程的个数小于或者等于最大阈值个数,一个上述第一子线程中上述待处理数据的数据量小于或者等于最大阈值数据量;
步骤S2033,根据上述第一子线程的个数,创建各上述第一子线程。
具体地,根据待处理数据的数量级动态调整第一子线程的个数,可以在满足加载需求的情况下,最大程度节省线程资源,提高数据处理的效率。在待处理数据集中的数据量较多的情况下,可以相应的增加第一子数据集和第一子线程的个数,但是第一子数据集和第一子线程的个数不能过多,否则也会对数据处理的效率造成影响。
步骤S204,将所有的上述已处理数据放入第一主线程中,并基于虚拟滚动技术对上述第一主线程中所有的上述已处理数据进行渲染,以使得显示页面显示第一目标内容。
具体地,通过结合web worker和虚拟滚动技术,很好的解决了大数据量节点树搜索和渲染卡顿问题。
随着计算机硬件的发展,企业对用户体验越来越看重,尤其是大数据量的节点树加载和搜索,比如金融机构的机构树,数据量可达到十万级甚至更多,为了避免浏览器卡顿,大都使用子节点懒加载或者虚拟滚动技术方案,懒加载方案实现模糊搜索,后端接口改造成本巨大,而且要对服务器发起请求,用户体验效果差,虚拟滚动一般采用全量数据加载,当数据量上万级时,请求接口耗时较长,同时web处理时间也会大幅增加,导致节点树首次加载耗时较长,用户体检差。
因此,采用子节点懒加载方案处理数据,当子节点数据量大或者展开的子节点越来越多时,会导致性能大幅降低,浏览器卡顿,而且搜索时需要后端对全量数据进行搜索,返回树形结构,搜索效率低,后端接口改造成本高。采用虚拟滚动+懒加载的方案处理数据,虽然解决了子节点数量大或者展开子节点多的卡顿问题,但是搜索时,依然存在搜索效率低,后端接口改造成本高的问题。采用虚拟滚动+全量数据的方案处理数据,接口请求时间长,web处理数据时间长,导致首次打开耗时较长,用户体验差。
而上述实施例利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,然后推送到主线程,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,当搜索时,同样利用web worker分段搜索组合,提高了搜索效率。
其中,基于虚拟滚动技术对上述第一主线程中所有的上述已处理数据进行渲染,以使得显示页面显示第一目标内容的具体实施步骤包括:
步骤S301,接收作用在上述显示页面上的滚动操作;
步骤S302,根据上述滚动操作,确定显示数据,上述显示数据为上述显示页面下一帧的显示内容的数据;
步骤S303,基于上述虚拟滚动技术对上述显示数据进行渲染,使得上述显示页面显示上述第一目标内容,上述第一目标内容为上述显示页面下一帧的显示内容。
具体地,这样可以精准定位可视化区域(即显示页面)要显示的内容,只需加载可视化区域所需的数据即可,大大减少了加载数据的时间,减少屏幕卡顿问题,提高用户体验度。
其中,上述显示数据有多个,上述步骤S303的具体实施步骤包括:
步骤S3031,确定与上述显示数据对应的dom元素,上述dom元素为目标节点树中的一个节点,上述目标节点树与上述显示页面的显示内容对应;
步骤S3032,按照上述目标节点树中节点的级联关系,渲染各上述dom元素,使得上述显示页面显示上述第一目标内容。
具体地,这样可以精确快速的渲染数据,通过动态生成可视区域dom数据提升浏览器渲染性能。
其中,在基于虚拟滚动技术对上述第一主线程中所有的上述已处理数据进行渲染,以控制显示页面显示目标内容之后,上述方法还包括如下步骤:
步骤S401,获取搜索信息,上述搜索信息为用户输入至上述客户端的信息;
步骤S402,根据上述搜索信息,对所有的上述已处理数据进行搜索,确定目标数据,上述目标数据为符合上述搜索信息的数据;
其中,上述步骤S402的具体实施步骤如下:
步骤S4021,将所有的上述已处理数据拆分成多个搜索数据集,一个上述搜索数据集中包括至少一个上述已处理数据;
步骤S4022,基于web worker创建多个第二子线程;
步骤S4023,将各上述搜索数据集分别放入对应的上述第二子线程中,且根据上述搜索信息对各上述第二子线程中的数据进行并行搜索,得到目标数据集,上述目标数据集中包括至少一个上述目标数据。
具体地,通过开启多个web worker将大量数据进行分组,通过分组实现并行快速搜索,提高搜索效率。
步骤S403,将所有的上述目标数据放入第二主线程中,并基于虚拟滚动技术对上述第二主线程中所有的上述目标数据进行渲染,使得显示页面显示第二目标内容。
具体地,通过开启多个web worker请求加载数据,提高前端和服务端传输效率。通过web worker和虚拟滚动技术相结合,很好的解决了大数据量节点树搜索和渲染卡顿问题。
本申请的上述基于web worker的数据处理方法,应用于客户端,首先接收服务器发送的待处理数据集,待处理数据集包括多个待处理数据,待处理数据为支持客户端运行目标应用的数据;之后将待处理数据集拆分成多个第一子数据集,各第一子数据集中分别包括至少一个待处理数据;然后基于web worker创建多个第一子线程,并将各第一子数据集分别放入对应的第一子线程中并对各第一子线程中的数据进行并行处理,得到多个已处理数据集,各已处理数据集中分别包括至少一个已处理数据,各已处理数据分别为对应的待处理数据经过处理后的数据;最后将所有的已处理数据放入第一主线程中,并基于虚拟滚动技术对第一主线程中所有的已处理数据进行渲染,以控制显示页面显示第一目标内容。该方法利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,然后推送到主线程,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,当搜索时,同样利用web worker分段搜索组合,提高了搜索效率,解决在数据量较大的情况下客户端处理数据的时间大幅增加,导致屏幕卡顿的问题。
为了使得本领域技术人员能够更加清楚地了解本申请的技术方案,以下将结合具体的实施例对本申请的基于web worker的数据处理方法的实现过程进行详细说明。
本实施例涉及一种具体的基于web worker的数据处理方法,如图3所示,包括如下步骤:
步骤S1:web端(客户端)通过web worker向后端分段请求数据;
步骤S2:web worker子线程收到接口响应数据后,根据web展示需求对数据进行处理转换;
步骤S3:主线程组合web worker子线程所有数据,并通过虚拟滚动技术展示节点树;
步骤S4:根据用户输入的搜索内容搜索节点树时,根据数据量级动态开启webworker子线程数量,进行分段搜索;
步骤S5:主线程组合子线程搜索结果,并通过虚拟滚动技术展示搜索后节点树。
需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
本申请实施例还提供了一种客户端,需要说明的是,本申请实施例的客户端可以用于执行本申请实施例所提供的用于基于web worker的数据处理方法。该客户端用于实现上述实施例及优选实施方式,已经进行过说明的不再赘述。如以下所使用的,术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的客户端较佳地以软件来实现,但是硬件,或者软件和硬件的组合的实现也是可能并被构想的。
以下对本申请实施例提供的客户端进行介绍。
图4是根据本申请实施例的客户端的示意图。如图4所示,该客户端包括接收单元10、拆分单元20、处理单元30和渲染单元40,接收单元10用于接收服务器发送的待处理数据集,上述待处理数据集包括多个待处理数据,上述待处理数据为支持上述客户端运行目标应用的数据;拆分单元20用于将上述待处理数据集拆分成多个第一子数据集,各上述第一子数据集中分别包括至少一个上述待处理数据;处理单元30用于基于web worker创建多个第一子线程,并将各上述第一子数据集分别放入对应的上述第一子线程中并对各上述第一子线程中的数据进行并行处理,得到多个已处理数据集,各上述已处理数据集中分别包括至少一个已处理数据,各上述已处理数据分别为对应的上述待处理数据经过处理后的数据;渲染单元40用于将所有的上述已处理数据放入第一主线程中,并基于虚拟滚动技术对上述第一主线程中所有的上述已处理数据进行渲染,以使得显示页面显示第一目标内容。
本申请的上述客户端,包括接收单元、拆分单元、处理单元和渲染单元,接收单元用于接收服务器发送的待处理数据集,待处理数据集包括多个待处理数据,待处理数据为支持客户端运行目标应用的数据;拆分单元用于将待处理数据集拆分成多个第一子数据集,各第一子数据集中分别包括至少一个待处理数据;处理单元用于基于web worker创建多个第一子线程,并将各第一子数据集分别放入对应的第一子线程中并对各第一子线程中的数据进行并行处理,得到多个已处理数据集,各已处理数据集中分别包括至少一个已处理数据,各已处理数据分别为对应的待处理数据经过处理后的数据;渲染单元用于将所有的已处理数据放入第一主线程中,并基于虚拟滚动技术对第一主线程中所有的已处理数据进行渲染,以控制显示页面显示第一目标内容。该客户端利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,然后推送到主线程,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,当搜索时,同样利用web worker分段搜索组合,提高了搜索效率,解决在数据量较大的情况下客户端处理数据的时间大幅增加,导致屏幕卡顿的问题。
一些可选的方案中,上述客户端还包括第一获取模块、第一确定模块和第一渲染模块,第一获取模块用于在基于虚拟滚动技术对上述第一主线程中所有的上述已处理数据进行渲染,以控制显示页面显示目标内容之后,获取搜索信息,上述搜索信息为用户输入至上述客户端的信息;第一确定模块用于根据上述搜索信息,对所有的上述已处理数据进行搜索,确定目标数据,上述目标数据为符合上述搜索信息的数据;第一渲染模块用于将所有的上述目标数据放入第二主线程中,并基于虚拟滚动技术对上述第二主线程中所有的上述目标数据进行渲染,使得显示页面显示第二目标内容。通过开启多个web worker请求加载数据,提高前端和服务端传输效率。通过web worker和虚拟滚动技术相结合,很好的解决了大数据量节点树搜索和渲染卡顿问题。
一些可选的方案中,第一确定模块包括拆分子模块、创建子模块和搜索子模块,拆分子模块用于将所有的上述已处理数据拆分成多个搜索数据集,一个上述搜索数据集中包括至少一个上述已处理数据;创建子模块用于基于web worker创建多个第二子线程;搜索子模块用于将各上述搜索数据集分别放入对应的上述第二子线程中,且根据上述搜索信息对各上述第二子线程中的数据进行并行搜索,得到目标数据集,上述目标数据集中包括至少一个上述目标数据。通过开启多个web worker将大量数据进行分组,通过分组实现并行快速搜索,提高搜索效率。
一些可选的方案中,渲染单元包括第一接收模块、第二确定模块和第二渲染模块,第一接收模块用于接收作用在上述显示页面上的滚动操作;第二确定模块用于根据上述滚动操作,确定显示数据,上述显示数据为上述显示页面下一帧的显示内容的数据;第二渲染模块用于基于上述虚拟滚动技术对上述显示数据进行渲染,使得上述显示页面显示上述第一目标内容,上述第一目标内容为上述显示页面下一帧的显示内容。这样可以精准定位可视化区域(即显示页面)要显示的内容,只需加载可视化区域所需的数据即可,大大减少了加载数据的时间,减少屏幕卡顿问题,提高用户体验度。
作为一种可选的方案,上述显示数据有多个,第二渲染模块包括确定子模块和渲染子模块,确定子模块用于确定与上述显示数据对应的dom元素,上述dom元素为目标节点树中的一个节点,上述目标节点树与上述显示页面的显示内容对应;渲染子模块用于按照上述目标节点树中节点的级联关系,渲染各上述dom元素,使得上述显示页面显示上述第一目标内容。这样可以精确快速的渲染数据,通过动态生成可视区域dom数据提升浏览器渲染性能。
一种可选的方案,处理单元包括第三确定模块、第四确定模块和创建模块,第三确定模块用于确定上述待处理数据集中的上述待处理数据的数量级;第四确定模块用于根据上述待处理数据的数量级,确定上述第一子线程的个数,上述第一子线程的个数与上述待处理数据的数量级正相关,上述第一子线程的个数小于或者等于最大阈值个数,一个上述第一子线程中上述待处理数据的数据量小于或者等于最大阈值数据量;创建模块用于根据上述第一子线程的个数,创建各上述第一子线程。根据待处理数据的数量级动态调整第一子线程的个数,可以在满足加载需求的情况下,最大程度节省线程资源,提高数据处理的效率。
本实施例中,拆分单元包括拆分模块,拆分模块用于将上述待处理数据集平均拆分成多个上述第一子数据集,其中,各上述第一子数据集中的上述待处理数据的数据量相同。将待处理数据集平均拆分成多个第一子数据集,可以使得各第一子线程中的数据量相同,处理数据的时间相同,最大程度上减少数据处理的时间,提高数据处理的效率,避免一些第一子线程中的数据量过少,处理较快,而另一些第一子线程中的数据量过多,处理较慢的情况。
上述客户端包括处理器和存储器,上述接收单元等均作为程序单元存储在存储器中,由处理器执行存储在存储器中的上述程序单元来实现相应的功能。上述模块均位于同一处理器中;或者,上述各个模块以任意组合的形式分别位于不同的处理器中。
处理器中包含内核,由内核去存储器中调取相应的程序单元。内核可以设置一个或以上,通过调整内核参数来解决在数据量较大的情况下客户端处理数据的时间大幅增加,导致屏幕卡顿的问题。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM),存储器包括至少一个存储芯片。
本发明实施例提供了一种计算机可读存储介质,上述计算机可读存储介质包括存储的程序,其中,在上述程序运行时控制上述计算机可读存储介质所在设备执行上述基于web worker的数据处理方法。
具体地,基于web worker的数据处理方法包括:
步骤S201,接收服务器发送的待处理数据集,上述待处理数据集包括多个待处理数据,上述待处理数据为支持上述客户端运行目标应用的数据;
具体地,待处理数据集包括支持客户端运行目标应用的全部数据,这样可以在用户使用目标应用时直接采用数据运行,节省了客户端再向服务器发送请求,服务器再发送数据给客户端的时间,减少屏幕卡顿,提高用户体验度。
步骤S202,将上述待处理数据集拆分成多个第一子数据集,各上述第一子数据集中分别包括至少一个上述待处理数据;
具体地,待处理数据集中的数据量一般为十万级以上,此时浏览器卡顿,而且搜索时需要后端搜索,导致后端接口改造成本高。将待处理数据集中的数据拆分成多个第一子数据集,后续再基于web worker的子线程进行并行处理可以大大减少数据处理的时间,提高数据处理的效率。而第一子数据集的个数与基于web worker创建的第一子线程的个数相同,在待处理数据集中的数据量较多的情况下,可以相应的增加第一子数据集和第一子线程的个数,但是第一子数据集和第一子线程的个数不能过多,否则也会对数据处理的效率造成影响。
步骤S203,基于web worker创建多个第一子线程,并将各上述第一子数据集分别放入对应的上述第一子线程中并对各上述第一子线程中的数据进行并行处理,得到多个已处理数据集,各上述已处理数据集中分别包括至少一个已处理数据,各上述已处理数据分别为对应的上述待处理数据经过处理后的数据;
具体地,上述步骤利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,然后推送到主线程,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,当搜索时,同样利用web worker分段搜索组合,提高了搜索效率。
步骤S204,将所有的上述已处理数据放入第一主线程中,并基于虚拟滚动技术对上述第一主线程中所有的上述已处理数据进行渲染,以使得显示页面显示第一目标内容。
具体地,通过结合web worker和虚拟滚动技术,很好的解决了大数据量节点树搜索和渲染卡顿问题。
本发明实施例提供了一种处理器,上述处理器用于运行程序,其中,上述程序运行时执行上述基于web worker的数据处理方法。
具体地,基于web worker的数据处理方法包括:
步骤S201,接收服务器发送的待处理数据集,上述待处理数据集包括多个待处理数据,上述待处理数据为支持上述客户端运行目标应用的数据;
具体地,待处理数据集包括支持客户端运行目标应用的全部数据,这样可以在用户使用目标应用时直接采用数据运行,节省了客户端再向服务器发送请求,服务器再发送数据给客户端的时间,减少屏幕卡顿,提高用户体验度。
步骤S202,将上述待处理数据集拆分成多个第一子数据集,各上述第一子数据集中分别包括至少一个上述待处理数据;
具体地,待处理数据集中的数据量一般为十万级以上,此时浏览器卡顿,而且搜索时需要后端搜索,导致后端接口改造成本高。将待处理数据集中的数据拆分成多个第一子数据集,后续再基于web worker的子线程进行并行处理可以大大减少数据处理的时间,提高数据处理的效率。而第一子数据集的个数与基于web worker创建的第一子线程的个数相同,在待处理数据集中的数据量较多的情况下,可以相应的增加第一子数据集和第一子线程的个数,但是第一子数据集和第一子线程的个数不能过多,否则也会对数据处理的效率造成影响。
步骤S203,基于web worker创建多个第一子线程,并将各上述第一子数据集分别放入对应的上述第一子线程中并对各上述第一子线程中的数据进行并行处理,得到多个已处理数据集,各上述已处理数据集中分别包括至少一个已处理数据,各上述已处理数据分别为对应的上述待处理数据经过处理后的数据;
具体地,上述步骤利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,然后推送到主线程,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,当搜索时,同样利用web worker分段搜索组合,提高了搜索效率。
步骤S204,将所有的上述已处理数据放入第一主线程中,并基于虚拟滚动技术对上述第一主线程中所有的上述已处理数据进行渲染,以使得显示页面显示第一目标内容。
具体地,通过结合web worker和虚拟滚动技术,很好的解决了大数据量节点树搜索和渲染卡顿问题。
本发明实施例提供了一种设备,设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序,处理器执行程序时实现至少以下步骤:
步骤S201,接收服务器发送的待处理数据集,上述待处理数据集包括多个待处理数据,上述待处理数据为支持上述客户端运行目标应用的数据;
步骤S202,将上述待处理数据集拆分成多个第一子数据集,各上述第一子数据集中分别包括至少一个上述待处理数据;
步骤S203,基于web worker创建多个第一子线程,并将各上述第一子数据集分别放入对应的上述第一子线程中并对各上述第一子线程中的数据进行并行处理,得到多个已处理数据集,各上述已处理数据集中分别包括至少一个已处理数据,各上述已处理数据分别为对应的上述待处理数据经过处理后的数据;
步骤S204,将所有的上述已处理数据放入第一主线程中,并基于虚拟滚动技术对上述第一主线程中所有的上述已处理数据进行渲染,以使得显示页面显示第一目标内容。
本文中的设备可以是服务器、PC、PAD、手机等。
本申请还提供了一种计算机程序产品,当在数据处理设备上执行时,适于执行初始化有至少如下方法步骤的程序:
步骤S201,接收服务器发送的待处理数据集,上述待处理数据集包括多个待处理数据,上述待处理数据为支持上述客户端运行目标应用的数据;
步骤S202,将上述待处理数据集拆分成多个第一子数据集,各上述第一子数据集中分别包括至少一个上述待处理数据;
步骤S203,基于web worker创建多个第一子线程,并将各上述第一子数据集分别放入对应的上述第一子线程中并对各上述第一子线程中的数据进行并行处理,得到多个已处理数据集,各上述已处理数据集中分别包括至少一个已处理数据,各上述已处理数据分别为对应的上述待处理数据经过处理后的数据;
步骤S204,将所有的上述已处理数据放入第一主线程中,并基于虚拟滚动技术对上述第一主线程中所有的上述已处理数据进行渲染,以使得显示页面显示第一目标内容。
显然,本领域的技术人员应该明白,上述的本发明的各模块或各步骤可以用通用的计算装置来实现,它们可以集中在单个的计算装置上,或者分布在多个计算装置所组成的网络上,它们可以用计算装置可执行的程序代码来实现,从而,可以将它们存储在存储装置中由计算装置来执行,并且在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤,或者将它们分别制作成各个集成电路模块,或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样,本发明不限制于任何特定的硬件和软件结合。
本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
从以上的描述中,可以看出,本申请上述的实施例实现了如下技术效果:
1)、本申请的上述基于web worker的数据处理方法,应用于客户端,首先接收服务器发送的待处理数据集,待处理数据集包括多个待处理数据,待处理数据为支持客户端运行目标应用的数据;之后将待处理数据集拆分成多个第一子数据集,各第一子数据集中分别包括至少一个待处理数据;然后基于web worker创建多个第一子线程,并将各第一子数据集分别放入对应的第一子线程中并对各第一子线程中的数据进行并行处理,得到多个已处理数据集,各已处理数据集中分别包括至少一个已处理数据,各已处理数据分别为对应的待处理数据经过处理后的数据;最后将所有的已处理数据放入第一主线程中,并基于虚拟滚动技术对第一主线程中所有的已处理数据进行渲染,以控制显示页面显示第一目标内容。该方法利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,然后推送到主线程,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,当搜索时,同样利用web worker分段搜索组合,提高了搜索效率,解决在数据量较大的情况下客户端处理数据的时间大幅增加,导致屏幕卡顿的问题。
2)、本申请的上述客户端,包括接收单元、拆分单元、处理单元和渲染单元,接收单元用于接收服务器发送的待处理数据集,待处理数据集包括多个待处理数据,待处理数据为支持客户端运行目标应用的数据;拆分单元用于将待处理数据集拆分成多个第一子数据集,各第一子数据集中分别包括至少一个待处理数据;处理单元用于基于web worker创建多个第一子线程,并将各第一子数据集分别放入对应的第一子线程中并对各第一子线程中的数据进行并行处理,得到多个已处理数据集,各已处理数据集中分别包括至少一个已处理数据,各已处理数据分别为对应的待处理数据经过处理后的数据;渲染单元用于将所有的已处理数据放入第一主线程中,并基于虚拟滚动技术对第一主线程中所有的已处理数据进行渲染,以控制显示页面显示第一目标内容。该客户端利用web worker开启多个子线程对数据进行分段请求,同时对数据进行处理,然后推送到主线程,同时配合虚拟滚动使节点树快速渲染,实现秒开效果,当搜索时,同样利用web worker分段搜索组合,提高了搜索效率,解决在数据量较大的情况下客户端处理数据的时间大幅增加,导致屏幕卡顿的问题。
以上所述仅为本申请的优选实施例而已,并不用于限制本申请,对于本领域的技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。

Claims (10)

1.一种基于web worker的数据处理方法,其特征在于,应用于客户端,所述数据处理方法包括:
接收服务器发送的待处理数据集,所述待处理数据集包括多个待处理数据,所述待处理数据为支持所述客户端运行目标应用的数据;
将所述待处理数据集拆分成多个第一子数据集,各所述第一子数据集中分别包括至少一个所述待处理数据;
基于web worker创建多个第一子线程,并将各所述第一子数据集分别放入对应的所述第一子线程中并对各所述第一子线程中的数据进行并行处理,得到多个已处理数据集,各所述已处理数据集中分别包括至少一个已处理数据,各所述已处理数据分别为对应的所述待处理数据经过处理后的数据;
将所有的所述已处理数据放入第一主线程中,并基于虚拟滚动技术对所述第一主线程中所有的所述已处理数据进行渲染,以使得显示页面显示第一目标内容。
2.根据权利要求1所述的数据处理方法,其特征在于,在基于虚拟滚动技术对所述第一主线程中所有的所述已处理数据进行渲染,以控制显示页面显示目标内容之后,所述方法还包括:
获取搜索信息,所述搜索信息为用户输入至所述客户端的信息;
根据所述搜索信息,对所有的所述已处理数据进行搜索,确定目标数据,所述目标数据为符合所述搜索信息的数据;
将所有的所述目标数据放入第二主线程中,并基于虚拟滚动技术对所述第二主线程中所有的所述目标数据进行渲染,使得显示页面显示第二目标内容。
3.根据权利要求2所述的数据处理方法,其特征在于,根据所述搜索信息,对所有的所述已处理数据进行搜索,确定目标数据,包括:
将所有的所述已处理数据拆分成多个搜索数据集,一个所述搜索数据集中包括至少一个所述已处理数据;
基于web worker创建多个第二子线程;
将各所述搜索数据集分别放入对应的所述第二子线程中,且根据所述搜索信息对各所述第二子线程中的数据进行并行搜索,得到目标数据集,所述目标数据集中包括至少一个所述目标数据。
4.根据权利要求1所述的数据处理方法,其特征在于,基于虚拟滚动技术对所述第一主线程中所有的所述已处理数据进行渲染,以使得显示页面显示第一目标内容,包括:
接收作用在所述显示页面上的滚动操作;
根据所述滚动操作,确定显示数据,所述显示数据为所述显示页面下一帧的显示内容的数据;
基于所述虚拟滚动技术对所述显示数据进行渲染,使得所述显示页面显示所述第一目标内容,所述第一目标内容为所述显示页面下一帧的显示内容。
5.根据权利要求4所述的数据处理方法,其特征在于,所述显示数据有多个,基于所述虚拟滚动技术对所述显示数据进行渲染,使得所述显示页面显示所述第一目标内容,包括:
确定与所述显示数据对应的dom元素,所述dom元素为目标节点树中的一个节点,所述目标节点树与所述显示页面的显示内容对应;
按照所述目标节点树中节点的级联关系,渲染各所述dom元素,使得所述显示页面显示所述第一目标内容。
6.根据权利要求1所述的数据处理方法,其特征在于,基于web worker创建多个第一子线程,包括:
确定所述待处理数据集中的所述待处理数据的数量级;
根据所述待处理数据的数量级,确定所述第一子线程的个数,所述第一子线程的个数与所述待处理数据的数量级正相关,所述第一子线程的个数小于或者等于最大阈值个数,一个所述第一子线程中所述待处理数据的数据量小于或者等于最大阈值数据量;
根据所述第一子线程的个数,创建各所述第一子线程。
7.根据权利要求1所述的数据处理方法,其特征在于,将所述待处理数据集拆分成多个第一子数据集,包括:
将所述待处理数据集平均拆分成多个所述第一子数据集,其中,各所述第一子数据集中的所述待处理数据的数据量相同。
8.一种客户端,其特征在于,包括:
接收单元,用于接收服务器发送的待处理数据集,所述待处理数据集包括多个待处理数据,所述待处理数据为支持所述客户端运行目标应用的数据;
拆分单元,用于将所述待处理数据集拆分成多个第一子数据集,各所述第一子数据集中分别包括至少一个所述待处理数据;
处理单元,用于基于web worker创建多个第一子线程,并将各所述第一子数据集分别放入对应的所述第一子线程中并对各所述第一子线程中的数据进行并行处理,得到多个已处理数据集,各所述已处理数据集中分别包括至少一个已处理数据,各所述已处理数据分别为对应的所述待处理数据经过处理后的数据;
渲染单元,用于将所有的所述已处理数据放入第一主线程中,并基于虚拟滚动技术对所述第一主线程中所有的所述已处理数据进行渲染,以使得显示页面显示第一目标内容。
9.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质包括存储的程序,其中,在所述程序运行时控制所述计算机可读存储介质所在设备执行权利要求1至7中任意一项所述的基于web worker的数据处理方法。
10.一种电子设备,其特征在于,包括:一个或多个处理器,存储器,以及一个或多个程序,其中,所述一个或多个程序被存储在所述存储器中,并且被配置为由所述一个或多个处理器执行,所述一个或多个程序包括用于执行权利要求1至7中任意一项所述的基于webworker的数据处理方法。
CN202311460529.7A 2023-11-03 2023-11-03 基于web worker的数据处理方法和客户端 Pending CN117271014A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311460529.7A CN117271014A (zh) 2023-11-03 2023-11-03 基于web worker的数据处理方法和客户端

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311460529.7A CN117271014A (zh) 2023-11-03 2023-11-03 基于web worker的数据处理方法和客户端

Publications (1)

Publication Number Publication Date
CN117271014A true CN117271014A (zh) 2023-12-22

Family

ID=89219785

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311460529.7A Pending CN117271014A (zh) 2023-11-03 2023-11-03 基于web worker的数据处理方法和客户端

Country Status (1)

Country Link
CN (1) CN117271014A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117473188A (zh) * 2023-12-28 2024-01-30 中移(苏州)软件技术有限公司 一种显示数据的渲染方法、装置、电子设备及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117473188A (zh) * 2023-12-28 2024-01-30 中移(苏州)软件技术有限公司 一种显示数据的渲染方法、装置、电子设备及存储介质
CN117473188B (zh) * 2023-12-28 2024-04-09 中移(苏州)软件技术有限公司 一种显示数据的渲染方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN110110174B (zh) 数据可视化页面的生成、监听及展示方法、浏览器及服务器
CN104424199A (zh) 搜索方法和装置
CN117271014A (zh) 基于web worker的数据处理方法和客户端
CN107766307B (zh) 一种表单元素联动的方法和设备
CN113312032B (zh) 前端项目资源更新方法、装置、电子设备及存储介质
CN109684079A (zh) 显示数据处理方法、装置以及电子设备
CN103530243B (zh) 用于确定用于设备的设置的系统、方法
CN113873013B (zh) 一种离线包重组方法及系统
CN112395098B (zh) 应用程序接口调用方法、装置、存储介质和电子设备
CN114996134A (zh) 容器化部署方法、电子设备及存储介质
CN112965916B (zh) 页面测试方法、页面测试装置、电子设备及可读存储介质
CN114547514A (zh) 组件动态渲染方法、装置、设备及介质
CN109828759A (zh) 代码编译方法、装置、计算机装置及存储介质
CN112182446B (zh) 页面的展示方法、装置、终端设备及计算机可读存储介质
CN114374703B (zh) 云手机信息的获取方法、装置、设备以及存储介质
US9135095B2 (en) Methods and systems for inter-application communication
CN115167962A (zh) 在网页中展示图表的方法及装置
CN112787880B (zh) 回放数据获取与流量回放方法、设备及存储介质
CN114157917B (zh) 视频剪辑方法、装置及终端设备
CN115292642B (zh) 一种页面显示方法及装置、存储介质、计算机设备
CN114070879B (zh) 一种数据采集器控制方法、装置及相关设备
CN106648824A (zh) 广播处理方法及装置
CN117056299A (zh) 日志处理方法及相关产品
CN116932963A (zh) 截图处理方法、装置、计算机设备及存储介质
CN115454485A (zh) 资源文件构建方法、装置、电子设备和存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination