通过延迟加载提高大型表单的性能

延迟加载简介

当表单变得大而复杂,包含成千上万个字段时,最终用户在运行时渲染表单时会经历较长的响应时间。 为了最大程度地缩短响应时间,自适应Forms允许您将表单划分为逻辑片段,并配置以延迟片段的初始化或加载,直到片段需要可见为止。 这称为延迟加载。 此外,用户导航到表单中的其他部分并且片段不再可见后,将卸载为延迟加载配置的片段。

在配置延迟加载之前,我们先了解相关要求和准备步骤。

准备配置延迟加载

在自适应表单中配置片段的延迟加载之前,务必要定义策略以创建片段,识别脚本中使用或其他片段中引用的值,以及定义规则以控制延迟加载片段中字段的可见性。

  • 识别和创建片
    段您只能配置自适应表单片段以便延迟加载。片段是位于自适应表单外部且可以跨表单重复使用的独立区段。 因此,实施延迟加载的第一步是识别表单中的逻辑部分并将其转换为片段。 您可以从头开始创建片段,或将现有表单面板另存为片段。

  • 识别和标记全局值基
    于表单的交易涉及动态元素,用于从用户处捕获相关数据并对其进行处理以简化表单填写体验。例如,您的表单在片段X中具有字段A,其值决定了字段B在另一个片段中的有效性。 在这种情况下,如果片段X标记为延迟加载,则字段A的值必须可用于验证字段B,即使未加载片段X也是如此。 要实现此目的,您可以将字段A标记为全局,这可确保其值在片段X未加载时可用于验证字段B。

    有关如何使字段值全局化的信息,请参阅配置延迟加载

  • 用于控制字段可见性的写
    入规则表单包括某些字段和部分,这些字段和部分不适用于所有用户和所有条件。Forms作者和开发人员使用可见性或显示隐藏规则来根据用户输入控制其可见性。 例如,在表单的“就业状态”字段中选择“失业”的用户不会显示“办公地址”字段。 有关编写规则的更多信息,请参阅使用规则编辑器

    您可以在延迟加载的片段中使用可见性规则,以便仅在需要条件字段时才显示条件字段。 此外,将条件字段标记为全局,以在延迟加载片段的可见性表达式中引用它。

配置延迟加载

执行以下步骤以在自适应表单片段上启用延迟加载:

  1. 在创作模式下打开自适应表单,该模式包含您要为延迟加载启用的片段。

  2. 选择自适应表单片段,然后点按配置

  3. 在侧栏中,启用​Load fragment lazily​并点按​完成

    为自适应表单片段启用延迟加载

    片段现在已启用延迟加载。

您可以将延迟加载片段中对象的值标记为全局值,以便在未加载包含片段时,这些值可在脚本中使用。 执行以下操作:

  1. 在创作模式下打开自适应表单片段。

  2. 点按要将其值标记为全局的字段,然后点按配置

  3. 在侧栏中,启用​Use value during lazy loading

    侧栏中的延迟加载字段

    该值现在标记为全局值,即使在卸载包含片段时,也可用于脚本中。

配置延迟加载的注意事项和最佳实践

使用延迟加载时应记住的一些限制、建议和重要点如下:

  • 建议在基于XSD架构的自适应Forms(而不是基于XFA的自适应Forms)上使用XSD架构来配置大型表单上的延迟加载。 在基于XFA的自适应Forms中,由于延迟加载实施而导致的性能增益相对而言小于基于XSD的自适应Forms的增益。
  • 请勿在自适应表单中对根面板使用​Responsive -everything on one page without navigation​布局的片段配置延迟加载。 由于响应式布局配置,所有片段在自适应表单中同时加载。 它还会导致性能下降。
  • 建议不要在加载自适应表单时呈现的第一个面板中对片段配置延迟加载。
  • 片段层次结构中最多支持两个级别的延迟加载。
  • 确保在自适应表单中标记为全局的字段是唯一的。
  • 考虑为应根据条件显示或隐藏的片段编写可见性规则。 例如,您可以根据用户指定的婚姻状态显示或隐藏“配偶详细信息”片段。
  • 懒散加载的片段不支持文件附件和条款和条件组件。

编写配置延迟加载的脚本最佳实践

为延迟加载面板开发脚本时要记住的重要要点如下:

  • 确保在延迟加载片段的字段中使用的初始化和计算脚本在本质上是幂等的。 幂等脚本是指即使多次执行也具有相同效果的脚本。
  • 使用字段的全局可用属性,使位于延迟加载面板中的字段值可用于表单的所有其他面板。
  • 请勿在延迟面板中转发字段的引用值,而不考虑字段是否在片段中全局标记。
  • 使用面板重置功能,可使用以下单击表达式重置面板上可见的所有内容。
    guideBridge.resolveNode(guideBridge.getFocus({"focusOption"):"navigablePanel"})。resetData()

在此页面上