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

问题描述

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

标签： jsonajaxperformance

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

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

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

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

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

这背后的理由是：

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

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

问题描述

解决方案

推荐阅读