”可视化数字大屏“ 开发需要注意和性能优化的点

前言

所谓的可视化数据大屏，其实就是用来将数据的分析、研究结果进行呈现的一种媒介。这种媒介能够适应不同场合、不同环境、不同类型的需要，更加直观和形象的展示了数据所要表达的内容。数据核心表达思想，就该是简洁的。大屏的目的不是将数据进行简单的平铺，更加不是将数据设计成天马行空的揣测。而是以一种高度提炼的方式，将数据高度提炼出信息，再以好看的大屏形式呈现出来

样图

常见问题

1. 为什么通常你做出来的大屏那么的卡
2. 响应时间那么长
3. 换了显示器之后页面变形严重
4. 文件图片太多打包出来很大
5. 这个需求样式看着很难不知道能不能实现,先埋头搞

以上问题是我们开发大屏最常见的问题，那么怎么解决呢？

解决方法

1. 我们通常做可视化大屏需要用到的插件包括(echart,高德Map,swiper,liveplayer…)等,为了防止代码难维护和修改，我们需要解耦和模块化代码，通用的部分控件可以提取出来,如果是外包性质的开发我们可以自己搭建一个骨架，方便下次开发的时候能留点时间摸鱼, 在使用到我们的插件的时候需要监听页面关闭做一个清空执行栈的操作,像vue里面的destroyed，react中通过useEffect 的回调returen执行,总之就是得擦屁股,避免爆栈
2. 在大屏页面中通常不止页面上展示的数据，还有其他的隐藏弹出页面，还有很大量的数据，大量的接口，需要用到我们的懒加载和预加载，以及减少接口的数量，合并返回，在页面中少使用绝对路径来导入模块；
3. 大屏需要注意的就是适配显示器的分辨率,通常可以使用autofit.js插件完成,也可以用过px转rem来完成：https://blog.csdn.net/weixin_41192489/article/details/120004315
4. 可以把不必要的文件储存到云服务器,包括升级我们的打包工具使用vite工具
5. 对于没有把握的需求要提出合理的质疑和拒绝,通常很多炫酷的效果需要接受第三方的服务或者是ui通过json图实现动态效果

这就是我在开发过程中遇到的和总结的点希望对您有一丢丢帮助