基于web前端技术的多线程处理方法、设备及存储介质与流程

本发明涉及web前端技术技术领域，尤其涉及的是基于web前端技术的多线程处理方法、设备及存储介质。

背景技术：

web前端技术领域一直以来都是以单线程为绝对主流的方式运行着各式各样的系统，单线程也称主线程，在web前端领域，单线程指的是所有计算的逻辑必须以排队的方式由一个处理器进行计算，然后返回结果。单线程要按事件循环的队列完成大部分系统运行的日常任务，例如dom解析(网页的主体组成结构)与渲染，脚本语言的解释和执行，绘制图形等。

随着web前端技术的进步，新一代html5标准的推出，提出了webworker(web端多线程)的概念。所谓webworker指的是独立于主线程之外的单独线程，调度操作系统资源进行独立运算任务，并可以与主线程进行通讯交换运算结果的一种多线程技术。主线程模式最大的问题在于在计算任务多，计算任务耗时长的时候会被阻塞，阻塞指的是由于主线程在运算其他任务导致与用户交互的部分逻辑和图标无法及时更新，造成系统卡顿甚至崩溃的现象。webworker不会阻塞主线程的工作，而是在主线程运行的同时并行运算处理任务，在完成后将结果返回给主线程。

但是，传统的webworker技术受限非常大，要求必须在使用webworker脚本文件的同级目录下新建一个worker.js文件进行初始化调用。而浏览器脚本语言操作文件的能力是十分孱弱的，也就导致webworker技术很难被动态地嵌入应用到一般的web开发脚本当中，很难被利用起来，使用场景受限。

因此，现有技术存在缺陷，有待改进与发展。

技术实现要素：

本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供基于web前端技术的多线程处理方法、设备及存储介质，旨在解决现有技术中在多线程的处理过程中，必须在使用webworker脚本文件的同级目录下新建一个worker.js文件进行初始化调用，而浏览器脚本语言操作文件的能力较差，多线程技术很难被利用的问题。

本发明解决技术问题所采用的技术方案如下：

一种基于web前端技术的多线程处理方法，其中，包括：

待处理场景的主程序接收用户撰写指令，得到待处理场景对应的计算函数；

接收用户操作指令，预先设置的启动函数开启，根据所述计算函数和启动函数调用多线程程序；

主程序将待处理场景对应的原始数据发送至多线程程序，所述多线程程序对原始数据进行处理后，得到结果数据，并将结果数据发送至主程序。

进一步地，所述待处理场景的主程序接收用户撰写指令，得到待处理场景对应的计算函数的步骤具体为：

所述待处理场景的主程序接收用户撰写指令，得到第一onmessage函数、计算算法和第一postmessage函数；

所述第一onmessage函数用于接收主程序的原始数据，所述计算算法为待处理场景对应的用户自定义算法，所述第一postmessage函数用于向主程序返回计算完成的结果数据。

进一步地，所述接收用户操作指令，预先设置的启动函数开启，根据所述计算函数和启动函数调用多线程程序的步骤具体包括：

所述接收用户操作指令，预先设置的启动函数开启；

所述计算函数传输至启动函数，并根据所述计算函数和启动函数调用多线程程序。

进一步地，所述计算函数传输至启动函数，并根据所述计算函数和启动函数调用多线程程序的步骤具体包括：

所述计算函数传输至启动函数，启动函数接收到计算函数，并将所述计算函数字符串化及二进制化；

将一个二进制文件对象的地址指向所述计算函数后，调用多线程程序。

进一步地，所述计算函数传输至启动函数，启动函数接收到计算函数，并将所述计算函数字符串化及二进制化的步骤具体包括：

所述计算函数传输至启动函数，启动函数接收到计算函数，利用计算函数的tostring()方法将所述计算函数字符串化；

利用newblob将字符串化的计算函数二进制化。

进一步地，所述将一个二进制文件对象的地址指向所述计算函数后，调用多线程程序的步骤具体包括：

利用url.createobjecturl将一个二进制文件对象的地址指向二进制化的计算函数；

利用newworker进行多线程webworker创建。

进一步地，所述基于web前端技术的多线程处理方法还包括：

待处理场景的主程序接收用户编写指令，得到第二onmessage函数和第二postmessage函数；

所述第二onmessage函数用于接收多线程程序发送的结果数据，所述第二postmessage函数用于将主程序的原始数据发送至多线程程序。

进一步地，所述主程序将待处理场景对应的原始数据发送至多线程程序，所述多线程程序对原始数据进行处理后，得到结果数据，并将结果数据发送至主程序的步骤具体包括：

主程序将待处理场景对应的原始数据通过第二postmessage函数传递给多线程程序；

多线程程序利用第一onmessage函数接收所述原始数据，并利用计算函数中的计算算法进行异步计算；

计算完毕后得到结果数据，多线程程序通过第一postmessage函数将结果数据发送至主程序；

主程序通过第二onmessage函数接收结果数据，并直接使用所述结果数据。

本发明还提供一种设备，其中，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于web前端技术的多线程处理程序，所述基于web前端技术的多线程处理程序被所述处理器执行时实现如上所述的基于web前端技术的多线程处理方法的步骤。

本发明还提供一种存储介质，其中，所述存储介质存储有计算机程序，所述计算机程序能够被执行以用于实现如上所述的基于web前端技术的多线程处理方法。

本发明所提供的基于web前端技术的多线程处理方法、设备及存储介质，包括：待处理场景的主程序接收用户撰写指令，得到待处理场景对应的计算函数；接收用户操作指令，预先设置的启动函数开启，根据所述计算函数和启动函数调用多线程程序；主程序将待处理场景对应的原始数据发送至多线程程序，所述多线程程序对原始数据进行处理后，得到结果数据，并将结果数据发送至主程序。本发明通过在待处理场景的主程序中完成计算函数的撰写以及调用多线程程序，最终实现多线程程序帮助主程序进行数据计算，无需在使用webworker脚本文件的同级目录下新建worker.js文件进行初始化调用，避免了浏览器脚本语言操作文件，使得使用者能够顺利利用多线程技术。

附图说明

图1是本发明中基于web前端技术的多线程处理方法较佳实施例的流程图。

图2是本发明使用场景中绘制多边形体的示意图。

图3是本发明使用场景中主程序渲染后的可视化效果图。

图4是本发明使用场景中多线程程序渲染后的可视化效果图。

图5是本发明中设备的较佳实施例的功能原理框图。

具体实施方式

为使本发明的目的、技术方案及优点更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

当用户在某个使用场景中需要处理的数据非常庞大时，需要使用多线程程序帮助主程序(即主线程程序)进行计算。例如，若用户需要绘制6.6万个多边形体(带有高度的多边形)，以及计算它们的缓冲区(多边形等比例扩大一定的距离后形成的新多边形的坐标)，根据缓冲区坐标绘制新的多边形体，如图2所示，里面的多边形为原多边形，外面的多边形为根据原多边形向外扩展坐标后得到缓冲区坐标新绘制而成的多边形。如果都绘制上高度那么就是是多边形体。但是，计算6.6万个多边形的缓冲区坐标是一件非常耗费计算机处理器时间的工作，如果完全放在主线程中，会造成长时间的卡顿，卡顿达到10秒以上，甚至崩溃。所以在该场景下，需要使用多线程(webwork)技术，该场景即为待处理场景。

按照html5标准，webwork使用必须先创建一个与使用的地方同级的worker.js文件，并在worker.js中编写webworker多线程处理的代码逻辑和通讯相关代码。但是浏览器操作文件的能力较差，并不能够顺利的处理多线程。并且，worker.js文件需要提前创建，使用者正在使用的时候进行创建是无法是实现的，但是人们往往不能够提前预知是否需要多线程程序，为用户带来了困难。而本发明可做到不创建新的文件，动态在主程序代码中实现开启webworker多线程。

在现有技术实现webworker多线程时，按照标准浏览器加载worker.js并解析使其能够以多线程工作的过程中，浏览器一般加载脚本文件后会将其解析为一个脚本文件对象放在内存中，进行处理。在webworker多线程创建的最后一步，是利用代码newworker(worker.js存放地址)来进行创建的。也就是说，本发明需要一个包含worker.js代码的虚拟化的内存文件地址来替代真实存在与同级下的实际文件worker.js的地址。

本发明利用web前端较底层的接口，直接将原本属于worker.js的代码写在主线程代码(主程序代码)中，代码运行之后，它天然就成为了一个内存中脚本文件对象。调用这个脚本文件对象的.tostring()原生方法将它转换为字符串。此时可以使用newblob(转为字符串的脚本文件对象)将它转换成一个二进制文件对象，再利用原生方法url.createobjecturl(二进制文件对象)将其转换为一个包含了worker.js内容，指向这个二进制文件对象的地址，即上述的虚拟化内存文件地址。最后使用替代的newworker(二进制文件对象地址)动态创建出多线程webworker。因此，本发明解决了webworker无法被动态创建使用的难题。

请参见图1，图1是本发明中基于web前端技术的多线程处理方法的流程图。如图1所示，本发明实施例所述的基于web前端技术的多线程处理方法包括以下步骤：

s100、待处理场景的主程序接收用户撰写指令，得到待处理场景对应的计算函数。

具体的，当用户需要使用多线程程序来处理数据时，直接在待处理场景的主程序中撰写计算函数(即work函数)。也就是说，本发明在主程序中撰写本应该写在worker.js脚本中执行多边形缓冲区计算的函数work。

在一种实现方式中，所述步骤s100具体为：所述待处理场景的主程序接收用户撰写指令，得到第一onmessage函数、计算算法和第一postmessage函数。其中，所述第一onmessage函数用于接收主程序的原始数据，所述计算算法为待处理场景对应的用户自定义算法，所述第一postmessage函数用于向主程序返回计算完成的结果数据。例如，以上述使用场景为例，计算函数的内容包含三部分，第一是接收主线程的方法onmessage，它负责接收来自主线程传来的原始数据，第二是处理原始数据计算缓冲区的算法，第三是向主线程返回计算完数据的方法postmessage。

所述步骤s100之后为：s200、接收用户操作指令，预先设置的启动函数开启，根据所述计算函数和启动函数调用多线程程序。

具体的，启动函数是指runworker函数，runworker函数是可以复用和提前准备好的。本发明在主线程代码中直接创建webworker多线程程序newworker()，无需在使用webworker脚本文件的同级目录下新建一个worker.js文件，也无需指定worker.js存放地址。

在一种实现方式中，所述步骤s200具体包括：

s210、所述接收用户操作指令，预先设置的启动函数开启；

s220、所述计算函数传输至启动函数，并根据所述计算函数和启动函数调用多线程程序。

也就是说，用户在撰写好计算函数后，打开启动函数(runworker函数)，并将计算函数传输至启动函数。

进一步地，所述步骤s220具体包括：

s221、所述计算函数传输至启动函数，启动函数接收到计算函数，并将所述计算函数字符串化及二进制化；

s222、将一个二进制文件对象的地址指向所述计算函数后，调用多线程程序。

进一步地，所述步骤s221具体包括：

s2211、所述计算函数传输至启动函数，启动函数接收到计算函数，利用计算函数的tostring()方法将所述计算函数字符串化；

s2212、利用newblob将字符串化的计算函数二进制化。

进一步地，所述步骤s222具体包括：

s2221、利用url.createobjecturl将一个二进制文件对象的地址指向二进制化的计算函数；

s2222、利用newworker进行多线程webworker创建。

也就是说，runworker函数首先接收work函数作为参数，使用work函数的tostring()方法将其字符串化，再使用newblob将它二进制化之后使用url.createobjecturl将一个二进制文件对象的地址指向它，最后使用newworker进行多线程webworker创建。

在一种实现方式中，所述基于web前端技术的多线程处理方法还包括：

s10、待处理场景的主程序接收用户编写指令，得到第二onmessage函数和第二postmessage函数；

其中，所述第二onmessage函数用于接收多线程程序发送的结果数据，所述第二postmessage函数用于将主程序的原始数据发送至多线程程序。也就是说，在实现时还需要编写另一个onmessage函数，接收来自webworker多线程的计算结果，以及另一个postmessage函数，将原始数据传递过去。最后以work函数为参数调用runworker方法，webworker多线程创建完毕。

s300、主程序将待处理场景对应的原始数据发送至多线程程序，所述多线程程序对原始数据进行处理后，得到结果数据，并将结果数据发送至主程序。

在一种实现方式中，所述步骤s300具体包括：

s310、主程序将待处理场景对应的原始数据通过第二postmessage函数传递给多线程程序；

s320、多线程程序利用第一onmessage函数接收所述原始数据，并利用计算函数中的计算算法进行异步计算；

s330、计算完毕后得到结果数据，多线程程序通过第一postmessage函数将结果数据发送至主程序；

s340、主程序通过第二onmessage函数接收结果数据，并直接使用所述结果数据。

也就是说，本发明在主线程代码中将原始数据通过第二postmessage函数传递给多线程程序，多线程程序利用第一onmessage函数接收后，使用work函数进行异步计算。计算完毕后，多线程程序通过第一postmessage函数将计算好的结果数据返回给主线程，主线程通过第二onmessage函数接收计算好的结果数据并直接使用。

这样，在多线程程序异步计算任务时是不占用主线程的任务队列和io通信的，多线程程序会调度操作系统的资源重新开启一块内存进行操作，这样就不会阻塞主线程，使用者就不会在等待时感到卡顿。此外，在程序运行时可能会动态根据计算任务的多少来决定是否启用多线程程序，不论是否决定启用，都不用提前或临时在运行的同级目录下创建work.js文件，非常方便。

仍以上述使用场景为例，最终经过webworker多线程计算的6.6万多边形缓冲区的结果数据被返回来，进行多边形体外壳的可视化效果如图3和图4所示。其中，图4中包裹在建筑外层的部分就是根据webworker多线程计算返回的多边形缓冲区数据绘制而成的。整个计算过程让主线程程序看起来非常流畅自然，主线程渲染的建筑先被加载出来后，如图3所示，在等待2秒后webworker多线程的计算结果返回主线程，然后渲染外部包裹的外壳，如图4所示，丝毫不影响整个程序的用户输入响应和交互。

因此，本发明真正实现了无副作用地创建webworker多线程，在一般的脚本文件中可随时方便创建原来只能通过新建同级worker.js文件才能实现的多线程功能。并且支持多线程业务的封装、模块化以及复用，大大提升了webworker多线程的开发效率和开发体验，让更多场景更方便地使用webworker多线程技术，提升了用户体验。

如图5所示，本发明实施例还提供了一种设备，其特征在于，包括存储器20、处理器10及存储在所述存储器20上并可在所述处理器10上运行的基于web前端技术的多线程处理程序，所述基于web前端技术的多线程处理程序被所述处理器执行时实现如上所述的基于web前端技术的多线程处理方法的步骤。

本发明还提供了一种存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序能够被执行以用于实现如上所述的基于web前端技术的多线程处理方法。

综上所述，本发明公开的基于web前端技术的多线程处理方法、设备及存储介质，包括：待处理场景的主程序接收用户撰写指令，得到待处理场景对应的计算函数；接收用户操作指令，预先设置的启动函数开启，根据所述计算函数和启动函数调用多线程程序；主程序将待处理场景对应的原始数据发送至多线程程序，所述多线程程序对原始数据进行处理后，得到结果数据，并将结果数据发送至主程序。本发明通过在待处理场景的主程序中完成计算函数的撰写以及调用多线程程序，最终实现多线程程序帮助主程序进行数据计算，无需在使用webworker脚本文件的同级目录下新建worker.js文件进行初始化调用，避免了浏览器脚本语言操作文件，使得使用者能够顺利利用多线程技术。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。