代码之家 › 专栏 › 技术社区 › Peter

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

performance ajax json

Peter · 技术社区 · 7 年前

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

3 回复 | 直到 7 年前

Eugen Rieck 7 年前

我想最好的解决办法是

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

我的建议是 <script> 在标签 非常结束 在html中,它包含如下内容

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

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

这背后的理由是:

每一个现代的HTML呈现引擎都会开始呈现页面,即使 <脚本& GT; 末尾的标记尚未完成加载,但它不会在“bird”完成加载之前开始呈现“dog”
加载页面的用户在与页面交互之前需要一些时间-足够的时间加载数据
直接将数据加载到变量中所需的处理能力比从隐藏的输入获取数据所需的处理能力要小 互动时

Cjmarkham 7 年前

隐藏的输入不会减慢你的应用程序的速度,如果它慢下来了,慢下来的数量将很小。它们是隐藏的,因此不会呈现到文档中(如果有数百个,这可能是一个问题)。

但是,这并不是最好的方法,我将回到使用ajax来加载产品信息。这有几个原因。

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

soumare 7 年前

我个人认为你已经选择了最好的解决方案。在这种情况下,最好是通过在属性名前面加上 data- . 一旦选择了要查看的产品,就可以很容易地从JavaScript代码中检索它们。此方法的优点是,您将发出一次服务器请求,这与所有产品的恢复时间相对应,并且您将不再需要为仅查看产品而发出其他请求。但是,如果产品数据立即改变,这可能是一个不利因素,我认为这不是你申请的情况。如果你想提高成绩,就采用你所用的方法,我认为这是最好的。我希望这个答案对你有用。