应用页面搭建性能优化最佳实践|飞书低代码平台

应用页面搭建性能优化最佳实践|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
面向应用开发者,提供页面性能的自助分析、排查、优化的方法及实践案例
一、控制页面体积
单个页面体积过大,不仅会导致页面运行时加载时间变长,同时也会使页面搭建变得卡顿。
这里的体积包含:页面内容/结构数据、页面上绑定的对象引用、页面上使用的公式或变量等
下面的案例会根据「如何控制页面各方面体积」来说明最佳实践。
案例1:页面内容/结构过多可能导致搭建卡顿或预览慢
解决页面内容过多的方式之一是合理的将页面分成更多的子页面,控制子页面的数据仅在打开子页面时才加载。
  • 如何查看当前页面的体积是多少?即是否需要拆分子页面?
  • 在页面顶部栏右侧,鼠标悬浮在icon上,即可查看页面体积以及相关建议。当页面体积过大时会提示用户进行优化。
  • 体积说明:当页面体积大于 5 MB,小于 10 MB 时,保存时会看到体积预警提示,建议及早进行优化,避免进一步劣化。当达到 10 MB 以上后,保存时会看到弹窗提醒,可以选择 7 天内不再提示,请尽快优化。
250px|700px|reset
  • 实践案例
案例2:组件冗余/重复搭建会导致页面内容过多,最终影响渲染速度
有时候因为 设计交互的要求,两个区块仅仅是某一部分不同,这部分不同需要通过显隐等条件去控制,那么可能会出现冗余/重复搭建组件的情况。这时候,越是能更细粒度的控制这部分不同,越能减少冗余组件。
  • 实践案例
二、合理安排事件执行顺序
案例1:等待异步任务可能导致打开弹层慢
有时候打开一个弹窗前,我们可能需要请求一个异步任务,获取一些弹窗中需要的数据。如果等待数据请求成功后才打开弹窗,等待时间会让用户产生疑惑。合理的做法是应该正确安排事件执行顺序,将串行事件改为并行事件,并在弹窗内增加 loading 来提升用户体验。
  • 实践案例
三、自定义组件加载慢?是否有冗余接口加载
案例1:额外调接口获取 aPaaS 平台已暴露的信息,可能增加组件加载耗时
飞书低代码平台有提供方法获取页面上下文等信息,用户不需要单独再调用接口去获取,会增加额外的耗时成本。
  • 实践案例:
案例2:数据查询耗时过长,可能是查询条件出现了问题
查询数据库/对象的数据时,精准的查询条件,既能事半功倍,也能减少性能问题。
  • 实践案例
四、数据查询慢
案例1:数据对象查询
  • 实践案例:
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
联系我们立即试用