Замедляет ли загрузка объекта json внутри ввода текста производительность страницы?

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 (как в контейнерах), указав перед именем атрибута data-.Вы можете легко получить их из своего кода JavaScript, как только продукт будет выбран для просмотра.Преимущество этого метода заключается в том, что вы один раз сделаете запрос к серверу, что соответствует времени восстановления всех продуктов, и вам больше не нужно будет делать другие запросы только для просмотра продукта.Но если данные о продукте меняются мгновенно, это может быть недостатком, и я думаю, что это не так для вашего приложения.Если вы хотите повысить производительность, примите этот метод, который вы использовали, я думаю, что он лучший.Надеюсь, этот ответ будет вам полезен.

Answer 2

Я думаю, что лучший способ решить эту проблему -

• да, загрузить информацию со страницей
• нет, не загружать ее как скрытое поле ввода

Мой подход был бы к тегу <script> в самом конце HTML, который содержит что-то вроде

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

и затем ссылается на глобальную переменнуюitemData вместо полей ввода.

Основанием для этого является:

• . Каждый современный механизм рендеринга HTML начинает отображать страницу, даже если тег <script> вконец не завершил загрузку, но он не начнет рендеринг 'dog' до завершения загрузки 'bird'
• Пользователю, загружающему страницу, потребуется несколько секунд, прежде чем с ней взаимодействовать - времени, достаточного для загрузки данных
• Загрузка данных непосредственно в переменную требует меньше вычислительной мощности, чем выборка их из скрытого ввода во время взаимодействия

Answer 3

Скрытые вводы не будут замедлять ваше приложение, и если это произойдет, замедление будет крошечным.Они скрыты и поэтому не отображаются в документе (что может быть проблемой, если у вас их сотни).

Однако это не лучший способ сделать это, и я хотел бы вернуться киспользуя ajax для загрузки информации о продукте.Для этого есть несколько причин.

• Ajax является асинхронным, поэтому может загружаться остальная информация на странице, и вы можете загружать счетчики, где будет информация о продукте.Затем вы можете получить информацию о продукте, как только получите ее с сервера.

• Представьте, что вы изменили продукт в своей базе данных.Если бы вы использовали ajax для получения информации с вашего сервера, все было бы нормально.Он будет обновлен в вашем приложении автоматически.Но если у вас есть информация в скрытых входах, вам нужно будет обновить ее в приложении, а затем выпускать обновление для вашего приложения каждый раз, когда вы захотите изменить продукты.