本发明涉及计算机技术领域，特别涉及一种基于多线程优化html5的canvas性能的方法。
背景技术：
现阶段互联网行业飞速发展，各种web应用层出不穷，中间件技术的使用提供了上层应用与底层系统软件或服务程序之间的桥梁，屏蔽了操作系统或服务的复杂性，实现了各种技术之间的资源共享，减少了程序设计的复杂性。web应用与中间件通过接口和事件通讯，应用调用中间件接口，中间件通过事件进行反馈，事件发生时触发在web应用中绑定的代码完成处理任务。javascript是一种在web应用开发中广泛使用的直译式脚本语言，可以实现在html页面嵌入动态文本，对浏览器事件做出响应，对即将提交到服务器的数据进行验证，对访客信息进行检测等等功能，非常强大，但是众所周知，javascript语言的执行环境是相对单纯的“单线程”(singlethread)，所有任务顺序执行，一方面限制了处理速度，另一方面应用技术的扩展也受到了局限。目前多线程技术在服务端已经发展的很成熟了，但是在web端的应用中却一直是鸡肋，中间件调用又是web开发不可获取的组成部分，直接影响了中间件的调用。在web应用中调用中间件有时需要中间件的事件反馈，这时如果需要再次调用中间件接口，需要等到事件处理完成中间件资源释放后，才能再次调用中间件接口，而无法实现嵌套调用。这种处理方式耗时较长，对界面响应产生很大影响，用户体验较差。如果能在javascript接到中间件事件反馈后就能立即释放中间件资源，这样再次调用中间件接口就不会出现冲突了。对此虽然javascript中也提供了一些方法，例：settimeout、setinterval，但是它们不是真正意义上的多线程，而只是将任务分配到了javascript引擎任务队列的后端，不能实现事件处理与资源释放的同步，需要等到任务队列前端任务都执行完成才能执行。
另一方面，html5标准给web前端开发带来了革命性的变化，大大提高了网页展示的丰富性和交互性。由于浏览器引擎所具备的跨平台性以及javascript脚本开发调试的便捷性，使得web前端开发技术不仅用于网页的开发，还用于移动终端和智能设备的用户界面ui的前端开发。因而，随着html5标准的推行，在智能终端的ui领域，越来越多的厂商开始采用基于浏览器的webui开发模式。其中，canvas是html5标准中一个新的标签，它提供的绘图应用程序编程接口api能够直接调用图像处理单元gpu内的资源，实现对图像绘制的硬件加速，并且可以大幅度提升网页的图像处理性能。
综上所述，现有技术具有下列问题：
1、html5的canvas在频繁调用填充帧数据方法时卡顿严重以及各大浏览器流畅性体验存在技术瓶颈。
2、限制于javascript语言在浏览器中单线程执行的，没有异步能力的缺点。
技术实现要素：
基于此，本发明提出了一种基于多线程优化html5的canvas性能的方法，结合html5webworker多线程处理的能力解决了传统脚本语言单线程同步阻塞式处理能力低下的技术问题。
本发明采用的技术方案是：
一种基于多线程优化html5的canvas性能的方法，首先需要支持html5浏览器，包括以下步骤：
步骤1，获取canvas的offscreencanvas对象；
步骤2，新建webworker对象；
步骤3，将offscreencanvas对象传入worker；
步骤4，在worker处理进程中对传入的offscreencanvas对象进行计算；
步骤5，提交并更新回主线程canvas。
进一步地，步骤1中使用offscreencanvasapi提供的transfercontroltooffscreen方法获取canvas的offscreencanvas对象。
进一步地，步骤3中使用postmessage方法将offscreencanvas对象传入worker。
进一步地，步骤5中使用在worker文件中调用webgl的commit方法，提交并更新回主线程canvas。
进一步地，步骤1和步骤5跨线程访问同一个canvas对象。
本发明基于offscreencanvasapi和html5webworker，完成一个新的优化canvas性能的方法，有益效果如下：
1、可以明显提高前端显示的性能表现，提高画面帧数(fps)。
2、可以充分发挥本地终端硬件性能，包含中央处理器单元(cpu)和图形处理器单元(gpu)，从而降低终端对服务端性能的要求。
3、以多线程方式处理，提高了本地消费服务端推送的图像数据处理能力，解决了传统脚本语言单线程同步阻塞式处理能力低下的问题。
附图说明
图1是本发明流程图。
具体实施方式
本发明结合html5webworker多线程处理的能力，加入多线程处理来优化浏览器图像呈现，优化了canvas性能，需要的技术环境有：javascript，html5，offscreencanvasapi，webgl。下文中，结合附图和实施例对本发明作进一步阐述。
javascript：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html(标准通用标记语言下的一个应用)网页上使用，用来给html网页增加动态功能。
html5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(html)的第五次重大修改。
webworker：一种能独立于html页面创建多线程运行的技术。
html5webworker：html5提供能在浏览器中创建多线程的技术。
canvas：canvasapi(画布)是在html5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用javascript操作的位图(bitmap)。
offscreencanvasapi：一种能提供在屏幕外呈现的接口，可用在浏览器窗口和webworker中。提供了一个可以脱离屏幕渲染的canvas对象，可以让屏幕中canvas根据需求同步或者异步显示offscreencanvas中的帧，提供屏幕帧在屏幕外的运算并能实时返回到屏幕中的能力。
webgl：一种可以绘制2d和3d动态图形的javascriptapi。
图1是本发明流程图，首先需要能支持html5的浏览器，具体步骤为：使用offscreencanvasapi提供的transfercontroltooffscreen方法获取该canvas的offscreencanvas对象，然后新建webworker对象并使用postmessage方法将offscreencanvas对象传入worker进行计算，最后在worker文件中调用webgl的commit方法，提交并更新回主线程canvas。本发明在实施过程中可以跨线程访问同一个canvas对象。
transfercontroltooffscreen：一种能在主线程和webworker中提供控件和offscreen对象转换的方法。
postmessage：webworker中用于主线程和worker交互消息发出数据提交请求的方法。
commit：webgl提供的一个能把画面回传给canvas的方法。
本发明虽然已以较佳实施例公开如上，但其并不是用来限定本发明，任何本领域技术人员在不脱离本发明的精神和范围内，都可以利用上述揭示的方法和技术内容对本发明技术方案做出可能的变动和修改，因此，凡是未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化及修饰，均属于本发明技术方案的保护范围。