HTML动态显隐切换与JS按需创建元素的最佳实践判断标准

针对当前场景的选型结论 #

你当前的场景（列表项数固定、会被反复显隐）确实更适合用预先返回空结构+后续填充的方案：固定3个<li>的空结构总大小只有几十字节，对初始页面加载的影响可以忽略不计，后续每次显隐只需要修改文本内容和显隐状态，不用反复创建销毁DOM节点，整体开销远低于动态创建方案。
另外补充个小注意点：如果只是控制元素显隐，用display: none切换或者原生hidden属性比display: contents兼容性更好，后者在部分旧版浏览器中存在布局异常的问题。

通用判断最佳实践 #

你可以从以下4个维度综合判断选型，没有绝对的最优解，都是根据业务需求做的权衡：

• 看元素的使用频率和生命周期
  如果元素会被反复触发显示、生命周期和当前页面一致（比如常驻页面的弹窗、高频切换的列表、固定展示的提示模块），优先预先预留空结构，避免每次触发都重建DOM的冗余开销。
  如果元素是单次使用、用完即销毁（比如一次性toast提示、临时弹出的操作确认框），优先按需动态创建，用完直接移除节点，避免冗余DOM长期占用内存。
• 看空结构的体积大小
  如果空结构本身体积很小（比如只有少量固定标签、总大小低于1KB），哪怕使用频率不算极高，也可以提前输出，对首屏加载速度几乎无影响。
  如果空结构本身非常复杂（比如几十上百个嵌套节点、空结构就有几十KB），且不属于首屏必须内容，优先按需动态创建，避免拖慢首屏加载速度。
• 看节点数量是否固定
  如果节点数量是提前确定的（比如你这个固定3项的列表、固定4个tab的内容容器），优先预先预留空结构，填充内容的开销远低于重新创建全部节点。
  如果节点数量完全不确定（比如列表项数由后端接口返回、可能从0到上千项不等），优先按需动态创建，提前预留结构也无法匹配可变的数量，反而会做无用功。
• 看SEO和可访问性需求
  如果元素内容需要被搜索引擎抓取，或者需要支持无JS场景下的基础访问，优先提前输出完整结构（即使默认隐藏），纯客户端动态创建的内容如果没有服务端渲染兜底，搜索引擎可能无法抓取，无JS用户也看不到对应内容。
  如果是纯交互类的内部功能模块、不需要SEO支持，就可以根据前面三个维度灵活选型。

你提到的两种极端思路也分别对应不同的业务场景：全量预先输出适合交互密集、操作响应要求极高的后台类系统，最小初始输出适合首屏加载优先级最高的内容站、营销页类场景。

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