在文本输入中加载 json 对象会降低页面性能吗答案

【问题标题】：Does loading json object inside text input slow down page performance在文本输入中加载 json 对象会降低页面性能吗
【发布时间】：2018-12-25 05:10:57
【问题描述】：

我有一个页面，我在单击产品时使用 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>

【问题讨论】：

标签： json ajax performance

【解决方案1】：

我认为解决这个问题的最好方法是

是的，通过页面加载信息
不，不要将其作为隐藏输入字段加载

我的方法是在 HTML 的 very end 处添加一个 <script> 标签，其中包含类似

的内容

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

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

这背后的基本原理是：

每个现代 HTML 渲染引擎都会开始渲染页面，即使末尾的 <script> 标签还没有完成加载，但它不会在 'bird' 完成加载之前开始渲染 'dog'
加载页面的用户在与其交互之前需要一些时间 - 足以加载数据
将数据直接加载到变量中所需的处理能力比在交互时从隐藏输入中获取数据要少

【讨论】：

【解决方案2】：

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

但是，这不是最好的方法，我会重新使用 ajax 加载产品信息。这有几个原因。

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

【讨论】：

您的第二点不成立：每次加载“页面”时都会更新产品信息。实际上，在这种情况下，使用 AJAX 会使用户感到困惑，因为预览中显示的信息会有所不同。没关系，我虽然它是一个详细页面，但它似乎是一个库存页面。在这种情况下，最好重新加载信息。

【解决方案3】：

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

【讨论】：