首页 > 其他分享 >怎样实现纯前端百万行数据秒级响应

怎样实现纯前端百万行数据秒级响应

时间:2023-03-23 17:22:18浏览次数:49  
标签:集算表 Data 前端 Manager 秒级 Table Sheet 数据 百万

前端表格控件SpreadJS 推出了新的功能集算表功能。集算表 (Table Sheet)是一个具备高性能渲染、数据绑定功能、公式计算能力的数据表格,通过全新构建的关系型数据管理器结合结构化公式,在高性能表格的基础上提供排序、筛选、样式、行列冻结、自动更新、单元格更新等功能。

 

什么是集算表(Table Sheet)?

集算表是一个具有网络状行为和电子表格用户界面的快速数据绑定表的视图。

众所周知Excel的工作表(Work Sheet)是一个自由式布局,基于单元格(Cell Base)的表格,适用于一些松散式的数据布局展示,布局上来说非常灵活,但对于固定格式的大批量数据展示,不具备优势。

集算表不同于Excel的工作表,它是一个基于列(Column Base)的网状表格(Grid),适用于展示规则数据。同时它还具备了Excel工作表(Work Sheet)的用户界面和部分常见操作。并且支持Excel的部分计算功能。同时结合SpreadJS数据绑定的功能,对于大量固定格式的数据(例如数据库的表格)可以快速在前端进行展示。

集算表的特点正如它的名字的三个字:集,算,表:

l  集(Data Manager):

集的意思就是数据集记和管理。集算表在前端构建了一个叫做Data Manager的数据管理模块。该模块可以简单理解为一个前端的数据库,Data Manager负责与远端的数据中心进行通信,拉取远端的数据。在前端处理数据,例如数据表的定义,表间关系等。同时Data Manager还负责处理数据的变形,例如分组,切片,排序,过滤等。

l  算(Calculation Engine):

集算表本身基于SpreadJS网络结构化数据的计算引擎Calculation Engine。Calculation Engine定义不同的上下文计算层级,不同与SpreadJS中工作表(Work Sheet)基于单元格或者区域(Range)的计算层级,集算表(Table Sheet)的上下文层级是基于行级,组级,数据级。

同时通过Calculation Engine的计算串联,使得集算表(Table Sheet)与工作表(Work Sheet)之间可以进行数据串联。这使得计算表不是一个独立存在,它可以与工作表结合使用,相互配合以适应更多的需求。

l  表(Table Sheet):

整个Table Sheet分为三层:渲染层,数据层,功能层。

渲染层复用了工作表(Work Sheet)的渲染引擎,具备双缓冲画布等高性能的优势。

数据层直连Data Manger,无需建立数据模型,相交SpreadJS更加快速。

功能层不同于传统表格(Grid),将底层结构化数据进行改造,在支持增删改查等基本功能的基础上,还额外支持了大部分工作表(Work Sheet)的对应功能,如样式,条件格式,数据验证,计算列等。

在数据底层,保证上述功能支持的基础上,还能保证数据的结构化,而非松散的数据结构。

集算表的架构:

 

Data Manager负责拉取远端数据,远端数据源可以是Rest API、OData、GraphQL、Local。Data Manager在拉取数据源之后会根据其中的定义构建数据表(Data Source),该表结构与数据库中的表结构类似。之后通过这些表来定义对应的数据视图(View),视图中定义了展示的结构以及计算列,关系列的添加。最终将不同的视图(View)绑定在不同的Table Sheet上。Table Sheet负责对所有的视图进行展示和操作。Calc Engine在Data Manager上工作,而非直接工作在Table Sheet上,这是为了更方便的去支持集算表与普通工作表之间的公式引用。这使得集算表与普通工作表之间产生“化学效应“,例如下面的示例:

在创建了集算表之后可以在普通的工作表中直接通过公式引入集算表的表格中的数据。这样可以做到通过集算表对数据进行展示,同时通过工作表的功能,对展示的结果进行数据分析。

   
   
 
   


 


甚至可以直接引用集算表中的数据当做数据数据源,创建数据透视表。

 
   


集算表的性能:

集算表是基于Column进行数据存储,相较于基于Row的存储结构,在筛选和计算方面有很大的优势。

通过性能测试,我们可以了解到,对于100W行级别的数据,集算表

从发送请求加载数据到将表格绘制完毕总共的耗时是大约5秒钟。

 

筛选数据花费时间在50ms左右(Filter country == "UK")。

 

100W行数据排序花费时间在5S左右(Sort birthday == "Ascending")。

 

对100W行数据添加计算列,对每行数据进行计算,花费时间不明显(总计时间4807ms,但该事件包含了数据加载,绘制的总时间,对比之前的测试结果基本在4800ms左右。故添加计算列计算花费的时间不明显,可忽略不计)。

 

如果想要了解更多SpreadJS产品特性或者查看性能测试示例,可访问下方地址。

https://en.onboarding.grapecitydev.com/spreadjs/feature-demo/web/tableSheet/performance.html

标签:集算表,Data,前端,Manager,秒级,Table,Sheet,数据,百万
From: https://www.cnblogs.com/powertoolsteam/p/17248215.html

相关文章

  • (转)漫画 | 带你领略前端发展史的江湖恩怨情仇
    时间总是过得很快,似乎快得让人忘记了昨天,前端WEB领域的发展更是如此,转眼间已是近30年,时光荏苒,初心不变,在一代又一代前端人的努力下,前端已经是互联网不可或缺的一部分。......
  • 在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载的对象接口
    在基于vue-next-admin 的Vue3+TypeScript前端项目中,可以整合自己的.NET后端,前端操作一些功能的时候,为了使用方便全局挂载的对象接口,以便能够快速处理一些特殊的操作,如......
  • 前端面试题整理(都是我自己面试被问到过的)
    面试了好多次,整理下面试题吧HTML语义化:增加代码可读性,有利于搜索引擎识别,爬虫获取更多信息;更好的展示代码结构script标签中defer和async的区别:相同点:async和defer......
  • 记录--我在前端干工地(three.js)
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前段时间接触了Three.js后,试着用他加载了一些模型three.js初体验简陋的了解了一下three.js的相关使用,并......
  • 图片显示(后端返回接口在预览中展示图片,响应无返回)后端返回二进制图片前端乱码解决方案
    https://blog.csdn.net/weixin_46801282/article/details/123386264解决方案一:后端把图片转码成base64再发送过来router.get('/test',(req,res)=>{fs.readFile(......
  • Web前端登录拼图人机验证功能
    大家好,我是小悟​前言相信大家经常在各种网站上登录、注册、下发短信、活动等会看到,系统会弹出来一个滑块验证,让你把一个滑块滑到指定空缺的位置(还有其他种形式,比如按顺序点......
  • Web前端入门之JS基础知识梳理汇总
    Web前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错。不论是专业还是非专业,有基础亦或是无基础,都想通过学习Web前端实现高薪就业。不过,学习要一步一个......
  • 微前端解决方案
    微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite框架支持、应用......
  • 前端面试题(new)未完待续
    1,vue计算属性computed和watch的区别有哪些?区别:1、计算属性在调用时需要在模板中渲染,修改计算所依赖元数据;watch在调用时只需修改元数据。2、计算属性默认深度依赖,watch默......
  • 前端HTML/CSS模板
    在写HTML项目的时候可以参考下面的模板:1)效果/HTML代码/CSS样式HTML代码CSS样式:2)效果:HTML代码:CSS样式:......