SpreadJS結(jié)合40余年專業(yè)控件技術(shù)和在電子表格應(yīng)用領(lǐng)域的經(jīng)驗(yàn)而推出的純前端表格控件，基于 HTML5，兼容 450 多種 Excel 公式，具備“高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、明源云、遠(yuǎn)光軟件等知名企業(yè)青睞，被中國(guó)軟件行業(yè)協(xié)會(huì)認(rèn)定為“中國(guó)優(yōu)秀軟件產(chǎn)品”。SpreadJS在界面和功能上與 Excel 高度類似，但又不局限于 Excel，而是為企業(yè)信息化系統(tǒng)提供 表格文檔協(xié)同編輯、 數(shù)據(jù)填報(bào) 和 類 Excel 報(bào)表設(shè)計(jì) 的應(yīng)用場(chǎng)景支持，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

SpreadJS最新正式版下載

一、什么是Canvas

想必學(xué)習(xí)前端的同學(xué)們對(duì)Canvas 都不陌生，它是 HTML5 新增的“畫(huà)布”元素，可以使用JavaScript來(lái)繪制圖形。

Canvas元素是在HTML5中新增的標(biāo)簽用于在網(wǎng)頁(yè)實(shí)時(shí)生成圖像，并且可以操作圖像內(nèi)容，基本上它是一個(gè)可以用JavaScript操作的位圖（bitmap）。Canvas 由一個(gè)可繪制區(qū)域HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼可以訪問(wèn)該區(qū)域，通過(guò)一套完整的繪圖功能的API生成動(dòng)態(tài)的圖形。

二、 引入Canvas的重要性

HTML5 在 2012 年已形成了穩(wěn)定的版本，在此之前很長(zhǎng)一段時(shí)間，開(kāi)發(fā)者們繪制圖形選擇的方案更多是SVG來(lái)實(shí)現(xiàn)。SVG使用XML來(lái)定義圖形，就像使用HTML標(biāo)簽一樣來(lái)控制元素的排布，SVG的本質(zhì)就是一個(gè)DOM元素。當(dāng)圖形內(nèi)容太過(guò)豐富后，性能和內(nèi)存上就會(huì)大打折扣。一旦涉及頻繁的圖片繪制場(chǎng)景，這個(gè)實(shí)現(xiàn)對(duì)于用戶的體驗(yàn)將是毀滅性的。

渲染動(dòng)畫(huà)的基本原理，無(wú)非是反復(fù)地擦除和重繪。為了動(dòng)畫(huà)的流暢，留給開(kāi)發(fā)者渲染一幀的時(shí)間，只有短短的 16.67ms。在這16.67ms中，我不僅需要處理一些繪制邏輯，計(jì)算每個(gè)對(duì)象的位置、狀態(tài)，還需要把它們都畫(huà)出來(lái)。如果消耗的時(shí)間稍稍多了一些，用戶就會(huì)感受到“卡頓”。所以，在編寫(xiě)動(dòng)畫(huà)時(shí)，開(kāi)發(fā)者們無(wú)時(shí)無(wú)刻不擔(dān)憂著動(dòng)畫(huà)的性能，唯恐渲染的耗時(shí)過(guò)長(zhǎng)。

 在現(xiàn)代 Web 開(kāi)發(fā)中，開(kāi)發(fā)者們更多的會(huì)借助 Canvas 提供的API去繪制上下文，可以自由繪制各種2D和3D圖形，創(chuàng)建富有視覺(jué)沖擊力的游戲場(chǎng)景和角色。Canvas的使用可以使得游戲能夠?qū)崿F(xiàn)流暢的動(dòng)態(tài)效果和用戶交互。無(wú)論是簡(jiǎn)單的小游戲還是復(fù)雜的游戲引擎，Canvas 都被廣泛應(yīng)用。

下面是做的一個(gè)簡(jiǎn)單的對(duì)比試驗(yàn)，可以很明顯感受到兩者的差距，分別使用SVG和Canvas繪制一個(gè)包含著100w個(gè)圓形的500*500的圖片，根據(jù)耗時(shí)計(jì)算對(duì)比，Canvas耗費(fèi)的時(shí)間幾乎只有SVG的一半：

三、計(jì)算與渲染

把動(dòng)畫(huà)的一幀渲染出來(lái)，需要經(jīng)過(guò)以下步驟：

• 計(jì)算：處理網(wǎng)頁(yè)渲染邏輯，計(jì)算每個(gè)對(duì)象的狀態(tài)和位置。
• 渲染：真正把對(duì)象繪制出來(lái)。
• JavaScript 調(diào)用 DOM API（包括 Canvas API）以進(jìn)行渲染。
• 瀏覽器（通常是另一個(gè)渲染線程）把渲染后的結(jié)果呈現(xiàn)在屏幕上的過(guò)程。

之前提到過(guò)，在動(dòng)畫(huà)設(shè)計(jì)和開(kāi)發(fā)中，每幀只有16.67毫秒的時(shí)間用于渲染。這個(gè)數(shù)值是通過(guò)計(jì)算每秒60幀得出的平均每幀渲染時(shí)間。實(shí)際上，并不是所有設(shè)備都能夠穩(wěn)定地達(dá)到60FPS。因此，為了確保在不同設(shè)備上實(shí)現(xiàn)一致性的動(dòng)畫(huà)效果，最好將每幀的渲染時(shí)間控制在10毫秒以內(nèi)。

大家都知道，通常情況下，渲染的開(kāi)銷遠(yuǎn)大于計(jì)算（相差3~4個(gè)量級(jí)）。除非使用了一些時(shí)間復(fù)雜度很高的算法，否則不需要過(guò)于深入優(yōu)化計(jì)算環(huán)節(jié)。Canvas的渲染是在JavaScript引擎中執(zhí)行繪制邏輯，通過(guò)構(gòu)建畫(huà)布在內(nèi)存中，并遍歷所有像素點(diǎn)的顏色，最終輸出到屏幕上。這種強(qiáng)大的功能可能會(huì)增加學(xué)習(xí)成本，但如今仍然有很多開(kāi)發(fā)者選擇和接受Canvas，這要?dú)w功于Canvas最大的優(yōu)勢(shì)：渲染性能的出色表現(xiàn)。

四、Canvas渲染性能優(yōu)勢(shì)

當(dāng)談?wù)搱D形渲染技術(shù)時(shí)，就不得不提到DOM駐留模式和Canvas快速模式。

DOM駐留模式

DOM駐留模式是一種基于文檔對(duì)象模型（DOM）的渲染技術(shù)。在DOM駐留模式下，頁(yè)面的布局和樣式是由DOM樹(shù)來(lái)掌管的。當(dāng)頁(yè)面需要更新時(shí)，瀏覽器會(huì)重新計(jì)算布局和樣式并重新渲染。此模式非常靈活，特別適用于處理動(dòng)態(tài)頁(yè)面交互和多樣化的樣式控制。然而，由于需要頻繁地重新計(jì)算布局和樣式，對(duì)于復(fù)雜的圖形渲染任務(wù)來(lái)說(shuō)，性能開(kāi)銷相對(duì)較高。

Canvas快速模式

Canvas快速模式利用HTML5的Canvas元素進(jìn)行圖形渲染。在這種模式下，開(kāi)發(fā)者可以使用Canvas提供的2D或3D繪圖API直接在畫(huà)布上繪制圖形。相比于DOM駐留模式，Canvas快速模式更加高效。它不關(guān)心頁(yè)面的布局和樣式，而是在需要時(shí)只重繪受影響的部分。這樣就避免了頻繁的布局和樣式計(jì)算，提高了渲染性能。

分層提高Canvas性能

開(kāi)發(fā)者們通過(guò)分析大量實(shí)際場(chǎng)景，總結(jié)出一套可以進(jìn)一步提升Canvas性能的策略，即對(duì)變化較少和變化較多的內(nèi)容進(jìn)行分開(kāi)渲染。這種策略就是所謂的分層Canvas。它能夠顯著降低完全沒(méi)有必要的渲染性能開(kāi)銷。分層渲染的思想被廣泛應(yīng)用于各種圖形相關(guān)的領(lǐng)域，從古老的皮影戲、套色印刷術(shù)，到現(xiàn)代電影/游戲工業(yè)以及虛擬現(xiàn)實(shí)領(lǐng)域等等。而分層Canvas只是分層渲染思想在Canvas動(dòng)畫(huà)上的一個(gè)基礎(chǔ)應(yīng)用。

分層Canvas的核心理念是，動(dòng)態(tài)頁(yè)面中的每種元素（層）對(duì)于渲染頻率的需求是不同的。對(duì)于許多金融會(huì)計(jì)等大數(shù)據(jù)行業(yè)的從業(yè)者來(lái)說(shuō)，主要數(shù)據(jù)內(nèi)容的變化頻率和幅度較大（他們通常面臨數(shù)據(jù)變動(dòng)和頻繁計(jì)算），而背景表格樣式的變化頻率或幅度相對(duì)較?。ɑ静蛔?，或者變化緩慢，或者僅在特定時(shí)機(jī)變化）。因此，需要頻繁更新和重繪數(shù)據(jù)，但對(duì)于背景，可能只需要繪制一次，或者每隔200毫秒才重繪一次，而沒(méi)有必要每16毫秒就重繪一次。

視野之外的繪制

 在許多情況下，Canvas 僅僅作為數(shù)據(jù)展示頁(yè)面的一部分，充當(dāng)著一個(gè)“窗口”的角色。如果在每次數(shù)據(jù)更新時(shí)，都將所有數(shù)據(jù)完全繪制到 Canvas 上，很可能會(huì)出現(xiàn)大量?jī)?nèi)容繪制到Canvas 范圍之外的情況。雖然調(diào)用了繪制 API，但實(shí)際上并沒(méi)有產(chǎn)生任何效果。

因此，判斷對(duì)象是否位于 Canvas 范圍內(nèi)需要進(jìn)行額外的計(jì)算（例如，需要通過(guò)對(duì)游戲角色的全局模型矩陣求逆來(lái)得出對(duì)象的世界坐標(biāo)，這是一項(xiàng)相對(duì)耗時(shí)的操作），同時(shí)也會(huì)增加代碼的復(fù)雜性。因此，關(guān)鍵是是否需要這樣做。

通過(guò)在本地代碼中進(jìn)行測(cè)試，比較了在視野內(nèi)和視野外分別繪制100萬(wàn)個(gè)圓的耗時(shí)。在視野內(nèi)繪制耗時(shí)8936ms，而在視野外繪制耗時(shí)2540ms?？紤]到計(jì)算和繪制之間的耗時(shí)差距在3~4個(gè)數(shù)量級(jí)，因此通過(guò)計(jì)算來(lái)判斷并避免繪制視野外的內(nèi)容是一種非常有效的方法。

五、Canvas的應(yīng)用

之前探討了SVG和Canvas的繪制性能差異以及Canvas常見(jiàn)的優(yōu)化方法。知道，對(duì)于使用快速模式渲染的Canvas來(lái)說(shuō)，瀏覽器的每次重繪都是由代碼驅(qū)動(dòng)的，無(wú)須進(jìn)行多層解析，因此它的速度非?？臁３怂俣瓤熘?，Canvas的靈活性也顯著優(yōu)于DOM?？梢酝ㄟ^(guò)代碼精確控制何時(shí)以及如何繪制出期望的效果。

在資源消耗方面，DOM的駐留模式意味著場(chǎng)景中的每一個(gè)新增元素都會(huì)導(dǎo)致額外的內(nèi)存消耗，而Canvas則沒(méi)有這個(gè)問(wèn)題。這種差異在頁(yè)面元素?cái)?shù)量增多時(shí)尤為明顯。

在Canvas出現(xiàn)之前，前端渲染表格只能通過(guò)構(gòu)建復(fù)雜的DOM來(lái)實(shí)現(xiàn)。然而，這種方式會(huì)導(dǎo)致瀏覽器性能成為Web應(yīng)用的瓶頸，許多開(kāi)發(fā)人員因此放棄了在瀏覽器上實(shí)現(xiàn)電子表格的想法。

Canvas出現(xiàn)后，其快速模式帶來(lái)的出色性能優(yōu)勢(shì)成為了一大亮點(diǎn)，大量、復(fù)雜的DOM渲染處理所帶來(lái)的性能問(wèn)題因此有了解決之道。

回到電子表格的應(yīng)用場(chǎng)景，現(xiàn)在已經(jīng)出現(xiàn)了使用Canvas繪制畫(huà)布的表格組件。這類組件在渲染數(shù)據(jù)層時(shí)無(wú)須重復(fù)創(chuàng)建和銷毀DOM元素，而且在畫(huà)布的繪制過(guò)程中受到的限制也比DOM元素渲染更少。其中，葡萄城公司的純前端表格控件——SpreadJS就用到了Canvas實(shí)現(xiàn)表格繪制，除了表格之外，Canvas也為數(shù)字孿生可視化大屏、頁(yè)面游戲等應(yīng)用場(chǎng)景帶來(lái)了變革。

六、總結(jié)

本文通過(guò)介紹Canvas的原理、Canvas的重要性、Canvas在計(jì)算與渲染上的作用、Canvas渲染性能優(yōu)勢(shì)和Canvas的應(yīng)用這五個(gè)部分，全面而系統(tǒng)地闡述了HTML Canvas在高性能渲染方面的相關(guān)知識(shí)和技巧。希望讀者通過(guò)閱讀本文能夠深入了解Canvas的基本原理和特性，認(rèn)識(shí)到Canvas在Web開(kāi)發(fā)中的重要性，并掌握Canvas在計(jì)算與渲染上的作用。

本文內(nèi)容源自