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