Загрузка HTML прямо из запроса ajax или клонирование шаблонов и вставка данных с помощью javascript?

Question

Я работаю над страницей, похожей на форум, где переключение между страницами потока извлекает html из запроса ajax и вставляет его в контейнер div.

Мой вопрос, будет ли быстрее просто получить базовые данные через поиск json, а затем сделать что-то вроде клонирования шаблона сообщения и вставки необходимых данных в этот шаблон?

Answer 1

Обычно я отправляю только данные JSON из бэкэнда, которые затем вставляю в HTML-страницу, как мне нравится.

ИМХО это немного отделяет серверную часть от внешнего интерфейса и делает API-интерфейс на стороне сервера более универсальным.

Я размещаю предопределенные части HTML на веб-сайте, после чего они заполняются данными JSON. Недавно я создал приложение, в котором вы можете просматривать изображения. Всегда 10 изображений одновременно. HTML выглядело так:

<table>
    <tr>
        <td id="img_0"></td>
        <td id="img_1"></td>
        <td id="img_2"></td>
        ....
        <td id="img_9"></td>
    </tr>
</table>

JSON был чем-то вроде этого (грубый пример):

{images:
    [
        {imgTag: "<img src='foo.jpg' />"},
        {imgTag: "<img src='foo.jpg' />"},
    ]
}

И в Javascript я сделал:

for(var i = 0; i < 10; i++) {
    var currentImage = response.images[i];
    if(currentImage) document.getElementById('img_' + i).innerHTML = currentImage.imgTag;
    else document.getElementById('img_' + i).innerHTML = '';
}

Это было выполнимо, потому что объем данных (в данном случае изображений) был известен: всегда 10, максимум. Сетка была предопределена и могла быть заполнена данными JSON.

Конечно, это очень быстро, потому что ответы JSON в большинстве случаев очень малы (в моем случае <2 КБ). Насколько я знаю, вставка данных с помощью innerHTML в уже существующие элементы выполняется достаточно быстро. </p> <ч />

Получение уже полного HTML-запроса от AJAX-запроса к серверу - вариант для меня, когда HTML довольно сложен, и я не могу заранее определить части HTML на веб-сайте, которые затем заполняются данными JSON.

Например, когда у меня есть запись в блоге, и все комментарии к этой записи в блоге загружаются через AJAX (== глупый пример), тогда я собираюсь построить HTML на стороне сервера. Поскольку количество комментариев может быть любым от 0 до N.

Конечно, вы можете загрузить комментарии из бэкэнда следующим образом:

{comments:
    [
        {text: "some text"},
    ]
}

А затем вставьте его на html-страницу, создав dom-узлы:

for(var i = 0; i < response.comments.length; i++) {
    var currentComment = response.comments[i];

    var commentDiv = document.createElement('div');
    commentDiv.className = "comment"
    commentDiv.innerHTML = currentComment.text;

    document.getElementById('commentContainer').appendChild(commentDiv);
}

Но обычно это , а не вариант для меня: создание сложного HTML с использованием document.createElement ('div'), на мой взгляд, очень раздражает.

Существуют механизмы шаблонов Javascript, которые могут упростить эту задачу, но я никогда не использовал их.

В этом примере построение полного, вероятно, сложного HTML на стороне сервера мне кажется намного лучше.

С помощью GZIP вы можете уменьшить объем данных, передаваемых по проводам, а с помощью умной стратегии кэширования можно снизить нагрузку на сервер.

<ч />

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

Это не определенные законы, поэтому ваш пробег будет отличаться. Только мой опыт работы с веб-приложениями AJAX.

Answer 2

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

Answer 3

Вы столкнулись с двумя возможными накладными расходами, как я вижу:

1. Обычный HTML-запрос в Ajax-запросе займет больше времени, чем необработанные данные, но после обработки он не обрабатывается.
2. Необработанные данные не займут столько времени, сколько обычный HTML, но потребуют небольшой обработки на клиенте, чтобы вставить их в шаблон HTML. Это действительно зависит от того, как вы это делаете.

Я бы выбрал вариант № 2 - следует использовать любую возможность уменьшить объем данных, отправляемых клиенту. Просто мое мнение ...