大屏加载慢排查流程

一:恰当的大屏分辨率

此处为语雀内容卡片,点击链接查看:https://dtstack.yuque.com/easyv/il3lgc/ywuhlpunzt4vtco5

二:客户端配置

大屏卡顿、加载较慢时,首先确认硬件情况,建议使用符合相关配置的工作站,详见链接https://dtstack.yuque.com/books/share/857405df-2200-4fc9-b9c3-7d8579fa38be/ry1o9i

如显卡满足建议配置但仍有卡顿问题,请检查工作站的显卡资源调用是否符合预期👇 (适用于英伟达显卡)

三:网络情况

如网络情况不稳定,那么同样会影响加载速度,对应的产生的影响就是一会儿能加载出来一会儿不能加载出来,或与数据加载相关的交互事件时而生效时而不生效,可联系自己/客户公司的运维同学确认网络情况

四:资源请求情况

浏览器允许的并发请求资源数为15,如果有请求拥塞的情况,同样也会有一会儿能加载出来一会儿不能加载出来的情况。如果某个接了数据的组件一直没有加载出来或加载的很慢,可能就有资源请求拥塞的因素在。

如果碰到了这样的情况如何排查👇

  1. 打开浏览器控制台,查看network资源请求情况
  2. 找到一直显示不出来的组件,记录组件的ID搜索

如果请求排队排到了这个组件,会有对应的请求情况,如果排队没有轮到这个组件,就着手排查资源拥塞的情况。


同样的打开network,看看哪个资源请求时间特别特别长导致请求拥塞,如果这个资源为组件资源[请求name为get?componetId=组件id],原因可能是数据量特别大或数据源获取速度特别慢,此时就需要针对数据源进行排查。

如请求数过多,造成拥塞可尝试一下几种方式缓解:

  1. 使用数据容器组件统一获取数据,分发数据减少请求👉https://dtstack.yuque.com/books/share/857405df-2200-4fc9-b9c3-7d8579fa38be/bzqizt#RoU0W
  2. 查看屏中组件自动更新设置的频率,是否有不必要的组件开启了自动更新,或是超出数据更新频次的自动更新配置

使用静态数据的组件无需开启自动更新,数据本身如60秒更新一次,自动更新就建议配置60秒更新一次

  1. 优化大屏中素材资源的使用👇
此处为语雀内容卡片,点击链接查看:https://dtstack.yuque.com/easyv/il3lgc/iiu9qqxnof9bouak


⚠️不需要配置自动更新的情况:

  • 组件的数据无需实时变动不需要配置自动更新(使用静态数据、CSV文件、或数据不会变动的API/数据库
  • 接了数据容器使用回调作为数据来源的组件,也无需配置自动更新,数据容器的数据更新以及回调的更新都会自动触发更新组件数据

五:优化大屏配置方式

1.常见搭建技巧

引用面板的互相嵌套,逻辑不完善的交互配置、数据交互,超出硬件情况过度使用组件动画或动态装饰可能也会影响性能。掌握大屏搭建技巧不仅易于数据接入和方便后期维护,也可以更好地优化大屏性能。

详见链接👉可视化大屏搭建技巧分享

2.选择发布方式选择手动更新的方式。

手动更新即需手动更新至发布链接。

功能原理:手动更新功能实际上是将大屏的数据(组件/配置/已缓存成功过的三方数据等大屏资源)查询打包存储,待用户使用时无需查数据库直接返回预先缓存到json文件即可(全量),通过节省频繁查询数据库的成本和大屏聚合的手段达到快速渲染的目的,使加载性能得到提升,同时在重要汇报场合也可以保证大屏呈现的稳定性

3.性能优化模式辅助调节

为了辅助在大屏卡顿严重、加载较慢时进行一定的性能调节,提供一系列辅助优化的配置项(按需请求模式、隐藏卸载等等)供客户进行相应的选择和调节。详见文档 性能优化模式 (待上线)

如遇其他使用问题,可扫描下方二维码,获取更多产品支持~

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群