包含多个模态框(modal)的页面渲染耗时过长如何解决

你的猜测完全正确。前端框架默认会渲染所有写在当前页面模板内的节点，哪怕模态框初始为隐藏状态，页面首屏渲染时也会执行所有模态框的模板解析、DOM生成、事件绑定、内部子组件初始化流程。如果模态框内部包含表单、下拉选择、数据列表等重逻辑组件，7-8个模态框的累计初始化开销足以导致首屏渲染延迟2-3秒。

• 懒加载模态框（首推方案，改造成本最低效果最好） #

  所有模态框采用首次触发才初始化的逻辑：
  • Vue项目中使用v-if控制模态框的渲染（不要用v-show，v-show仅控制CSS显隐仍会提前渲染DOM），初始值设为false，仅当用户点击触发按钮时才将对应状态值改为true
  • React项目中使用条件渲染逻辑，初始不返回模态框组件，触发显示操作时再挂载对应组件
    该方案下首屏渲染完全不会处理模态框相关逻辑，可直接恢复到添加模态框前的首屏加载速度。

• 拆分模态框内部逻辑 #

  如果优化后模态框首次打开的速度不符合预期，可以继续拆分模态框内部的重逻辑：
  • 模态框刚打开时先渲染基础框架，下拉选项、表格数据、富文本编辑器等重组件延迟到模态框挂载完成后再异步加载
  • 表单类模态框的校验规则、提交逻辑可以延迟到用户首次输入或点击提交时再初始化，不需要提前挂载

• 复用模态框实例 #

  如果多个模态框的结构相似度较高（比如均为信息展示框、标准表单录入框），可以仅封装1个通用模态框组件，不同触发按钮点击时传入对应的内容配置、业务逻辑参数即可，避免初始化多个独立的模态框实例。

内容的提问来源于stack exchange，提问作者xuantubka