一种基于多线程组件的任务处理方法及浏览器内核与流程

1.本发明涉及浏览器领域，尤其是涉及一种基于多线程组件的任务处理方法及浏览器内核。


背景技术：

2.由于浏览器的限制，当前在浏览器进程中，js(—种具有函数优先的轻量级，解释型或即时编译型的编程语言，经常被作为开发web页面的脚本语言)脚本的执行是单线程的，并且js线程与gui(graphical user interface，图形用户界面)渲染线程是互斥的，当js引擎在执行时，gui渲染线程需要被挂起。gui渲染线程在更新时，需要被保存在一个队列中，等待js引擎空闲时才能执行。现在市面上主流浏览器的刷新频率为60hz，就导致js脚本的执行时间最好不要超过1/60秒，如果js脚本执行时间过长，会导致浏览器卡顿，严重时可能导致浏览器崩溃，影响用户使用体验。
3.当前主流解决方案，一种是减少js代码中的逻辑处理及计算量，将大量计算及处理放到后端服务器执行，再通过ajax(是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术)技术更新界面数据；另一种是优化js代码中执行的算法，保证在较短时间内执行完成；但是，这两种解决方案均适用于页面脚本压力较小的场景，当浏览器中存在大量js脚本任务时，任务处理的可靠性较低，容易导致浏览器卡顿。


技术实现要素：

4.本发明为了解决现有技术中存在的问题，创新提出了一种基于多线程组件的任务处理方法及浏览器内核，有效解决由于现有技术中当浏览器中存在大量js脚本任务时，任务处理的可靠性较低，容易导致浏览器卡顿的问题，有效地提高了任务处理的可靠性。
5.本发明第一方面提供了一种基于多线程组件的任务处理方法，包括：
6.满足预设构造条件时，js主线程调用多线程组件中构造模块通过构造函数构造worker线程；
7.判断当前浏览器版本是否支持webworker功能，如果支持，js主线程通过所述构造函数拉起构造的worker线程，用于处理执行时间超过预设时间阈值的js任务；
8.判断构造worker线程的传参类型，如果构造worker线程的传参为js函数，js主线程通过blob对象将待处理的js任务中的字符串转换为成可执行的webworker对象，然后构造的worker线程通过可执行的webworker对象执行待处理的js任务；如果构造worker线程的传参为js脚本路径，js主线程直接调用worker线程，执行对应的待处理js任务。
9.可选地，如果当前浏览器版本不支持webworker功能，js主线程直接执行对应的待处理js任务。
10.可选地，所述多线程组件还包括通信模块，所述通信模块用于js主线程以及构造的worker线程之间的通信。
11.进一步地，所述通信模块中封装有worker线程通过与js主线程通信的方式，当
worker线程需要操作dom节点或使用window对象的默认方法和属性时，由js主线程操作dom节点或使用window对象的默认方法和属性，并将执行结果以回调的方式传递回worker线程，用于实现在worker线程中操作dom节点或使用window对象的默认方法和属性。
12.可选地，js主线程通过多线程组件中的通信模块，监控构造模块构造的worker线程的运行情况。
13.进一步地，多线程组件中还包括错误处理模块，当js主线程监控到worker线程运行异常或运行过程中出现错误时，调用多线程组件中的错误处理模块处理产生的错误或异常。
14.可选地，多线程组件中还包括关闭模块，当js主线程监控到构造的work线程执行完待处理的js任务后时，调用多线程组件中的关闭模块关闭执行完任务的work线程。
15.本发明第二方面提供了一种浏览器内核，包括：js主线程以及多线程组件，所述js主线程与多线程组件通信连接，用于在满足预设构造条件时，调用多线程组件中的构造模块通过构造函数构造worker线程；在当前浏览器版本支持webworker功能时，通过所述构造函数拉起构造的worker线程，用于处理执行时间超过预设时间阈值的js任务；在构造worker线程的传参类型为js函数时，js主线程通过blob对象将待处理的js任务中的字符串转换为成可执行的webworker对象，然后构造的worker线程通过可执行的webworker对象执行待处理的js任务；在构造worker线程的传参类型为js脚本路径时，js主线程直接调用worker线程，执行对应的待处理js任务。
16.可选地，所述多线程组件还包括通信模块，所述通信模块用于js主线程以及多线程组件中构造的worker线程之间的通信，js主线程通过多线程组件中的通信模块，监控构造模块构造的worker线程的运行情况。
17.进一步地，多线程组件中还包括错误处理模块以及关闭模块，当js主线程监控到worker线程运行异常或运行过程中出现错误时，调用多线程组件中的错误处理模块处理产生的错误或异常；当js主线程监控到构造的work线程执行完待处理的js任务后时，调用多线程组件中的关闭模块关闭执行完任务的work线程。
18.本发明采用的技术方案包括以下技术效果：
19.1、本发明js主线程调用多线程组件中构造模块通过构造函数构造worker线程；js主线程通过所述构造函数拉起构造的worker线程，用于处理执行时间超过预设时间阈值的js任务，前端开发人员可以方便的拉起worker线程来处理大计算量或大数据量的计算而不必担心由此导致的浏览器卡顿问题，有效解决由于现有技术中当浏览器中存在大量js脚本任务时，任务处理的可靠性较低，容易导致浏览器卡顿的问题，有效地提高了任务处理的可靠性。
20.2、本发明技术方案中js主线程通过blob对象将待处理的js任务中的字符串转换为成可执行的webworker对象，然后构造的worker线程通过可执行的webworker对象执行待处理的js任务，不必单独构建js脚本，通过blob对象转换后可直接使用普通js函数方便的拉起worker线程，从而确保更加灵活的使用webworker功能，同时不受原生web worker组件(实现web worker功能)的限制，降低了web worker组件的使用门槛，有效避免因计算量过大导致的浏览器卡顿问题，提高了任务处理的效率。
21.3、本发明技术方案中所述多线程组件还包括通信模块，用于js主线程以及构造的
worker线程之间的通信，所述通信模块中封装有worker线程通过与js主线程通信的方式，由js主线程操作dom节点或使用window对象的默认方法和属性，并将执行结果以回调的方式传递回worker线程，由于在worker线程内不能直接操作dom节点，也不能使用window对象的默认方法和属性，通过通信模块，实现在worker线程中操作dom节点、使用window对象的默认方法和属性等需求。
22.4、本发明技术方案中多线程组件中还包括错误处理模块，当js主线程监控到worker线程运行异常或运行过程中出现错误时，调用多线程组件中的错误处理模块处理产生的错误或异常，保证了浏览器任务异常的及时发现以及及时解决。
23.5、本发明技术方案中多线程组件中还包括关闭模块，当js主线程监控到构造的work线程执行完待处理的js任务后时，调用多线程组件中的关闭模块关闭执行完任务的work线程，回收资源。
24.应当理解的是以上的一般描述以及后文的细节描述仅是示例性和解释性的，并不能限制本发明。
附图说明
25.为了更清楚说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单介绍，显而易见的，对于本领域普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
26.图1为本发明方案中实施例一方法的流程示意图；
27.图2为本发明方案中实施例一方法中使用blob对象将字符串处理成可执行的webworker对象的流程示意图；
28.图3为本发明方案中实施例一方法中js主线程与多线程组件的通信示意图；
29.图4为本发明方案中实施例二中浏览器内核的结构示意图。
具体实施方式
30.为能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本发明进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。
31.实施例一
32.如图1所示，本发明提供了一种基于多线程组件的任务处理方法，包括：
33.s1，满足预设构造条件时，js主线程调用多线程组件中构造模块通过构造函数构造worker线程；
34.s2，判断当前浏览器版本是否支持webworker功能，如果判断结果为是，则执行步骤s3；如果判断结果为否，则执行步骤s4；
35.s3，js主线程通过所述构造函数拉起构造的worker线程，用于处理执行时间超过预设时间阈值的js任务；
36.s4，js主线程直接执行对应的待处理js任务；
37.s5，判断构造worker线程的传参类型是否为js函数，如果判断结果为是，则执行步骤s6；如果判断结果为否，则执行步骤s7；
38.s6，js主线程通过blob对象将待处理的js任务中的字符串转换为成可执行的webworker对象，然后构造的worker线程通过可执行的webworker对象执行待处理的js任务；
39.s7，js主线程直接调用worker线程，执行对应的待处理js任务。
40.其中，在步骤s1中，预设构造条件可以为存在执行时间超过预设时间阈值的js任务，即如果存在执行时间超过预设时间阈值的js任务(js主线程中存在大数据量计算或复杂逻辑处理等可能执行时间较长的逻辑块)，满足预设构造条件，js主线程(js引擎线程)调用多线程组件中构造模块通过构造函数构造worker线程；如果不存在执行时间超过预设时间阈值的js任务，不满足预设构造条件，js主线程不需要调用多线程组件中构造模块通过构造函数构造worker线程。其中，满足预设构造条件时，存在多个执行时间超过预设时间阈值的js任务时，js主线程调用多线程组件中构造模块通过构造函数构造的worker线程的数量可以是一个，即每一个构造的worker线程执行完一个js任务时，再构造一个新的worker线程，保证了执行优先级顺序问题；js主线程调用多线程组件中构造模块通过构造函数构造的worker线程的数量也可以是多个，即构造的worker线程的数量与执行时间超过预设时间阈值的js任务的数量对应相同，构造的多个worker线程可以并行执行，以提高执行时间超过预设时间阈值的js任务的处理效率。
41.其中，在步骤s2中，构造函数判断当前浏览器版本是否支持webworker功能，其中，webworker功能具体是指运行在后台的javascript脚本，独立于其他脚本，不会影响web页面的性能。
42.在步骤s3中，js主线程通过构造函数拉起构造的worker线程，用于处理执行时间超过预设时间阈值的js任务。
43.在步骤s6中，如图2所示，js主线程通过blob对象将待处理的js任务中的字符串转换为成可执行的webworker对象，然后构造的worker线程通过可执行的webworker对象执行待处理的js任务具体是：构造worker线程的传参类型为js函数，那么将js函数通过命令：function.tostring(命令)，将js函数转换为js任务中的js代码字符串，然后通过命令new blob()，新建一个blob对象，新建的blob对象通过命令url.cerateobjecturl()创建objecturl对象，通过创建的objecturl对象通过命令new work()新建任务，将js代码字符串先转换为webworker对象，从而确保更加灵活的使用webworker功能。
44.进一步地，如图3所示，多线程组件还可以包括通信模块，通信模块用于js主线程(js引擎线程)以及构造的worker线程之间的通信。
45.进一步地，由于在worker线程内不能直接操作dom节点，也不能使用window对象的默认方法和属性，所以在通信模块中封装有worker线程通过与js主线程通信的方式，当worker线程需要操作dom节点(指在xml文档中的每个成分都是一个节点)或使用window对象的默认方法和属性时，由js主线程操作dom节点或使用window对象的默认方法和属性，并将执行结果以回调的方式传递回worker线程，实现在worker线程中操作dom节点或使用window对象的默认方法和属性。
46.js主线程通过多线程组件中的通信模块，实时监控构造模块构造的worker线程的运行情况(运行时长等运行参数)；当js主线程监控到worker线程运行异常或运行过程中出现错误时，调用多线程组件中的错误处理模块处理产生的错误或异常；当js主线程监控到构造的work线程执行完待处理的js任务后时，调用多线程组件中的关闭模块关闭执行完任务的work线程。
47.本发明js主线程调用多线程组件中构造模块通过构造函数构造worker线程；js主线程通过所述构造函数拉起构造的worker线程，用于处理执行时间超过预设时间阈值的js任务，前端开发人员可以方便的拉起worker线程来处理大计算量或大数据量的计算而不必担心由此导致的浏览器卡顿问题，有效解决由于现有技术中当浏览器中存在大量js脚本任务时，任务处理的可靠性较低，容易导致浏览器卡顿的问题，有效地提高了任务处理的可靠性。
48.本发明技术方案中js主线程通过blob对象将待处理的js任务中的字符串转换为成可执行的webworker对象，然后构造的worker线程通过可执行的webworker对象执行待处理的js任务，不必单独构建js脚本，通过blob对象转换后可直接使用普通js函数方便的拉起worker线程，从而确保更加灵活的使用webworker功能，同时不受原生web worker组件(实现web worker功能)的限制，降低了web worker组件的使用门槛，有效避免因计算量过大导致的浏览器卡顿问题，提高了任务处理的效率。
49.本发明技术方案中所述多线程组件还包括通信模块，用于js主线程以及构造的worker线程之间的通信，所述通信模块中封装有worker线程通过与js主线程通信的方式，由js主线程操作dom节点或使用window对象的默认方法和属性，并将执行结果以回调的方式传递回worker线程，由于在worker线程内不能直接操作dom节点，也不能使用window对象的默认方法和属性，通过通信模块，实现在worker线程中操作dom节点、使用window对象的默认方法和属性等需求。
50.本发明技术方案中多线程组件中还包括错误处理模块，当js主线程监控到worker线程运行异常或运行过程中出现错误时，调用多线程组件中的错误处理模块处理产生的错误或异常，保证了浏览器任务异常的及时发现以及及时解决。
51.本发明技术方案中多线程组件中还包括关闭模块，当js主线程监控到构造的work线程执行完待处理的js任务后时，调用多线程组件中的关闭模块关闭执行完任务的work线程，回收资源。
52.实施例二
53.如图4所示，本发明技术方案还提供了一种浏览器内核，其特征是，包括：js主线程以及多线程组件，所述js主线程与多线程组件通信连接，用于在满足预设构造条件时，调用多线程组件中的构造模块通过构造函数构造worker线程；在当前浏览器版本支持webworker功能时，通过所述构造函数拉起构造的worker线程，用于处理执行时间超过预设时间阈值的js任务；在构造worker线程的传参类型为js函数时，js主线程通过blob对象将待处理的js任务中的字符串转换为成可执行的webworker对象，然后构造的worker线程通过可执行的webworker对象执行待处理的js任务；在构造worker线程的传参类型为js脚本路径时，js主线程直接调用worker线程，执行对应的待处理js任务。
54.其中，预设构造条件可以为存在执行时间超过预设时间阈值的js任务，即如果存
在执行时间超过预设时间阈值的js任务(js主线程中存在大数据量计算或复杂逻辑处理等可能执行时间较长的逻辑块)，满足预设构造条件，js主线程调用多线程组件中构造模块通过构造函数构造worker线程；如果不存在执行时间超过预设时间阈值的js任务，不满足预设构造条件，js主线程不需要调用多线程组件中构造模块通过构造函数构造worker线程。其中，满足预设构造条件时，存在多个执行时间超过预设时间阈值的js任务时，js主线程调用多线程组件中构造模块通过构造函数构造的worker线程的数量可以是一个，即每一个构造的worker线程执行完一个js任务时，再构造一个新的worker线程，保证了执行优先级顺序问题；js主线程调用多线程组件中构造模块通过构造函数构造的worker线程的数量也可以是多个，即构造的worker线程的数量与执行时间超过预设时间阈值的js任务的数量对应相同，构造的多个worker线程可以并行执行，以提高执行时间超过预设时间阈值的js任务的处理效率。
55.其中，多线程组件中构造模块中的构造函数判断当前浏览器版本是否支持webworker功能，其中，webworker功能具体是指运行在后台的javascript脚本，独立于其他脚本，不会影响web页面的性能。
56.js主线程通过构造函数拉起构造的worker线程，用于处理执行时间超过预设时间阈值的js任务。
57.如图2所示，js主线程通过blob对象将待处理的js任务中的字符串转换为成可执行的webworker对象，然后构造的worker线程通过可执行的webworker对象执行待处理的js任务具体是：构造worker线程的传参类型为js函数，那么将js函数通过命令：function.tostring(命令)，将js函数转换为js任务中的js代码字符串，然后通过命令new blob()，新建一个blob对象，新建的blob对象通过命令url.cerateobjecturl()创建objecturl对象，通过创建的objecturl对象通过命令new work()新建任务，将js代码字符串先转换为webworker对象，从而确保更加灵活的使用webworker功能。
58.进一步地，多线程组件还可以包括通信模块，通信模块用于js主线程(js引擎线程)以及构造的worker线程之间的通信。
59.进一步地，由于在worker线程内不能直接操作dom节点，也不能使用window对象的默认方法和属性，所以在通信模块中封装有worker线程通过与js主线程通信的方式，当worker线程需要操作dom节点(指在xml文档中的每个成分都是一个节点)或使用window对象的默认方法和属性时，由js主线程操作dom节点或使用window对象的默认方法和属性，并将执行结果以回调的方式传递回worker线程，实现在worker线程中操作dom节点或使用window对象的默认方法和属性。
60.js主线程通过多线程组件中的通信模块，实时监控构造模块构造的worker线程的运行情况(运行时长等运行参数)；当js主线程监控到worker线程运行异常或运行过程中出现错误时，调用多线程组件中的错误处理模块处理产生的错误或异常；当js主线程监控到构造的work线程执行完待处理的js任务后时，调用多线程组件中的关闭模块关闭执行完任务的work线程。
61.多线程组件还包括通信模块，通信模块用于js主线程以及多线程组件中构造的worker线程之间的通信，js主线程通过多线程组件中的通信模块，监控构造模块构造的worker线程的运行情况。
62.多线程组件中还包括错误处理模块以及关闭模块，当js主线程监控到worker线程运行异常或运行过程中出现错误时，调用多线程组件中的错误处理模块处理产生的错误或异常；当js主线程监控到构造的work线程执行完待处理的js任务后时，调用多线程组件中的关闭模块关闭执行完任务的work线程。
63.进一步地，本发明技术方案中的浏览器内核中还包括gui渲染线程、事件触发线程、定时器触发线程以及异步http(hyper text transferprotocol，超文本传输协议)请求线程等，gui渲染线程用于渲染浏览器中gui用户界面，解析网页，构建dom节点树，布局和绘制等；事件触发线程用于协调其他线程(定时器触发线程，异步http请求线程，当一个事件被触发时，事件触发线程会把事件添加到任务队列的队尾，等待js引擎(js主线程)的处理；定时器触发线程中，因为浏览器定时计数器并不是由js引擎计数的，因为js引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确性；因此使用单独线程(定时器触发线程)来计时并触发定时器，计时完毕后，通过事件触发线程，添加到事件队列中，等待js引擎空闲后执行，所以定时器中的任务在设定的时间点不一定能够准时执行，定时器只是在指定时间点将任务添加到事件队列中；异步http请求线程为接收到xmlhttprequest(http请求)连接后通过浏览器新开一个线程请求；检测到状态变更时，如果设置有回调函数，异步http请求线程就产生状态变更事件，将回调函数放入事件队列中，等待js引擎空闲后执行。
64.本发明js主线程调用多线程组件中构造模块通过构造函数构造worker线程；js主线程通过所述构造函数拉起构造的worker线程，用于处理执行时间超过预设时间阈值的js任务，前端开发人员可以方便的拉起worker线程来处理大计算量或大数据量的计算而不必担心由此导致的浏览器卡顿问题，有效解决由于现有技术中当浏览器中存在大量js脚本任务时，任务处理的可靠性较低，容易导致浏览器卡顿的问题，有效地提高了任务处理的可靠性。
65.本发明技术方案中js主线程通过blob对象将待处理的js任务中的字符串转换为成可执行的webworker对象，然后构造的worker线程通过可执行的webworker对象执行待处理的js任务，不必单独构建js脚本，通过blob对象转换后可直接使用普通js函数方便的拉起worker线程，从而确保更加灵活的使用webworker功能，同时不受原生web worker组件(实现web worker功能)的限制，降低了web worker组件的使用门槛，有效避免因计算量过大导致的浏览器卡顿问题，提高了任务处理的效率。
66.本发明技术方案中所述多线程组件还包括通信模块，用于js主线程以及构造的worker线程之间的通信，所述通信模块中封装有worker线程通过与js主线程通信的方式，由js主线程操作dom节点或使用window对象的默认方法和属性，并将执行结果以回调的方式传递回worker线程，由于在worker线程内不能直接操作dom节点，也不能使用window对象的默认方法和属性，通过通信模块，实现在worker线程中操作dom节点、使用window对象的默认方法和属性等需求。
67.本发明技术方案中多线程组件中还包括错误处理模块，当js主线程监控到worker线程运行异常或运行过程中出现错误时，调用多线程组件中的错误处理模块处理产生的错误或异常，保证了浏览器任务异常的及时发现以及及时解决。
68.本发明技术方案中多线程组件中还包括关闭模块，当js主线程监控到构造的work线程执行完待处理的js任务后时，调用多线程组件中的关闭模块关闭执行完任务的work线
程，回收资源。
69.上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制，所属领域技术人员应该明白，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。