距离上一篇文章过去了二十多天了,期间一直想把第二部分写完,结果在测试过程中遇到了各种坑爹的问题,到今天才算基本完成,也许还有后续,但趁着今天有时间就写出来吧,也算对这个项目的一个总结了
遇到最大问题:
项目的需求是在一个窗口里生成所有图表,还要考虑到整套打印,所以滚动加载和分页浏览不是最好的方案,这导致数据超级多的时候(大概会生成2000多页的报告且上不封顶),会造成页面假死,疯狂占用电脑内存,低配置的电脑根本无法加载,甚至造成死机
在项目结构上我们采用数据分发的方式控制组件的渲染,由大致小每层组件都对数据进行过滤,重新组成新的数据传递给下一级,根据数据去判断显示与否,由于vue里v-if的机制如果该模块数据不存在,那么组件将不被渲染
一般来说我解决问题只有两种方式,一是找到解决问题的办法,二是让这个问题彻底消失,显然第二个是在这是行不通的,所以先分析原因:
1.后端返回的是原始数据,大量代码都需要前端进行处理,在前端进行如此大工作量的数据处理,显然内存消耗也是巨大的,显然这是不明智的,但后台数据暂时无法做进一步处理 2.echarts绘制图表的同时动画和频繁操作dom添加canvas也是也是消耗性能的元凶之一 3.大量的图表绘制同步进行会导致阻塞