[发明专利]基于多线程优化HTML5的Canvas性能的方法

说明书

技术领域

本发明涉及计算机技术领域，特别涉及一种基于多线程优化HTML5的Canvas性能的方法。

背景技术

现阶段互联网行业飞速发展，各种Web应用层出不穷，中间件技术的使用提供了上层应用与底层系统软件或服务程序之间的桥梁，屏蔽了操作系统或服务的复杂性，实现了各种技术之间的资源共享，减少了程序设计的复杂性。Web应用与中间件通过接口和事件通讯，应用调用中间件接口，中间件通过事件进行反馈，事件发生时触发在Web应用中绑定的代码完成处理任务。JavaScript是一种在Web应用开发中广泛使用的直译式脚本语言，可以实现在HTML页面嵌入动态文本，对浏览器事件做出响应，对即将提交到服务器的数据进行验证，对访客信息进行检测等等功能，非常强大，但是众所周知，Javascript语言的执行环境是相对单纯的“单线程”(single thread)，所有任务顺序执行，一方面限制了处理速度，另一方面应用技术的扩展也受到了局限。目前多线程技术在服务端已经发展的很成熟了，但是在Web端的应用中却一直是鸡肋，中间件调用又是Web开发不可获取的组成部分，直接影响了中间件的调用。在Web应用中调用中间件有时需要中间件的事件反馈，这时如果需要再次调用中间件接口，需要等到事件处理完成中间件资源释放后，才能再次调用中间件接口，而无法实现嵌套调用。这种处理方式耗时较长，对界面响应产生很大影响，用户体验较差。如果能在JavaScript接到中间件事件反馈后就能立即释放中间件资源，这样再次调用中间件接口就不会出现冲突了。对此虽然JavaScript中也提供了一些方法，例：setTimeout、setInterval，但是它们不是真正意义上的多线程，而只是将任务分配到了JavaScript引擎任务队列的后端，不能实现事件处理与资源释放的同步，需要等到任务队列前端任务都执行完成才能执行。

另一方面，HTML5标准给Web前端开发带来了革命性的变化，大大提高了网页展示的丰富性和交互性。由于浏览器引擎所具备的跨平台性以及JavaScript脚本开发调试的便捷性，使得Web前端开发技术不仅用于网页的开发，还用于移动终端和智能设备的用户界面UI的前端开发。因而，随着HTML5标准的推行，在智能终端的UI领域，越来越多的厂商开始采用基于浏览器的Web UI开发模式。其中，Canvas是HTML5标准中一个新的标签，它提供的绘图应用程序编程接口API能够直接调用图像处理单元GPU内的资源，实现对图像绘制的硬件加速，并且可以大幅度提升网页的图像处理性能。

综上所述，现有技术具有下列问题：

1、HTML5的Canvas在频繁调用填充帧数据方法时卡顿严重以及各大浏览器流畅性体验存在技术瓶颈。

2、限制于JavaScript语言在浏览器中单线程执行的，没有异步能力的缺点。

发明内容

基于此，本发明提出了一种基于多线程优化HTML5的Canvas性能的方法，结合HTML5 Webworker多线程处理的能力解决了传统脚本语言单线程同步阻塞式处理能力低下的技术问题。

本发明采用的技术方案是：

一种基于多线程优化HTML5的Canvas性能的方法，首先需要支持HTML5浏览器，包括以下步骤：

步骤1，获取Canvas的Offscreen canvas对象；

步骤2，新建webworker对象；

步骤3，将Offscreen canvas对象传入worker；

步骤4，在worker处理进程中对传入的Offscreen canvas对象进行计算；

步骤5，提交并更新回主线程Canvas。

进一步地，步骤1中使用Offscreen canvas API提供的transferControlToOffscreen方法获取Canvas的Offscreen canvas对象。

进一步地，步骤3中使用postmessage方法将Offscreen canvas对象传入worker。

进一步地，步骤5中使用在worker文件中调用webgl的commit方法，提交并更新回主线程Canvas。

进一步地，步骤1和步骤5跨线程访问同一个Canvas对象。

本发明基于Offscreen canvas API和HTML5 Webworker，完成一个新的优化Canvas性能的方法，有益效果如下：

1、可以明显提高前端显示的性能表现，提高画面帧数(FPS)。