На стороне сервера и на стороне клиента (AJAX) Загрузка

Question

Мне было интересно, что считается лучшей практикой. Допустим, у меня есть выпадающий виджет выбора. Должна ли она быть предварительно загружена с содержимым, когда страница обслуживается с сервера или после загрузки, должен быть сделан запрос AJAX для получения содержимого и последующего его заполнения?

Мне нравится идея загрузить его пустым и выполнить AJAX-вызов для получения содержимого. Но это приведет к более медленному времени загрузки страницы. Особенно, если на странице есть несколько виджетов, которые должны быть загружены с контентом с сервера?

Имеет ли значение количество загружаемого контента?

Для примера раскрывающегося списка я имел в виду параметры в раскрывающемся списке. Так что, если бы у меня был выбор из списка сотрудников, я имею в виду этот список сотрудников. Загружать ли пустой раскрывающийся список, и при инициализации контроллера он получает сотрудников и заполняет раскрывающийся список?

Но затем я думаю о сетке данных, скажем, 200 строк сотрудников и некоторые данные о сотрудниках, которые хранятся в базе данных. Загружаю ли я страницу, и когда при загрузке страницы есть контроллер, функция init которого получает набор данных сотрудников, заполняет и отображает сетку данных?

Или, когда страница обслуживается с сервера, она получает набор данных на стороне сервера, где она также создает сетку данных и затем загружается. Это мир программирования, к которому я привык в прошлом делать в основном PHP, JSP и ASP. Только с помощью JavaScript для некоторых интересных эффектов страницы и т. Д.

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

Answer 1

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

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

Answer 2

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

При этом в некоторых случаях AJAX ускоряет загрузку страницы.Одним из примеров является автоматическое заполнение текстового поля.Если реализована такая функция без использования AJAX, которая потребует от веб-страницы загрузки каждого возможного запроса при первой загрузке.Страница заняла бы целую вечность, чтобы загрузить все эти данные.Но автозаполнение, вероятно, выглядело бы скорее откликом, чем обычно, после загрузки страницы.

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

Answer 3

Это зависит от данных, которые вы отображаете, если вы хотите быстрых обновлений из базы данных, подход ajax подойдет.Но если ваши данные исправлены (или вам не нужно обновлять их после загрузки страницы), тогда я не должен использовать подход ajax, это больше работы (запрос json, анализ, заполнение select или что-то еще)Вы не получаете много пользы.