[發明專利]基于多線程優化HTML5的Canvas性能的方法

在審

• 申請號: 201710366025.7
• 申請日: 2017-05-22
• 公開（公告）號: CN107193952A
• 公開（公告）日: 2017-09-22
• 發明（設計）人: 鄧本燁;謝志軍
• 申請（專利權）人: 千尋位置網絡有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30;G06F9/54
• 代理公司: 上海市海華永泰律師事務所31302
• 代理人: 包文超

技術領域

本發明涉及計算機技術領域，特別涉及一種基于多線程優化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)。