Тест производительности: Сгенерированный PHP контент VS. javascript и DOM поверх AJAX
Для следующей довольно простой задачи: запросить список продуктов из базы данных и представить его на веб-странице, рассмотрим 2 настройки:
Setup1: Запросы PHP-скриптов. Весь контент создается на сервере, и вся страница возвращается клиенту.
Setup2: Статический HTML-"скелет страницы", запрашивающий содержимое с помощью AJAX. Полученный контент анализируется на стороне клиента с помощью Javascript и визуализируется с использованием innerHTML или аналогичного.
Из конечно, вторая настройка имеет смысл только в том случае, если у вас есть страницы, категории и теги, из которых пользователь клиента может выбирать.
Мне нужно сравнить эти два, по крайней мере, с помощью:
- время, которое потребуется для обслуживания контента
- пользовательский интерфейс (setup1 поставляется целиком, setup2 поставляется в "двух частях")
- масштабируемость - как сравниваются настройки, когда у меня ежедневно 100 000 запросов
Любые мысли по этому вопросу будут очень оцененный.
4 answers
Возможно, вам будет полезен следующий вопрос: Smarty Против Javascript/AJAX
Я затронул несколько моментов в своем ответе на этот вопрос:
Вы должны использовать сценарии на стороне сервера для отображения любых данных, которые известны на момент загрузки страницы. В этом случае вы знаете, что должен отображаться список продуктов. Тот факт, что ответы на вопросы должны быть показаны, известен при загрузке страницы.
Вы должны использовать только AJAX вызовы для загрузки динамических данных, которые не известны в момент загрузки страницы. Например, когда вы нажимаете ссылку "комментарии" под вопросом или ответом на переполнение стека. Тот факт, что вы хотите просмотреть комментарии к определенному вопросу, неизвестен при загрузке страницы.
Javascript должен не требоваться для доступа к основным функциям вашего сайта.
Вы должны изящно ухудшать функциональность, когда Javascript отключен. Например, переполнение стека отлично работает с отключенным Javascript. У вас нет доступа к предварительным просмотрам уценки в реальном времени или динамическим уведомлениям о значках, но основная функциональность по-прежнему остается неизменной.
Один HTTP-запрос на страницу, созданную сервером, будет загружаться значительно быстрее, чем запрос на загрузку страницы, которая выполняет пять или шесть дополнительных вызовов AJAX, особенно при соединениях с высокой задержкой (например, в сотовых сетях). Смотрите раздел Yahoo Лучшие практики для Ускорения Работы Вашего Сайта.
Вы должны думать о Javascript как о бонусной функции, которая может быть не включена, а не как о чем-то, что следует использовать для создания важных частей вашего веб-сайта. Из этого правила есть исключения. Если вы хотите сделать какую-то разбивку на страницы, в которой вы нажимаете кнопку "следующая страница", и меняется только список продуктов, AJAX может быть правильным выбором. Однако вам следует убедиться, что пользователи без Javascript не исключены из просмотра весь список.
Нет ничего более неприятного, чем когда страница недоступна из-за того, что веб-разработчик не подчинился принципу KISS. В качестве примера возьмем Рестораны Friendly. Я хотел проверить их меню, пока был в торговом центре, поэтому я загрузил их веб-сайт на свой iPhone, только чтобы узнать, что вы буквально не можете получить никакой значимой информации о ресторане без вспышки. Приятно иметь необычные меню с потрясающими десертами летал повсюду, но, в конце концов, я просто хотел посмотреть пункты их меню. Я не мог этого сделать, потому что они требовали вспышки. В этом случае было бы полезно изящное понижение в службе.
Некоторые вещи в Интернете невозможно эффективно выполнить без Javascript. Отображение списка продуктов не является одним из них. Если вы все еще не уверены, посмотрите, как работают другие популярные веб-сайты. Я думаю, вы обнаружите, что большинство успешных, хорошо спроектированных веб-сайтов следуют рекомендации, перечисленные выше.
AJAX, вероятно, является лучшим выбором, когда изменяется только небольшая часть страницы.
Я бы рекомендовал начать с версии на стороне сервера, а затем создать AJAX поверх этого. Таким образом, вы также получите версию вашего сайта, работающую без javascript, которая вам, вероятно, понадобится в любом случае, если вы заботитесь об индексировании в поисковых системах.
Но сначала сосредоточьтесь на создании страницы, которая просто работает - вы всегда можете оптимизировать ее позже.
Производительность клиента зависит от многих факторов. Что запущено в данный момент, какой браузер, каков контент, каков CSS страницы, насколько заполнен кэш браузера, какие плагины установлены, что происходит в сети и т.д. Просто помните об этом, когда играете с цифрами.
Если реализация не будет отстойной, AJAX должен выиграть без проблем. К числу преимуществ относятся:
Параллелизм из-за параллельных запросов на стороне клиента (т. Е. Вы можете использовать несколько процессорных ядер сервера для обслуживания частей одной обслуживаемой веб-страницы, что нелегко сделать с помощью PHP)
Обновление только небольших частей страницы происходит быстрее (меньше данных для передачи, генерации ...)
Он масштабируется намного лучше, так как у сервера меньше работы (особенно, если вы можете разгрузите часть обработки, необходимой для создания html-кода, для клиента вместо того, чтобы просто доставлять его)
Динамические страницы, такие как http://www.startpagina.nl / успешно делали это задолго до недавнего увлечения AJAX (доставлен 1 статический файл, все настройки выполнены на стороне клиента - в последний раз я все равно проверял).
Конечно, вы можете все испортить с помощью любого метода, так что он станет медленнее, чем другой.