對于表格在前端的渲染，我們都知道前端復雜的DOM，會加重瀏覽器渲染負擔，而表格這種密集的數據展示形式必然會需要大量的DOM來呈現內容。

點擊獲取SpreadJS工具下載

在表格渲染方式上，我們從一開始就采用了HTML 5 Canvas繪制的方式。

我們把Canvas稱之為畫布，因為整個畫布就是一個DOM。這樣不僅解決了因界面復雜而導致的DOM元素過多的問題，更是打破了DOM元素渲染對UI的諸多限制，例如線形，特殊圖形等，通過畫法邏輯，更加精準的UI界面渲染，同時還解決了瀏覽器兼容性的問題。

這種Canvas渲染的方式可以說是現在前端渲染這種內容豐富表格、圖表的主流方式。

在繪制時我們采用了分層繪制。整個繪制引擎根據油畫繪制原理，分為主體圖層和裝飾圖層，主題圖層將會渲染持久的，不會輕易改變的元素，例如背景，單元格，表格線等。而裝飾圖層則會渲染常變性元素，例如選擇框，拖拽框，懸浮效果等。

另外，整個的繪制過程并不是從數據層（Model）直接到視圖層（View）的。我們根據表格內容的特殊性，實現了根據視圖層形狀，從數據層組合出一層專屬視圖層的視圖數據（ViewModel），在配合以上的雙緩存畫布繪制機制，完成整個表格按需繪制的需求，并緩存繪制結果，進一步提升繪制性能。

主體圖層不是直接繪制在用戶能看到的主畫布上，而是繪制在一個看不見的緩存畫布上。在需要渲染時，只需要講緩存畫布的內容克隆到主畫布上，再附加上裝飾圖層元素。這樣，當表格需要更新時候，比如單元格背景改變，只需要在克隆緩存畫布后重繪對應單元格內容即可。

再以表格滾動演示下雙緩存畫布帶來的優勢。

當表格滾動結束，需要重繪，我們會將主畫布清空，從緩存畫布中根據行為上下文進行畫布偏移，將偏移后的圖層直接繪制在主畫布上，隨后在主畫布上繪制偏移后的剩余部分，最后更新緩存。使用緩存畫布，大大提升了繪制性能，使整個滾動過程更加流暢、順滑。

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華為、蘇寧易購、天弘基金等行業龍頭企業的青睞，并被中國軟件行業協會認定為“中國優秀軟件產品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協同編輯、 數據填報、 類 Excel 報表設計等業務場景需求，極大的降低企業研發成本和項目交付風險。

本文轉載自