Вернуть HTML или построить HTML с помощью javascript?

Я возвращаю данные о контактах для создания списка

основной html выглядит как

{repeat:20}
<div class="contact">
  <a rel="123">FirstName LastName</a>
  <div class="info">
    {repeat:5}
    <div>
      <div class="infoLabel">Age:</div>
      <div class="infoPiece">56</div>
    </div>
    {endrepeat}
  </div>
</div>
{endrepeat}

{repeat: 20} не является фактическим кодом
этот кусок кода повторяется 20 раз!--2-->

мой вопрос.

что более благотворно:

  1. создайте сторону сервера разметки, верните фактический html.
  2. верните данные Json с информацией и создайте клиент списка сторона.

для целей этого обсуждения предположим некоторые константы
  • загрузка сервера не является проблемой (мы используем высокопроизводительный сервер)
  • возвращенные данные только для целей отображения (не манипулировать)
  • мы не учитываем пользователей без JavaScript.
  • мы не учитываем ни в каких браузерах
9
ajax html jquery json php

7 ответов

Как и в большинстве случаев во время веб-разработки, вам нужно решить, что для вас важнее.

Если вы просто после производительности независимо от того, что, конечно, быстрее сделать все действия рендеринга на вашем сервере и просто доставить HTML-код. Но это, в свою очередь, в большинстве случаев стоит гибкости плюс, у вас больше трафика по проводу.

С другой стороны, просто отправка данных JSON, например, и выполнение рендеринга на клиенте, намного меньше трафика по провод, но это больше загрузка ЦП на стороне клиента. Браузеры (DOM + ECMAscript) увеличили производительность за последние годы и месяц, поэтому это то, что делают многие приложения.

но это еще не конец истории. JSON оптимизирован, но не сильно оптимизирован. Опять же, если вы действительно после выполнения вам необходимо создать свой собственный транспорт данных. Например,

|box1|item1|item2

меньше кода, чем нотация JSON

'{"box1": ["item1", "item2"]}'

Это конечно очень специфично, но это экономит много трафика, если мы идем действительно большими. Рекомендую книгу высокая производительность Javascript Николас С. Закас. Execellent книга на эту тему.

8

Если вы планируете выполнять интенсивные задачи AJAX, такие как добавление новых записей, редактирование их на лету и т. д., тогда я предлагаю вам загрузить пустую страницу, которая вызывает скрипт, который возвращает массив словарей JSON, а затем использует шаблон (бета) система, реализованная в jQuery недавно, или реализовать один самостоятельно, имеющий скрытый элемент, с spans / divs / tds помечены классами, и клонирование и заполнение его каждый раз, когда новая запись поступает.

С другой стороны, если вы собираетесь сохранить это статическое, просто используйте HTML.

вот как я управляю templating. Это эффективный способ, потому что элементы DOM существуют в дереве DOM, и клонирование дешевле, чем разбор строки, содержащей элементы.

<html>
    <head>
        <script type="text/javascript">
            $(function() {

                $contactTemplate = $("#contact_template")
                function makeContactElement(data) {
                    var $newElem = $contactTemplate.clone(true)

                    $newElem.attr("data-id", data.id)
                    $newElem.find(".name").text( data.firstName + " " + data.lastName )

                    for(var i in data.info) {
                        $newElem.find(".info").append( makeInfoElement(data.info[i]) )
                    }

                    return $newElem
                }

                $infoTemplate = $("#info_template")
                function makeInfoElement(data) {
                    var $newElem = $infoTemplate.clone(true)

                    $newElem.find("infoLabel").text(info.label)
                    $newElem.find("infoPiece").text(info.piece)

                    return $newElem
                }

                $.getJSON('/foo.bar', null, function(data) {
                    for(var i in data) {
                        $("#container").append( makeInfoElement(data[i]) )
                    }
                })
            })
        </script>
        <style type="text/css">
            .template { display: none; }
        </style>
    </head>
    <body>

        <div id="container">
        </div>

        <!-- Hidden elements -->

        <div id="contact_template" class="contact template">
          <a rel="123" class="name"></a>
          <div class="info"></div>
        </div>

        <div id="info_template" class="template">
          <div class="infoLabel"></div>
          <div class="infoPiece"></div>
        </div>
    </body>
</html>

затем, когда вы создаете новую запись, просто заполните объект данных информацией, и вы будете уверены, что весь поток элементов будет общим.

используя .clone(true) раскрывает дверь для того чтобы сделать родовое события вместо привязки живого события, что дороже.

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

<script ...>
...
$("#contact_template .delete").click(function() {
    var id = $(this).parents("contact").attr("data-id")
    $.post('/foo.bar', { action: delete, id: id }, function() { ... })
    return false
})
</script>
...
<div id="contact_template" class="contact template">
    <a href="#" class="delete">Delete</a>
</div>

удачи!

3

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

2

Я бы сказал, что делать это на стороне сервера.... поскольку JS может увеличить время загрузки страницы...

1

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

1

кажется, что вы спрашиваете мнение, а не конкретный ответ на технический вопрос. Вот мое мнение.

тенденция в эти дни к веб-приложениям, с большей функциональностью на стороне клиента и автономными функциями. Поэтому я бы сделал это на стороне клиента и отправил JSON. Это также более масштабируемо, так как серверная сторона работает меньше.

1

Так как вы не беспокоитесь о загрузке на стороне сервера и есть циклы процессора, чтобы сэкономить, идти вперед, и пусть ваш бэкэнд делать основную часть работы. Приложение будет быстрее и быстрее реагировать. Однако вы должны иметь в виду использование сети. Перебрасывание строк JSON назад и вперед чрезвычайно эффективно и уменьшает сетевую нагрузку, но требует от клиента больше работы. Как указано в этом обсуждении, браузеры в наши дни чрезвычайно быстры. Реализации JavaScript в Chrome, FF4 и IE9-одни из самых быстрых, которые мы когда-либо видели.

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

1