点击项目图像打开画廊模态框时出现页面冻结无响应问题

核心卡顿根因 #

现在的代码采用全量预渲染逻辑：PHP循环执行时，会把所有项目对应的模态框DOM一次性生成并嵌入初始页面，每个模态框内部又遍历塞入对应项目的全部图片资源。哪怕给图片加了懒加载属性，浏览器加载初始页面时也会解析全部带data-src的DOM节点，当用户点击触发模态框打开时，浏览器需要瞬间完成对应区域的布局计算、样式重绘，主线程被大量计算任务占满后，就会出现页面冻结无响应的情况。
循环里残留的无属性空<img >标签会无意义增加DOM节点数量，进一步放大渲染压力。

具体优化方案 #

• 清理冗余DOM：直接删掉循环内无实际作用的空<img >标签，减少不必要的节点计算开销
• 改为按需动态渲染模态框：不要在初始页面生成所有项目的模态框结构，仅当用户点击对应项目的触发按钮时，才动态创建当前项目的模态框DOM、加载对应关联的项目图片，从根源上缩小初始页面的DOM体积
• 调整懒加载触发时机：不要在初始页面提前写死所有图片的data-src属性，等模态框动态插入DOM、完全弹出可视后，再为内部的图片节点赋值资源地址、触发加载逻辑，避免预加载大量用户暂未浏览的内容
• 控制单模态框内的资源渲染量：如果单个项目关联图片较多，可给模态框内的图片列表加分页、虚拟滚动逻辑，控制单次渲染的图片数量，避免一次性加载几十张高清原图造成主线程阻塞

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