CN116433816A - 一种提高web端canvas绘制性能的方法及装置 - Google Patents

一种提高web端canvas绘制性能的方法及装置 Download PDF

Info

Publication number
CN116433816A
CN116433816A CN202310266984.7A CN202310266984A CN116433816A CN 116433816 A CN116433816 A CN 116433816A CN 202310266984 A CN202310266984 A CN 202310266984A CN 116433816 A CN116433816 A CN 116433816A
Authority
CN
China
Prior art keywords
thread
data
data information
rendering
frequency
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
CN202310266984.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.)
Wuhan Kotei Informatics Co Ltd
Original Assignee
Wuhan Kotei Informatics Co 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 Wuhan Kotei Informatics Co Ltd filed Critical Wuhan Kotei Informatics Co Ltd
Priority to CN202310266984.7A priority Critical patent/CN116433816A/zh
Publication of CN116433816A publication Critical patent/CN116433816A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/003D [Three Dimensional] image rendering
    • G06T15/005General purpose rendering architectures
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Computer Graphics (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Image Generation (AREA)

Abstract

本发明涉及一种提高web端canvas绘制性能的方法及装置,将web主线程用作图形渲染;通过worker技术创建一个数据处理线程,所述数据处理线程进行绘制数据的实时运算;通过worker技术创建一个使用offscreenCanvas技术的伪图形渲染线程;所述数据处理线程对UI界面产生的用户数据进行实时运算,得到待绘制数据信息后交由伪图形渲染线程,所述伪图形渲染线程根据所述待绘制数据信息进行图形绘制后,然后提交给所述web主线程进行图形渲染。通过多线程设计,能够解决传统数据可视化方法造成界面的卡顿或未响应的问题,实现高实时性、数据量大的可视化需求。

Description

一种提高web端canvas绘制性能的方法及装置
技术领域
本发明涉及web可视化技术领域,具体涉及一种提高web端canvas绘制性能的方法及装置。
背景技术
随着互联网+、AI的高速发展,越来越多产业对实时性、大数据量的web可视化需求较高。但由于web受限于浏览器上运行,且JavaScript语言有着单线程的特性。因此在高频计算及图形绘制时会造成页面的卡顿及未响应的情况,很难满足客户的需求效果。
因为JavaScript是单线程语言,UI渲染与计算逻辑都在同一个线程中进行。因此如何能有将UI渲染、计算逻辑分开互不影响,成为提高计算效率的关键。
在可视化实时性上,因为实时性会产生大量的重绘处理,并且重绘的状态是一直持续的。这也是导致页面操作卡顿及未响应的主要原因。因此如何降低单帧的绘制的效率成为实现页面流畅的关键。
发明内容
本发明针对现有技术中存在的技术问题,提供一种提高web端canvas绘制性能的方法及装置。
本发明解决上述技术问题的技术方案如下:
第一方面,本发明提供一种提高web端canvas绘制性能的方法,包括:
将web主线程用作图形渲染;通过worker技术创建一个数据处理线程,所述数据处理线程进行绘制数据的实时运算;通过worker技术创建一个使用offscreenCanvas技术的伪图形渲染线程;所述数据处理线程对UI界面产生的用户数据进行实时运算,得到待绘制数据信息后交由伪图形渲染线程,所述伪图形渲染线程根据所述待绘制数据信息进行图形绘制后,然后提交给所述web主线程进行图形渲染。
进一步的,该方法还包括,采用postmessage技术在数据处理线程以及伪图形渲染线程间进行数据通信。
进一步的,该方法还包括:使用SharedArrayBuffer技术创建共享内存模块,以及所述共享内存模块用于存储数据指针地址,所述数据指针用于指向待渲染地图数据以及UI界面产生的用户数据在存储器中的地址;
所述数据处理线程通过所述数据指针地址读取存储器中存储的待渲染地图数据以及UI界面产生的用户数据进行实时运算,得到待绘制数据信息,所述待绘制数据信息写入存储器,同时生成指向所述待绘制数据信息的数据指针写入所述共享内存模块;
所述伪图形渲染线程通过所述数据指针地址读取存储器中存储的待绘制数据信息,并根据所述待绘制数据信息进行图形绘制。
进一步的,该方法还包括:根据数据更新频率,将所述待绘制数据信息划分为高频数据信息、中频数据信息和低频数据信息,并进行分块存储;所述伪图形渲染线程包括高频线程、中频线程和低频线程;所述高频线程用于读取高频数据信息并进行图形绘制,所述中频线程用于读取中频数据信息并进行图形绘制,所述低频线程用于读取低频数据信息并进行图形绘制。
进一步的,该方法还包括:所述web主线程获取并融合所述高频线程、中频线程和低频线程绘制的待渲染地图数据,然后根据融合后的待渲染地图数据进行图形渲染。
第二方面,本发明提供一种提高web端canvas绘制性能的装置,包括:
图像渲染模块,包括web主线程,用作图形渲染;
数据处理模块,通过worker技术创建数据处理线程,所述数据处理线程进行绘制数据的实时运算;
图像绘制模块,通过worker技术创建一个使用offscreenCanvas技术的伪图形渲染线程;
所述数据处理线程对UI界面产生的用户数据进行实时运算,得到待绘制数据信息后交由伪图形渲染线程,所述伪图形渲染线程根据所述待绘制数据信息进行图形绘制后,然后提交给所述web主线程进行图形渲染。
第三方面,本发明提供一种电子设备,包括:
存储器,用于存储计算机软件程序;
处理器,用于读取并执行所述计算机软件程序,进而实现本发明第一方面所述的一种提高web端canvas绘制性能的方法。
第四方面,本发明提供一种非暂态计算机可读存储介质,所述存储介质中存储有用于实现本发明第一方面所述的一种提高web端canvas绘制性能的方法的计算机软件程序。
本发明的有益效果是:传统数据可视化通过canvas对界面进行直接绘制,在实时性、绘制数据大的情况,会持续进行大量的数据计算及图像重绘渲染,而造成界面的卡顿或未响应。无法实现高实时性、数据量大的可视化需求。
通过本发明能有效的将数据计算及图像渲染在不同的线程中进行计算。这样提高了数据处理及图像渲染的处理的上限能力,并通过图像低频、中频、高频的绘制设计降低每帧的绘制频率,实现页面的运行流畅,满足高实时性、数据量大的可视化需求的实现。
附图说明
图1为本发明实施例提供的一种提高web端canvas绘制性能的方法原理框图;
图2为本发明实施例提供的一种提高web端canvas绘制性能的装置结构示意图;
图3为本发明实施例提供的电子设备的实施例示意图;
图4为本发明实施例提供的一种计算机可读存储介质的实施例示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
在本申请的描述中,术语“例如”一词用来表示“用作例子、例证或说明”。本申请中被描述为“例如”的任何实施例不一定被解释为比其它实施例更优选或更具优势。为了使本领域任何技术人员能够实现和使用本发明,给出了以下描述。在以下描述中,为了解释的目的而列出了细节。应当明白的是,本领域普通技术人员可以认识到,在不使用这些特定细节的情况下也可以实现本发明。在其它实例中,不会对公知的结构和过程进行详细阐述,以避免不必要的细节使本发明的描述变得晦涩。因此,本发明并非旨在限于所示的实施例,而是与符合本申请所公开的原理和特征的最广范围相一致。
本发明提供一种提高web端canvas绘制性能的方法,包括:
将web主线程用作图形渲染;通过worker技术创建一个数据处理线程,所述数据处理线程进行绘制数据的实时运算;通过worker技术创建一个使用offscreenCanvas技术的伪图形渲染线程;所述数据处理线程对UI界面产生的用户数据进行实时运算,得到待绘制数据信息后交由伪图形渲染线程,所述伪图形渲染线程根据所述待绘制数据信息进行图形绘制后,然后提交给所述web主线程进行图形渲染。
进一步的,该方法还包括,采用postmessage技术在数据处理线程以及伪图形渲染线程间进行数据通信。
但是postmessage带来一个问题,因为postmessage是将数据进行深拷贝后发送到另一个线程当中,当线程频繁处理数较大数据时,会因为数据拷贝的耗时造成界面卡顿或未响应。因此在上述实施例的基础上,该方法还包括,使用SharedArrayBuffer技术创建共享内存模块,以及所述共享内存模块用于存储数据指针地址,所述数据指针用于指向待渲染地图数据以及UI界面产生的用户数据在存储器中的地址。进程之间通信的数据的指针地址通过SharedArrayBuffer对象存入其中,并在每个线程中保存一份ShareArrayBuffer对象,每个线程只需读取对应的引用地址则能拿到共享的使用数据。
所述数据处理线程通过所述数据指针地址读取存储器中存储的待渲染地图数据以及UI界面产生的用户数据进行实时运算,得到待绘制数据信息,所述待绘制数据信息写入存储器,同时生成指向所述待绘制数据信息的数据指针写入所述共享内存模块;
所述伪图形渲染线程通过所述数据指针地址读取存储器中存储的待绘制数据信息,并根据所述待绘制数据信息进行图形绘制。
然而由于地图数据的每次更新过程中,并非所有图像要素都会进行更新,例如背景、地图、表格等的绘制发生改变的频率较低,如果每次更新均对所有数据进行绘制渲染的话,明显会造成数据量过大,导致界面卡顿、降低实时性。因此需要对地图数据进行划分,并分别各种更新频率的图像进行分类处理。由此,在上述实施例的基础上,该方法还包括:根据数据更新频率,将所述待绘制数据信息划分为高频数据信息、中频数据信息和低频数据信息,并进行分块存储;所述伪图形渲染线程包括高频线程、中频线程和低频线程;所述高频线程用于读取高频数据信息并进行图形绘制,所述中频线程用于读取中频数据信息并进行图形绘制,所述低频线程用于读取低频数据信息并进行图形绘制。
所述web主线程获取并融合所述高频线程、中频线程和低频线程绘制的待渲染地图数据,然后根据融合后的待渲染地图数据进行图形渲染。
这里应当理解的是,高频线程的绘制频率可以设定为针对每帧数据进行图形绘制,而中频线程和低频线程的绘制频率可以通过设定指定时长的方式图形绘制,或者通过设定某种触发条件,来触发中频线程和低频线程的图形绘制操作。而当中频线程和低频线程为进行新的图形绘制操作时,web主线程在进行带渲染地图数据的融合时,将高频线程的输出数据与前次中频线程和低频线程的输出数据进行融合。
低频线程主要处理较少发生改变的图像计算(比如背景、地图、表格等绘制)。中频线程主要处理已经处理、或者等待处理的图形数据(比如处理好的图形、在地图上显示的元素等)。高频线程主要处理目前正在操作的图形数据(比如选中的图形、整在改变的元素形成的数据)。最终在web主线程中每帧图像的绘制时先对三个线程数据进行融合,再进行整个界面的渲染更新,从而实现页面的运行流畅,满足高实时性、数据量大的可视化需求的实现。
在上述实施例的基础上,本发明实施例提供一种提高web端canvas绘制性能的装置,包括:
图像渲染模块,包括web主线程,用作图形渲染;
数据处理模块,通过worker技术创建数据处理线程,所述数据处理线程进行绘制数据的实时运算;
图像绘制模块,通过worker技术创建一个使用offscreenCanvas技术的伪图形渲染线程;
所述数据处理线程对UI界面产生的用户数据进行实时运算,得到待绘制数据信息后交由伪图形渲染线程,所述伪图形渲染线程根据所述待绘制数据信息进行图形绘制后,然后提交给所述web主线程进行图形渲染。
请参阅图3,图3为本发明实施例提供的电子设备的实施例示意图。如图3所示,本发明实施例提了一种电子设备500,包括存储器510、处理器520及存储在存储器510上并可在处理器520上运行的计算机程序511,处理器520执行计算机程序511时实现以下步骤:
将web主线程用作图形渲染;通过worker技术创建一个数据处理线程,所述数据处理线程进行绘制数据的实时运算;通过worker技术创建一个使用offscreenCanvas技术的伪图形渲染线程;所述数据处理线程对UI界面产生的用户数据进行实时运算,得到待绘制数据信息后交由伪图形渲染线程,所述伪图形渲染线程根据所述待绘制数据信息进行图形绘制后,然后提交给所述web主线程进行图形渲染。
请参阅图4,图4为本发明实施例提供的一种计算机可读存储介质的实施例示意图。如图4所示,本实施例提供了一种计算机可读存储介质600,其上存储有计算机程序611,该计算机程序611被处理器执行时实现如下步骤:
将web主线程用作图形渲染;通过worker技术创建一个数据处理线程,所述数据处理线程进行绘制数据的实时运算;通过worker技术创建一个使用offscreenCanvas技术的伪图形渲染线程;所述数据处理线程对UI界面产生的用户数据进行实时运算,得到待绘制数据信息后交由伪图形渲染线程,所述伪图形渲染线程根据所述待绘制数据信息进行图形绘制后,然后提交给所述web主线程进行图形渲染。
需要说明的是,在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详细描述的部分,可以参见其它实施例的相关描述。
本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产品。因此,本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式计算机或者其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例,但本领域内的技术人员一旦得知了基本创造概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然,本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样,倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内,则本发明也意图包括这些改动和变型在内。

Claims (8)

1.一种提高web端canvas绘制性能的方法,其特征在于,包括:
将web主线程用作图形渲染;通过worker技术创建一个数据处理线程,所述数据处理线程进行绘制数据的实时运算;通过worker技术创建一个使用offscreenCanvas技术的伪图形渲染线程;所述数据处理线程对UI界面产生的用户数据进行实时运算,得到待绘制数据信息后交由伪图形渲染线程,所述伪图形渲染线程根据所述待绘制数据信息进行图形绘制后,然后提交给所述web主线程进行图形渲染。
2.根据权利要求1所述的方法,其特征在于,采用postmessage技术在数据处理线程以及伪图形渲染线程间进行数据通信。
3.根据权利要求2所述的方法,其特征在于,该方法还包括:使用SharedArrayBuffer技术创建共享内存模块,以及所述共享内存模块用于存储数据指针地址,所述数据指针用于指向待渲染地图数据以及UI界面产生的用户数据在存储器中的地址;
所述数据处理线程通过所述数据指针地址读取存储器中存储的待渲染地图数据以及UI界面产生的用户数据进行实时运算,得到待绘制数据信息,所述待绘制数据信息写入存储器,同时生成指向所述待绘制数据信息的数据指针写入所述共享内存模块;
所述伪图形渲染线程通过所述数据指针地址读取存储器中存储的待绘制数据信息,并根据所述待绘制数据信息进行图形绘制。
4.根据权利要求3所述的方法,其特征在于,该方法还包括:根据数据更新频率,将所述待绘制数据信息划分为高频数据信息、中频数据信息和低频数据信息,并进行分块存储;所述伪图形渲染线程包括高频线程、中频线程和低频线程;所述高频线程用于读取高频数据信息并进行图形绘制,所述中频线程用于读取中频数据信息并进行图形绘制,所述低频线程用于读取低频数据信息并进行图形绘制。
5.根据权利要求4所述的方法,其特征在于,该方法还包括:所述web主线程获取并融合所述高频线程、中频线程和低频线程绘制的待渲染地图数据,然后根据融合后的待渲染地图数据进行图形渲染。
6.一种提高web端canvas绘制性能的装置,其特征在于,包括:
图像渲染模块,包括web主线程,用作图形渲染;
数据处理模块,通过worker技术创建数据处理线程,所述数据处理线程进行绘制数据的实时运算;
图像绘制模块,通过worker技术创建一个使用offscreenCanvas技术的伪图形渲染线程;
所述数据处理线程对UI界面产生的用户数据进行实时运算,得到待绘制数据信息后交由伪图形渲染线程,所述伪图形渲染线程根据所述待绘制数据信息进行图形绘制后,然后提交给所述web主线程进行图形渲染。
7.一种电子设备,其特征在于,包括:
存储器,用于存储计算机软件程序;
处理器,用于读取并执行所述计算机软件程序,进而实现权利要求1-5任一项所述的一种提高web端canvas绘制性能的方法。
8.一种非暂态计算机可读存储介质,其特征在于,所述存储介质中存储有用于实现权利要求1-5任一项所述的一种提高web端canvas绘制性能的方法的计算机软件程序。
CN202310266984.7A 2023-03-19 2023-03-19 一种提高web端canvas绘制性能的方法及装置 Pending CN116433816A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310266984.7A CN116433816A (zh) 2023-03-19 2023-03-19 一种提高web端canvas绘制性能的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310266984.7A CN116433816A (zh) 2023-03-19 2023-03-19 一种提高web端canvas绘制性能的方法及装置

Publications (1)

Publication Number Publication Date
CN116433816A true CN116433816A (zh) 2023-07-14

Family

ID=87086391

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310266984.7A Pending CN116433816A (zh) 2023-03-19 2023-03-19 一种提高web端canvas绘制性能的方法及装置

Country Status (1)

Country Link
CN (1) CN116433816A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117112950A (zh) * 2023-10-19 2023-11-24 腾讯科技(深圳)有限公司 电子地图中对象的渲染方法、装置、终端及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117112950A (zh) * 2023-10-19 2023-11-24 腾讯科技(深圳)有限公司 电子地图中对象的渲染方法、装置、终端及存储介质
CN117112950B (zh) * 2023-10-19 2024-02-02 腾讯科技(深圳)有限公司 电子地图中对象的渲染方法、装置、终端及存储介质

Similar Documents

Publication Publication Date Title
KR102122454B1 (ko) 이전 타일의 이미지를 이용하여 현재 프레임을 렌더링하는 방법 및 장치
US9299123B2 (en) Indexed streamout buffers for graphics processing
US9779536B2 (en) Graphics processing
GB2542131B (en) Graphics processing method and system for processing sub-primitives
US9569811B2 (en) Rendering graphics to overlapping bins
DE102013017639B4 (de) Zwischenspeicherung von adaptiv dimensionierten Cache-Kacheln in einem vereinheitlichten L2-Cache-Speicher mit Oberflächenkomprimierung
CN101593354B (zh) 一种二维矢量图形的重绘方法及装置
CN115100022B (zh) 图形处理方法及系统
JP2013504816A (ja) テセレーションエンジン及びそのアプリケーション
DE102016109905A1 (de) Stückweise lineare unregelmäßige Rasterisierung
CN109213607B (zh) 一种多线程渲染的方法和装置
CN106934058B (zh) 矢量数据读取方法及系统、矢量数据可视化方法及系统
DE102013020613A1 (de) Umgehung der Pixel-Schattierung für die grafische Bilderzeugung mit geringer Leistung
US10535188B2 (en) Tessellation edge shaders
KR20210066727A (ko) 그래픽 처리 시스템
CN116433816A (zh) 一种提高web端canvas绘制性能的方法及装置
CN114529658A (zh) 一种图形渲染方法及其相关设备
US20210287418A1 (en) Graphics processing unit render mode selection system
JP7121019B2 (ja) アウトオブオーダのピクセルシェーダのエクスポート
CN107621951B (zh) 一种视图层级优化的方法及装置
US20220101483A1 (en) Cache replacement policy for ray tracing
KR101347178B1 (ko) 벡터 이미지 드로잉 방법 및 그 장치
CN117237502A (zh) 一种三维渲染方法、装置、设备及介质
CN115861510A (zh) 对象渲染方法、装置、电子设备、存储介质及程序产品
CN110738719A (zh) 一种基于视距分层优化的Web3D模型渲染方法

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