Какой вариант будет работать быстрее для браузера?

Question

[noname90]

Есть два варианта отдавать данные с сервера ajax запросом: html код либо json с созданием элементов на js, и последующая их вставка на страницу. Передается примерно 20-200 html элементов. Будет ли серьезная разница во времени обработки браузером?

Comments

[#алгоптимизируй #отботизируй]

А попробовать сравнить?

Answer 1

[Юрий Пузыня]

Рекомендую выбирать решение опираясь не на скорость, которая, к слову, будет примерно одинаковой, а на структуру проекта.
Если проект большой или обещает таким быть, оцените сколько вы готовы вложить в железо. Если в этом месте будуте экономить, то не стоит возлагать функцию щаблонизации на сервер - отдавайте json.
Как я понимаю в вашем случае речь идет о динамических данных, которые рендерятся при каждом запросе. Если же этот json статичен или допустим обновляется раз в час, то вполне можно рендерить эту страницу на сервере раз в час.
Тут нужно только решить готовы ли вы жить с серверными инструментами шаблонизации в проекте или вам комфортнее шаблонизировать на клиенте. Другими словами многое зависит от выбранного вами фреймворка, если он вообще есть.

Answer 2

[imhuman]

В наше время быстрого интернета, безлимита и мощных устройств разница, не думаю, что будет заметна. Я бы выбрал вариант с JSON и отрисовкой в браузере, чисто из любви к прекрасному.

Comments

[Алексей Уколов]

В наше время, как раз, полно слабых мобильников с медленным и далеко не безлимитным интернетом.

[imhuman]

Алексей Уколов: Это не меняет моего ответа, вариант с HTML генерирует лишний траффик и увеличивает время загрузки, вариант с JSON экономит траффик, но нагружает браузер. В результате примерно одно и тоже неудобство) Для слабых мобильников нужна своя версия сайта, где не стоит задача, как AJAX'м подгрузить 200 html элементов.

Answer 3

[Алексей Уколов]

Для чистоты эксперимента положим, что способ вставки этой строки в документ одинаков, иначе сравнивать их некорректно.
Тогда, вся разница между этими вариантами - в том, что при отдаче json нужно его разобрать и сконкатенировать строку html.
Скорее всего, на компьютере в современном браузере разницы вы не заметите.

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

Answer 4

[Rou1997]

Здесь два фактора - длина ответа (пакета), и трудоемкость обработки скриптом, так вот, длина гораздо меньше критична, к тому же зависит как писать HTML и JSON, достаточно не использовать inline CSS и JS, чтобы пакет с HTML "весил" не намного больше, а то и меньше.
Что касается до качества архитектуры, например, статуса ошибки, который надо как-то передавать клиенту, то можно сделать "гибридный" формат, то есть HTML просто "завернуть" в JSON.
Это все в общем случае, а в каждом конкретном надо отталкиваться от задачи.