丁香婷婷六月,一二区免费视频,日韩精品久久久

純前端表格控件SpreadJS使用教程：電子表格技術(shù)實踐（一）渲染

轉(zhuǎn)帖|使用教程|編輯：龔雪|2021-08-17 10:50:06.157|閱讀 301 次

概述：本文主要為大家介紹前端電子表格技術(shù)實踐之渲染，歡迎下載SpreadJS一起體驗~

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

對于表格在前端的渲染，我們都知道前端復(fù)雜的DOM，會加重瀏覽器渲染負(fù)擔(dān)，而表格這種密集的數(shù)據(jù)展示形式必然會需要大量的DOM來呈現(xiàn)內(nèi)容。

點(diǎn)擊獲取SpreadJS工具下載

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

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

這種Canvas渲染的方式可以說是現(xiàn)在前端渲染這種內(nèi)容豐富表格、圖表的主流方式。

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

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

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

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

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

SpreadJS | 下載試用

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

本文轉(zhuǎn)載自

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：IntelliJ IDEA 中不需要使用鼠標(biāo)的 10 個地方! 下一篇：DevExpress WinForm控件入門指南：什么是Fluent Design用戶界面？