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

SpreadJS最新正式版下載

一、什么是Canvas

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

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

二、 引入Canvas的重要性

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

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

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

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

三、計算與渲染

把動畫的一幀渲染出來，需要經(jīng)過以下步驟：

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

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

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

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

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

DOM駐留模式

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

Canvas快速模式

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

分層提高Canvas性能

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

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

視野之外的繪制

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

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

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

五、Canvas的應(yīng)用

之前探討了SVG和Canvas的繪制性能差異以及Canvas常見的優(yōu)化方法。知道，對于使用快速模式渲染的Canvas來說，瀏覽器的每次重繪都是由代碼驅(qū)動的，無須進行多層解析，因此它的速度非常快。除了速度快之外，Canvas的靈活性也顯著優(yōu)于DOM。可以通過代碼精確控制何時以及如何繪制出期望的效果。

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

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

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

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

六、總結(jié)

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

本文內(nèi)容源自