【瑞诚实践】天下武功,为“快”不破--关于大屏的效率应注意哪些问题

楼主
我是社区第120837位番薯,欢迎点我头像关注我哦~
小编我好久没发帖了,几个项目同时在开工状态,虽然辛苦,但还是比较顺利的,


正好今天我们协同帆软官方一起解决了一个关于大屏效率的问题,我觉得应该拿出来分享一下,


毕竟在日常工作中,大屏的制作还是比较普遍的,实用且炫酷的大屏展示,无论对于IT部门还是公司管理层,


都是体现实力和价值的!


设想一下:你的做的大屏,很美观,很炫酷,但是需要刷新等待3分钟才能显示出数据,

你和领导是不是各种黑线 ̄□ ̄||


都不要说3分钟了,对于期待看到它的人,多1秒都是煎熬!!!




ok,言归正传,我们把我们经历的过程详细说明,希望对番薯们能有所帮助!


来!!开课!!


一、项目背景:

这是我们客户的某业务大屏,做为各分支机构系统登录后展示首页,展示界面具有较多的核心指标,能及时直观的反应分支机构各业务基本状态。


下图为展示界面效果图:





二、初期上线后

由于此界面为默认首页界面,当用户登录系统时,默认即加载展示此界面。

1、  业务:用户登录时,默认加载此界面会直接导致系统CPU与内存占用资源猛增,
               致使系统严重卡顿甚至直接宕机,导致用户查看需要2-3min甚至无法正常使用系统。
2、 数据:存在明细查询数据,且部分数据来源于多个系统,数据计算集合堆积且拥有大量的无效列查询,
               导致数据查询时间很长,维护过程中成本很高,寻找展现内容的对应数据来源很麻烦,
               最终的执行时间在1min左右。
3、 设计:为实现展现效果,大量的简单粗暴堆积组件,将数据与计算逻辑放置于前端的单元格内部,
               单元格彼此的数据引用很多,难以追踪数据处理与展现流程,极大的增加了后期的维护成本,
               并且大量的压力积于前端导致最终的展现性能低下,整体处理时间在1-2min左右。

三、基本调整:

由于上线无法预览且影响系统的正常使用,此界面暂缓上线,并由瑞诚实施人员进行优化调整,而由于初期项目时间紧张,无法进行完全的整合重构,
只能进行基本的调整。

1、  数据:原始数据部分来源于sapbw的query,插件使用过程中性能差劲,描述无法读取,数据集参数值公式不生效,
               同一query多次使用数据错乱等问题,在于帆软官方技术支持沟通过程中逐渐解决,
               并依据数据计算逻辑指标进行了query的结构调整,缩减了query数据集合数量,
               最终在启用缓存后界面有一定的性能提升。 部分sql数据计算集合也做了简单的整合优化,缩减集合数量。
2、 设计:缩减组件数量,调整布局,缩减单元格数据计算引用层级,将原始的多次层级引用缩减到1-2级,
               最终的展现时间维持在1min半左右。

四、重构优化:

由于实际展现性能与客户期望差距太大,且系统资源占用仍然较为严重,影响系统的正常使用,最终决定对此进行完全的重构优化。
之后我方实施团队和客户项目经理与帆软官方进行了充分的沟通,最终在官方的大力协助之下,完成了此过程:

1、 业务:重构优化之后的大屏,用户登录后所需预览时间在1-2S左右。
2、数据:来源于多个系统的数据通过数仓进行了整合,
              将sapbw的query数据通过帆软的定时填报功能定时同步到hana数据库中使用,
              保持数据仓库的统一性和一致性,sql数据集部分施行了查询和命名的规范化处理,
              对相应部分处理内容增加描述性注释,便于后续的维护,并且对展现的数据计算指标做了查询整合,
              将归属于同一模块的多个数据集合合并为一个,最终在整合完成之后由原始的50+数据集合并为10多个,
              从而尽量将大部分数据计算的压力都放在数据库端,提升数据计算性能。
3、设计:使用模块化的设计方式,将整合之后的数据结果直接放置于对应的展示位,
              避免单元格间多层级的跳转引用和依赖于前端的数据计算,极大的提升了性能与可维护性。

五、分享心得:

1、数据:数据仓库是企业数据应用的重中之重,统一的数据仓库不仅提高了管理效率、数据质量 ,
             降低了维护成本,还在同时提升了易用性和灵活性,强大的数据仓库对与数据展示来说是如虎添翼,
             而统一的数据仓库也是数据应用与展示的基础。数据查询集合应避免简单粗暴的堆叠,
             sql的规范化和结构化的处理可以极大的降低维护成本,易用性,并且提升查询与展现性能,
            便于前端的数据展示。

2、设计:界面设计遵循模块化设计理念,分布局、分重心、分展示内容的进行区域性模块化的设计,
              展示数据尽量直接来源于某个数据集的某个数据指标。
              避免界面上的多次引用和计算,以此提升性能与可维护性,为前端展示带来更好的用户体验。

好了,看完这篇文章,是不是对于大屏在制作过程中的效率问题有了初步的认知?记得点赞哦!!比心~~

编辑于 2018-9-12 10:51  
分享扩散:
参与人数 +1 F豆 +99 理由
格调 + 99 太棒了,给你32个赞,么么哒

查看全部评分

沙发
发表于 2018-9-12 11:07:08
板凳
发表于 2018-9-12 11:09:17
地板
发表于 2018-9-12 11:20:51
FineReport10.0开发了更加炫酷的大屏功能哦!近10个大屏3D特效、15种动态加载效果以及联动炫酷效果,期待你们的使用效果哦~
5楼
发表于 2018-9-12 13:31:16
6楼
发表于 2018-9-17 09:44:27
来自手机
兔子酱 发表于 2018-9-12 11:20
FineReport10.0开发了更加炫酷的大屏功能哦!近10个大屏3D特效、15种动态加载效果以及联动炫 ...

7楼
发表于 2018-9-29 22:15:29
我去,居然弄出一分多钟来。。。领导要满头黑线了
8楼
发表于 2018-12-3 17:11:24
我的大屏后台数据处理做成数据集市了,但是显示还要5S左右,指标数值是直接出来,但是图表大概要白屏闪个5秒才能出来,切屏很丑的,不知道还能怎么性能优化
9楼
发表于 2018-12-3 18:09:26
天空-小孙 发表于 2018-12-3 17:11
我的大屏后台数据处理做成数据集市了,但是显示还要5S左右,指标数值是直接出来,但是图表大概要白屏闪个5 ...

试了下,就算数据集还要3~4S,无望了
10楼
发表于 2019-4-19 10:10:14
大屏在PC端设计好之后投放到大屏上调整布局花费时间多吗?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

11回帖数 1关注人数 14637浏览人数
最后回复于:2019-4-19 10:10

返回顶部 返回列表