本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，特別涉及一種基于多線程優(yōu)化html5的canvas性能的方法。

背景技術(shù)：

現(xiàn)階段互聯(lián)網(wǎng)行業(yè)飛速發(fā)展，各種web應(yīng)用層出不窮，中間件技術(shù)的使用提供了上層應(yīng)用與底層系統(tǒng)軟件或服務(wù)程序之間的橋梁，屏蔽了操作系統(tǒng)或服務(wù)的復(fù)雜性，實(shí)現(xiàn)了各種技術(shù)之間的資源共享，減少了程序設(shè)計(jì)的復(fù)雜性。web應(yīng)用與中間件通過接口和事件通訊，應(yīng)用調(diào)用中間件接口，中間件通過事件進(jìn)行反饋，事件發(fā)生時(shí)觸發(fā)在web應(yīng)用中綁定的代碼完成處理任務(wù)。javascript是一種在web應(yīng)用開發(fā)中廣泛使用的直譯式腳本語言，可以實(shí)現(xiàn)在html頁面嵌入動(dòng)態(tài)文本，對瀏覽器事件做出響應(yīng)，對即將提交到服務(wù)器的數(shù)據(jù)進(jìn)行驗(yàn)證，對訪客信息進(jìn)行檢測等等功能，非常強(qiáng)大，但是眾所周知，javascript語言的執(zhí)行環(huán)境是相對單純的“單線程”(singlethread)，所有任務(wù)順序執(zhí)行，一方面限制了處理速度，另一方面應(yīng)用技術(shù)的擴(kuò)展也受到了局限。目前多線程技術(shù)在服務(wù)端已經(jīng)發(fā)展的很成熟了，但是在web端的應(yīng)用中卻一直是雞肋，中間件調(diào)用又是web開發(fā)不可獲取的組成部分，直接影響了中間件的調(diào)用。在web應(yīng)用中調(diào)用中間件有時(shí)需要中間件的事件反饋，這時(shí)如果需要再次調(diào)用中間件接口，需要等到事件處理完成中間件資源釋放后，才能再次調(diào)用中間件接口，而無法實(shí)現(xiàn)嵌套調(diào)用。這種處理方式耗時(shí)較長，對界面響應(yīng)產(chǎn)生很大影響，用戶體驗(yàn)較差。如果能在javascript接到中間件事件反饋后就能立即釋放中間件資源，這樣再次調(diào)用中間件接口就不會(huì)出現(xiàn)沖突了。對此雖然javascript中也提供了一些方法，例：settimeout、setinterval，但是它們不是真正意義上的多線程，而只是將任務(wù)分配到了javascript引擎任務(wù)隊(duì)列的后端，不能實(shí)現(xiàn)事件處理與資源釋放的同步，需要等到任務(wù)隊(duì)列前端任務(wù)都執(zhí)行完成才能執(zhí)行。

另一方面，html5標(biāo)準(zhǔn)給web前端開發(fā)帶來了革命性的變化，大大提高了網(wǎng)頁展示的豐富性和交互性。由于瀏覽器引擎所具備的跨平臺(tái)性以及javascript腳本開發(fā)調(diào)試的便捷性，使得web前端開發(fā)技術(shù)不僅用于網(wǎng)頁的開發(fā)，還用于移動(dòng)終端和智能設(shè)備的用戶界面ui的前端開發(fā)。因而，隨著html5標(biāo)準(zhǔn)的推行，在智能終端的ui領(lǐng)域，越來越多的廠商開始采用基于瀏覽器的webui開發(fā)模式。其中，canvas是html5標(biāo)準(zhǔn)中一個(gè)新的標(biāo)簽，它提供的繪圖應(yīng)用程序編程接口api能夠直接調(diào)用圖像處理單元gpu內(nèi)的資源，實(shí)現(xiàn)對圖像繪制的硬件加速，并且可以大幅度提升網(wǎng)頁的圖像處理性能。

綜上所述，現(xiàn)有技術(shù)具有下列問題：

1、html5的canvas在頻繁調(diào)用填充幀數(shù)據(jù)方法時(shí)卡頓嚴(yán)重以及各大瀏覽器流暢性體驗(yàn)存在技術(shù)瓶頸。

2、限制于javascript語言在瀏覽器中單線程執(zhí)行的，沒有異步能力的缺點(diǎn)。

技術(shù)實(shí)現(xiàn)要素：

基于此，本發(fā)明提出了一種基于多線程優(yōu)化html5的canvas性能的方法，結(jié)合html5webworker多線程處理的能力解決了傳統(tǒng)腳本語言單線程同步阻塞式處理能力低下的技術(shù)問題。

本發(fā)明采用的技術(shù)方案是：

一種基于多線程優(yōu)化html5的canvas性能的方法，首先需要支持html5瀏覽器，包括以下步驟：

步驟1，獲取canvas的offscreencanvas對象；

步驟2，新建webworker對象；

步驟3，將offscreencanvas對象傳入worker；

步驟4，在worker處理進(jìn)程中對傳入的offscreencanvas對象進(jìn)行計(jì)算；

步驟5，提交并更新回主線程canvas。

進(jìn)一步地，步驟1中使用offscreencanvasapi提供的transfercontroltooffscreen方法獲取canvas的offscreencanvas對象。

進(jìn)一步地，步驟3中使用postmessage方法將offscreencanvas對象傳入worker。

進(jìn)一步地，步驟5中使用在worker文件中調(diào)用webgl的commit方法，提交并更新回主線程canvas。

進(jìn)一步地，步驟1和步驟5跨線程訪問同一個(gè)canvas對象。

本發(fā)明基于offscreencanvasapi和html5webworker，完成一個(gè)新的優(yōu)化canvas性能的方法，有益效果如下：

1、可以明顯提高前端顯示的性能表現(xiàn)，提高畫面幀數(shù)(fps)。

2、可以充分發(fā)揮本地終端硬件性能，包含中央處理器單元(cpu)和圖形處理器單元(gpu)，從而降低終端對服務(wù)端性能的要求。

3、以多線程方式處理，提高了本地消費(fèi)服務(wù)端推送的圖像數(shù)據(jù)處理能力，解決了傳統(tǒng)腳本語言單線程同步阻塞式處理能力低下的問題。

附圖說明

圖1是本發(fā)明流程圖。

具體實(shí)施方式

本發(fā)明結(jié)合html5webworker多線程處理的能力，加入多線程處理來優(yōu)化瀏覽器圖像呈現(xiàn)，優(yōu)化了canvas性能，需要的技術(shù)環(huán)境有：javascript，html5，offscreencanvasapi，webgl。下文中，結(jié)合附圖和實(shí)施例對本發(fā)明作進(jìn)一步闡述。

javascript：一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為javascript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在html(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用)網(wǎng)頁上使用，用來給html網(wǎng)頁增加動(dòng)態(tài)功能。

html5：萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言(html)的第五次重大修改。

webworker：一種能獨(dú)立于html頁面創(chuàng)建多線程運(yùn)行的技術(shù)。

html5webworker：html5提供能在瀏覽器中創(chuàng)建多線程的技術(shù)。

canvas：canvasapi(畫布)是在html5中新增的標(biāo)簽用于在網(wǎng)頁實(shí)時(shí)生成圖像，并且可以操作圖像內(nèi)容，基本上它是一個(gè)可以用javascript操作的位圖(bitmap)。

offscreencanvasapi：一種能提供在屏幕外呈現(xiàn)的接口，可用在瀏覽器窗口和webworker中。提供了一個(gè)可以脫離屏幕渲染的canvas對象，可以讓屏幕中canvas根據(jù)需求同步或者異步顯示offscreencanvas中的幀，提供屏幕幀在屏幕外的運(yùn)算并能實(shí)時(shí)返回到屏幕中的能力。

webgl：一種可以繪制2d和3d動(dòng)態(tài)圖形的javascriptapi。

圖1是本發(fā)明流程圖，首先需要能支持html5的瀏覽器，具體步驟為：使用offscreencanvasapi提供的transfercontroltooffscreen方法獲取該canvas的offscreencanvas對象，然后新建webworker對象并使用postmessage方法將offscreencanvas對象傳入worker進(jìn)行計(jì)算，最后在worker文件中調(diào)用webgl的commit方法，提交并更新回主線程canvas。本發(fā)明在實(shí)施過程中可以跨線程訪問同一個(gè)canvas對象。

transfercontroltooffscreen：一種能在主線程和webworker中提供控件和offscreen對象轉(zhuǎn)換的方法。

postmessage：webworker中用于主線程和worker交互消息發(fā)出數(shù)據(jù)提交請求的方法。

commit：webgl提供的一個(gè)能把畫面回傳給canvas的方法。

本發(fā)明雖然已以較佳實(shí)施例公開如上，但其并不是用來限定本發(fā)明，任何本領(lǐng)域技術(shù)人員在不脫離本發(fā)明的精神和范圍內(nèi)，都可以利用上述揭示的方法和技術(shù)內(nèi)容對本發(fā)明技術(shù)方案做出可能的變動(dòng)和修改，因此，凡是未脫離本發(fā)明技術(shù)方案的內(nèi)容，依據(jù)本發(fā)明的技術(shù)實(shí)質(zhì)對以上實(shí)施例所作的任何簡單修改、等同變化及修飾，均屬于本發(fā)明技術(shù)方案的保護(hù)范圍。