запросы AJAX против эффективности DOM / браузера?кто выигрывает?

Question

У меня есть приложение, в котором используется прокручиваемый дисплей типа карусели jQuery.Этот экран содержит фотографии, принадлежащие пользователю ... Каждая фотография содержит значительный объем HTML-содержимого одного и того же уровня (данные, относящиеся к фотографии, которая отображается при наведении на нее и т. Д.) - так что эта разметка плюс тег изображения -вложенный в элемент контейнера с классом css "photo" ..

Чтобы еще больше усложнить ситуацию, каждая фотография является перетаскиваемой, и к ней прикреплено несколько других типов поведения / прослушивателей событий.

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

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

Поэтому мне интересно, что говорит сообщество ... Что лучше?перегруженный дом?или много запросов xhr?Или ответ может быть больше баланса между двумя?

Мнения?

Answer 1

Используйте ajax, загружайте только x за один раз, пока пользователь не прокрутит дальше карусель, затем загрузите x еще.

Answer 2

Многие запросы XHR - это путь. IE особенно не любит загроможденные DOM. Он прекрасно справляется со статическим отображением, но затем, если вы попытаетесь анимировать с помощью jQuery, вы получите действительно неряшливые и ужасные результаты.

Я бы определил некоторые шаблоны на стороне клиента с чем-то вроде http://api.jquery.com/jQuery.template/ и передал бы обратно метаданные JSON для вашей картинки. Таким образом, ваш сетевой трафик минимален. Поэтому загружайте как 5-10, чтобы начать, а затем буферизируйте по 10 за раз. Удалите начало карусели, когда вы получите до 100 или около того. Затем вы можете поиграть с этими «магическими числами» в зависимости от того, как они работают в IE <9 (другие браузеры должны быть в порядке). </p>

Answer 3

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

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

Answer 4

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

Если это для клиента или чего-то, что вы продаете определенному кругу людей, и вы можете «контролировать» среду, которую вы официально поддерживаете, выяснить, что это такое, и принять лучшее решение для браузера. , Например, Internet Explorer (до IE9) перегружен большим количеством запросов AJAX, и вы, вероятно, выиграете, просто замаскировав какую-либо полосу загрузки поверх страницы при заполнении DOM элементами.

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

Как правило, я бы хотел, чтобы AJAX работал ПЕРВЫМ. Это обычно самый эффективный / самый простой способ пойти прямо сейчас, если вы можете. Всегда лучше, если это работает.