时间戳

首页 > 解决方案 > 隐藏 html 动态切换可见性与在需要时使用 javascript 动态创建 - 最佳实践

javascript - 隐藏 html 动态切换可见性与在需要时使用 javascript 动态创建 - 最佳实践

问题描述

我有一个列表，我希望始终显示给用户，但直到用户生成某些事件（即点击某物）。

    <ol id='list'>
        <li class='item'></li>
        <li class='item'></li>
        <li class='item'></li>
    </ol>

一旦采取了某个行动，我将拥有textContent每个列表项，我将在那时插入。

我正在考虑两种选择：

  1. 最初使用隐藏的元素提供 html 结构，然后使用 javascript动态填充textContent和更改显示。contents-填充

或者

  1. 在需要时使用 javascript 动态创建和填充元素。-填充和创建

因为我希望这个项目会被重复显示然后隐藏，我的直觉是在这种特殊情况下，第一个选项比动态创建元素更有效。

但是，我的问题实际上更笼统，确定元素最初应该是空的并动态填充，还是动态创建和填充的最佳实践是什么？

在搜索了互联网和 SO 之后，我无法找到有关一般最佳实践原则的答案。是否有关于此类案例的一般最佳实践/理论？

我看到两个极端：

  1. 为将来的事件提供尽可能多的 HTML 结构，隐藏元素直到需要它们，动态更改它们的显示和填充内容。

  2. 为初始使用提供最小的 HTML 结构，并在将来发生事件时尽可能动态地创建。

#1 似乎会导致最快的初始页面加载时间，但当事件发生时 UI 会变慢。

#2 似乎有更长的初始页面加载时间，但在 UI 事件发生时创建的客户端加载更少，因此在初始页面加载后更快。

标签： javascripthtmlcssperformancedom

解决方案

推荐阅读