大屏加载慢排查流程

一:恰当的大屏分辨率

此处为语雀内容卡片,点击链接查看: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/数据库
  • 接了数据容器使用回调作为数据来源的组件,也无需配置自动更新,数据容器的数据更新以及回调的更新都会自动触发更新组件数据

五:优化大屏配置方式

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

详见链接👉https://dtstack.yuque.com/books/share/857405df-2200-4fc9-b9c3-7d8579fa38be/lnorkt

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

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