CN107193952A - 基于多线程优化HTML5的Canvas性能的方法 - Google Patents
基于多线程优化HTML5的Canvas性能的方法 Download PDFInfo
- Publication number
- CN107193952A CN107193952A CN201710366025.7A CN201710366025A CN107193952A CN 107193952 A CN107193952 A CN 107193952A CN 201710366025 A CN201710366025 A CN 201710366025A CN 107193952 A CN107193952 A CN 107193952A
- Authority
- CN
- China
- Prior art keywords
- canvas
- offscreen
- objects
- html5
- multithreading
- 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
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供一种基于多线程优化HTML5的Canvas性能的方法，首先需要支持HTML5的浏览器，使用Offscreen canvas API提供的transferControlTo Offscreen方法获取该canvas的Offscreen canvas对象，然后新建webworker对象并使用postmessage方法将Offscreen canvas对象传入worker进行计算，最后在worker文件中调用webgl的commit方法，提交并更新回主线程canvas。本发明结合HTML5 webworker多线程处理的能力解决了canvas性能瓶颈难题。
Description
技术领域
本发明涉及计算机技术领域，特别涉及一种基于多线程优化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)。
2、可以充分发挥本地终端硬件性能，包含中央处理器单元(CPU)和图形处理器单元(GPU)，从而降低终端对服务端性能的要求。
3、以多线程方式处理，提高了本地消费服务端推送的图像数据处理能力，解决了传统脚本语言单线程同步阻塞式处理能力低下的问题。
附图说明
图1是本发明流程图。
具体实施方式
本发明结合HTML5 Webworker多线程处理的能力，加入多线程处理来优化浏览器图像呈现，优化了Canvas性能，需要的技术环境有：JavaScript，HTML5，Offscreen canvasAPI，webGL。下文中，结合附图和实施例对本发明作进一步阐述。
JavaScript：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。
HTML5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。
Webworker：一种能独立于HTML页面创建多线程运行的技术。
HTML5 Webworker：HTML5提供能在浏览器中创建多线程的技术。
Canvas：Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图(bitmap)。
Offscreen canvas API：一种能提供在屏幕外呈现的接口，可用在浏览器窗口和webworker中。提供了一个可以脱离屏幕渲染的Canvas对象，可以让屏幕中canvas根据需求同步或者异步显示OffscreenCanvas中的帧，提供屏幕帧在屏幕外的运算并能实时返回到屏幕中的能力。
webGL：一种可以绘制2D和3D动态图形的JavaScriptAPI。
图1是本发明流程图，首先需要能支持HTML5的浏览器，具体步骤为：使用Offscreen canvas API提供的TransferControlToOffscreen方法获取该Canvas的Offscreen canvas对象，然后新建Webworker对象并使用postmessage方法将Offscreencanvas对象传入worker进行计算，最后在worker文件中调用webGL的commit方法，提交并更新回主线程Canvas。本发明在实施过程中可以跨线程访问同一个Canvas对象。
TransferControlToOffscreen：一种能在主线程和Webworker中提供控件和Offscreen对象转换的方法。
postmessage：webworker中用于主线程和worker交互消息发出数据提交请求的方法。
commit：WebGL提供的一个能把画面回传给Canvas的方法。
本发明虽然已以较佳实施例公开如上，但其并不是用来限定本发明，任何本领域技术人员在不脱离本发明的精神和范围内，都可以利用上述揭示的方法和技术内容对本发明技术方案做出可能的变动和修改，因此，凡是未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化及修饰，均属于本发明技术方案的保护范围。
Claims (5)
1.一种基于多线程优化HTML5的Canvas性能的方法，其特征在于，支持HTML5浏览器，包括以下步骤：
步骤1，获取Canvas的Offscreen canvas对象；
步骤2，新建webworker对象；
步骤3，将Offscreen canvas对象传入worker；
步骤4，在worker处理进程中对传入的Offscreen canvas对象进行计算；
步骤5，提交并更新回主线程Canvas。
2.如权利要求1中所述的一种基于多线程优化HTML5的Canvas性能的方法，其特征在于，步骤1中使用Offscreen canvas API提供的transferControlToOffscreen方法获取Canvas的Offscreen canvas对象。
3.如权利要求1中所述的一种基于多线程优化HTML5的Canvas性能的方法，其特征在于，步骤3中使用postmessage方法将Offscreen canvas对象传入worker。
4.如权利要求1中所述的一种基于多线程优化HTML5的Canvas性能的方法，其特征在于，步骤5中使用在worker文件中调用webgl的commit方法，提交并更新回主线程Canvas。
5.如权利要求1中所述的一种基于多线程优化HTML5的Canvas性能的方法，其特征在于，步骤1和步骤5跨线程访问同一个Canvas对象。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710366025.7A CN107193952A (zh) | 2017-05-22 | 2017-05-22 | 基于多线程优化HTML5的Canvas性能的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710366025.7A CN107193952A (zh) | 2017-05-22 | 2017-05-22 | 基于多线程优化HTML5的Canvas性能的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107193952A true CN107193952A (zh) | 2017-09-22 |
Family
ID=59874873
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710366025.7A Pending CN107193952A (zh) | 2017-05-22 | 2017-05-22 | 基于多线程优化HTML5的Canvas性能的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107193952A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108563517A (zh) * | 2018-03-30 | 2018-09-21 | 腾讯科技（深圳）有限公司 | 系统接口的调用方法及装置 |
| CN111080766A (zh) * | 2019-12-30 | 2020-04-28 | 中科星图股份有限公司 | 一种基于WebGL的GPU加速海量目标高效渲染方法 |
| WO2021232294A1 (zh) * | 2020-05-20 | 2021-11-25 | 京东方科技集团股份有限公司 | 笔迹绘制方法、装置、电子设备、介质和程序产品 |
-
2017
- 2017-05-22 CN CN201710366025.7A patent/CN107193952A/zh active Pending
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108563517A (zh) * | 2018-03-30 | 2018-09-21 | 腾讯科技（深圳）有限公司 | 系统接口的调用方法及装置 |
| CN108563517B (zh) * | 2018-03-30 | 2020-11-03 | 腾讯科技（深圳）有限公司 | 系统接口的调用方法及装置 |
| CN111080766A (zh) * | 2019-12-30 | 2020-04-28 | 中科星图股份有限公司 | 一种基于WebGL的GPU加速海量目标高效渲染方法 |
| CN111080766B (zh) * | 2019-12-30 | 2023-09-01 | 中科星图股份有限公司 | 一种基于WebGL的GPU加速海量目标高效渲染方法 |
| WO2021232294A1 (zh) * | 2020-05-20 | 2021-11-25 | 京东方科技集团股份有限公司 | 笔迹绘制方法、装置、电子设备、介质和程序产品 |
| US11561637B2 (en) | 2020-05-20 | 2023-01-24 | Boe Technology Group Co., Ltd. | Method and device of drawing handwriting track, electronic apparatus, medium, and program product |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110096277B (zh) | 一种动态页面展示方法、装置、电子设备及存储介质 | |
| CN103034729B (zh) | 网页绘制系统和方法 | |
| RU2439675C2 (ru) | Эффективное кодирование альтернативных графических наборов | |
| US8549395B2 (en) | Method and system for transforming an integrated webpage | |
| CN107992301A (zh) | 用户界面实现方法、客户端及存储介质 | |
| CN103853417B (zh) | 网络动态图片的滚动分页显示方法和装置 | |
| CN102932390B (zh) | 一种网络请求的处理方法和系统、网络服务提供装置 | |
| WO2017088509A1 (zh) | 一种页面定制化的方法和装置 | |
| JP2000514944A (ja) | オブジェクト指向プログラミング言語のためのハードウェア加速器 | |
| US20150220496A1 (en) | Dynamic sprite based theme switching | |
| CN107193952A (zh) | 基于多线程优化HTML5的Canvas性能的方法 | |
| CN104881273B (zh) | 一种网页渲染的分析方法和终端设备 | |
| CN104932892B (zh) | 一种基于WebWorker实现的Web应用中间件异步嵌套调用方法 | |
| US9679075B1 (en) | Efficient delivery of animated image files | |
| CN104866318A (zh) | 一种多窗口中标签页的展示方法及装置 | |
| WO2022048141A9 (zh) | 一种图像处理方法及装置、计算机可读存储介质 | |
| CN106469073A (zh) | 显示应用程序闪屏图像的方法和装置 | |
| CN103559097B (zh) | 一种浏览器中进程间通信的方法、装置和浏览器 | |
| CN103309695A (zh) | 一种加载图标的方法和终端 | |
| CN105955714A (zh) | 混合开发前端mvc框架实现方法和系统 | |
| US20150262322A1 (en) | Rendering of graphics on a display device | |
| US20200134892A1 (en) | Smart visualization transformation for intuitive presentations | |
| CN111880789A (zh) | 页面渲染方法、装置、服务端和计算机可读存储介质 | |
| EP1011042B1 (en) | Applet and application display in embedded systems using bufferless child graphics contexts | |
| US20210117170A1 (en) | Wrapping method, registration method, device, and rendering apparatus |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170922 |
|
| RJ01 | Rejection of invention patent application after publication |