Joe.xu 发表于 2024-2-4 18:56:47

一看就会,超有用活字格技能:一百九十五、选项卡'异步加载',大幅提升页面加载速度

本帖最后由 Joe.xu 于 2024-2-4 19:16 编辑

本期的主角是选项卡,说到它大家应该不陌生,当需要展示多个子页面的时候,
选项卡可是越用越爽


但是,当选项卡中子页面不断增多的时候,头疼的问题就来了,页面加载越来越慢了:'(
这是因为选项卡中的多个页面是同步加载的,页面会等选项卡中的子页面全部加载完成再开始渲染
这样自然感觉页面太慢了
活字格9.0带来了一个解决办法,选项卡支持懒加载,不了解选项卡的可以看一下这个教程贴
【新提醒】活字格9.0新功能解密:三、性能提升 - 运行时性能问题(一) - 活字格专区 - 专题教程 - 葡萄城开发者社区 (grapecity.com.cn)

懒加载确实解决了一部分问题,但当我们需要获取每一个选项卡的数据做后续的逻辑处理时,
比如要在服务端命令中,获取每一个选项卡的表格数据,完成后续的逻辑,同时勾选了懒加载
可能就会有下图的报错

原因就是懒加载开启后,只会主动加载选项卡默认的子页面,如果没有人为去点击其他子页面,其他的子页面不会主动加载,
进而服务端命令就取不到其他子页面的数据了


一次偶然的远程,看到了一个机智客户的做法,非常巧妙实现了选项卡的异步加载

工程中三个选项卡子表的数据分别为9W,16W,34W,未开启分页和按需加载,展示全部数据
正常加载需要9.82S


"异步加载"只需1.18S


实现思路如下
1.给出了默认加载的子页面都做一个容器页面,容器页面使用页面容器组件并命令


2.做一个空白页面,并让上面所以的容器页面都先默认展示这个空白页面


3.选项卡除了默认展示的子页面之外,其他都绑定成对应子页面的容器页面,
因为最开始容器页面是空页面的,所以展示的时候就非常快了


4.在默认展示的子页面上写一个公式放在文本框中,获取这个表格的行数。



5.给这个文本框设置命令,用设置单元格属性,给下一个子页面页面容器设置要加载的面。
这样当第一个子页面加载完,就会触发加载第二个。同时也要给第二个子页面做同样的设置,让其触发加载第三个
再有第四个选项卡的话,同理



有这种需求的,赶快尝试一下吧:lol:lol
(原工程太大,删除了一些数据)



页: [1]
查看完整版本: 一看就会,超有用活字格技能:一百九十五、选项卡'异步加载',大幅提升页面加载速度