Тест производительности: PHP Сгенерированный контент VS. Javascript и DOM через AJAX

Question

Для следующей довольно простой задачи: запросить список продуктов из БД и представить его на веб-странице, рассмотрим 2 установки:

Setup1 : запросы скриптов PHP. Весь контент создается на сервере, а вся страница возвращается клиенту.

Setup2 : Статический HTML-код "каркас страницы", запрашивающий содержимое с использованием AJAX. Полученное содержимое анализируется на стороне клиента с использованием Javascript и обрабатывается с использованием innerHTML или аналогичного.

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

Мне нужно сравнить эти два, по крайней мере, с помощью:

• время, которое потребуется для показа контента
• пользовательский опыт (настройка 1 поставляется в целом, настройка 2 поставляется в виде «двух частей»)
• масштабируемость - как сравниваются настройки, когда у меня ежедневно 100 000 запросов

Любые мысли по этому вопросу будут высоко оценены.

Answer 1

Вам может пригодиться следующий вопрос: Smarty Vs. Javascript / AJAX

Я поднял несколько пунктов в своем ответе на этот вопрос:

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

• Вы должны использовать только вызовы AJAX для загрузки динамических данных, которые не известны на момент загрузки страницы . Например, когда вы нажимаете ссылку «комментарии» под вопросом или ответом в переполнении стека. Тот факт, что вы хотите просмотреть комментарии к конкретному вопросу, неизвестен при загрузке страницы.

• Javascript должен не необходим для доступа к основным функциям вашего сайта .

• Вы должны изящно снизить функциональность, когда Javascript отключен . Например, переполнение стека работает просто отлично с отключенным Javascript. У вас нет доступа к предварительным просмотрам Markdown в режиме реального времени или динамическим уведомлениям о значках, но основные функции по-прежнему не повреждены.

• Один HTTP-запрос на сгенерированную сервером страницу будет загружаться значительно быстрее, чем запрос на загрузку страницы, которая выполняет пять или шесть дополнительных вызовов AJAX , особенно на соединениях с высокой задержкой (таких как сотовая связь). сети). См. Yahoo Рекомендации по ускорению работы вашего сайта .

Вы должны думать о Javascript как о бонусной функции, которая может быть не включена, а не как о чем-то, что следует использовать для создания критических частей вашего сайта. Есть исключения из этого правила. Если вы хотите выполнить какое-то разбиение на страницы, при котором вы нажимаете кнопку «следующая страница», и меняется только список продуктов, AJAX может быть правильным выбором. Однако вы должны убедиться, что пользователи без Javascript не исключены из просмотра всего списка.

Нет ничего более расстраивающего, чем когда страница недоступна, потому что веб-разработчик не подчиняется принципу KISS . В качестве примера возьмем Friendly's Restaurants . Я хотел проверить их меню , пока я был в торговом центре, поэтому я загрузил их сайт на свой iPhone, только чтобы узнать, что вы буквально не можете получить какую-либо значимую информацию о ресторане без Flash. Приятно иметь модные меню с крутящимися десертами повсюду, но, в конце концов, я просто хотел увидеть элементы в их меню. Я не мог этого сделать, потому что им требовался Flash. В этом случае было бы полезно постепенное снижение качества обслуживания.

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

Answer 2

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

Answer 3

AJAX, вероятно, лучший выбор, когда изменяется только небольшая часть страницы.

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

Но сначала сконцентрируйтесь на создании просто работающей страницы - вы всегда можете оптимизировать ее позже.

Answer 4

Если реализация не отстой, AJAX должен выиграть руки вниз. Среди преимуществ:

• параллелизм из-за параллельных запросов на стороне клиента (т.е. вы можете использовать несколько процессорных ядер сервера для обслуживания частей одной обслуживаемой веб-страницы, что не может быть легко сделано с помощью PHP)

• обновление только небольших частей страницы происходит быстрее (меньше данных для передачи, создания ...)

• он масштабируется намного лучше, поскольку серверу меньше работы (особенно, если вы можете переложить часть обработки, необходимой для генерации html на клиент, а не просто доставить ее)

Динамические страницы, такие как http://www.startpagina.nl/, успешно справляются с этой задачей еще до недавнего появления AJAX (1 статический файл доставлен, все настройки выполнены на стороне клиента - последний раз, когда я проверял в любом случае).

Конечно, вы можете испортить все одним способом, чтобы он стал медленнее другого.