Question

我有一个页面，当我单击产品时，我会使用ajax加载产品信息，但是在移动设备上，从服务器检索所有信息的速度有点慢，因为这会延迟打开产品预览框。因此，我只是想出一个方法来创建一个隐藏的输入，并在隐藏的输入中传递与产品相关的信息，然后在单击产品时从那里读取它。现在我的问题是关于性能的问题，这是一种好习惯还是会创建隐藏的输入也会降低页面性能？

<div class="item openItem" data-id="100">
    <span>car</span>
    <input type="hidden" id="object-100" value='{"name":"car", "id": 100, ......}'/>
</div>

<div class="item openItem" data-id="101">
    <span>bird</span>
    <input type="hidden" id="object-101" value='{"name":"bird", "id": 102, ......}'/>
</div>

<div class="item openItem" data-id="103">
    <span>dog</span>
    <input type="hidden" id="object-103" value='{"name":"car", "id": 103, ......}'/>
</div>

Answer 1

我认为解决此问题的最佳方法是

是的，在页面上加载信息
否，请勿将其加载为隐藏的输入字段

我的建议是在HTML的末尾处放置一个<script>标签，其中包含类似

的内容

var itemData={
  "100": {"name":"car", "id": 100, ......},
  "101": {"name":"bird", "id": 102, ......},
  "109": {"name":"car", "id": 103, ......}
};

，然后引用全局变量itemData而不是输入字段。

其背后的理由是：

即使末尾的<script>标签尚未完成加载，但每个现代HTML呈现引擎都将开始呈现页面，但是在“ bird”完成加载之前它将不会开始呈现“ dog”
加载页面的用户需要一些时间才能与其进行交互-时间足以加载数据
与交互操作时从隐藏输入中获取数据相比，直接将数据直接加载到变量中要花费更少的处理能力

Answer 2

隐藏的输入不会减慢您的应用程序的速度，如果确实如此，那么减慢的速度将很小。它们是隐藏的，因此不会呈现到文档中（如果您有数百个，可能会出现问题）。

但是，这并不是最好的方法，我将回到使用Ajax加载产品信息的过程。造成这种情况的原因有两个。

Ajax是异步的，因此可以加载页面上的其余信息，并且您可以在其中加载产品信息的微调器。然后，从服务器获取产品信息后，便可以将其弹出。
想象一下您是否在数据库中更改了产品。如果您使用ajax从服务器获取信息，那么一切都会正常。它将在您的应用程序中自动更新。但是，如果您在隐藏的输入中包含信息，则需要在应用程序中进行更新，然后在每次要更改产品时为应用程序发布更新。

Answer 3

我个人认为您选择了最佳解决方案。在这种情况下，最好在属性名称前加上data-，以将要存储在HTML属性中的所有产品及其各自的详细信息加载到容器中（就像容器一样）。选择要查看的产品后，您可以轻松地从javascript代码中检索它们。此方法的优点是，您一次将发出服务器请求，这与恢复所有产品的时间相对应，并且您不再需要为查看产品而发出其他请求。但是，如果产品数据立即更改，则可能是不利的，我认为您的应用情况并非如此。如果您想获得性能，请采用您使用的这种方法，我认为这是最好的。我希望这个答案对您有用。

在文本输入中加载json对象是否会降低页面性能

3 个答案: