Тематические статьи →

Быстрые и отзывчивые интерфейсы с использованием AJAX

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

AJAX (Asynchronous Javascript and XML) — это под­ход к постро­е­нию поль­зо­ва­тель­ских интер­фей­сов сай­тов и веб-при­ло­же­ний, заклю­ча­ю­щийся в «фоно­вом» обмене дан­ными бра­у­зера с веб-сер­ве­ром: при обнов­ле­нии дан­ных веб-стра­ница не пере­за­гру­жа­ется пол­но­стью — меня­ется только содер­жа­ние отдель­ных бло­ков. Работа с сай­том или веб-при­ло­же­нием за счёт этого ста­но­вится быст­рее и удоб­нее для поль­зо­ва­теля. Для реа­ли­за­ции под­хода на кли­ент­ской части исполь­зу­ется JavaScript, а реа­ли­за­ция сер­вер­ной части воз­можна на любом языке про­грам­ми­ро­ва­ния (то есть на любой платформе: на любом фрейм­ворке или на любой CMS).

Если дан­ные для какого-то блока на стра­нице на сто­роне сер­вера гене­ри­ру­ются дол­го, то этот блок может быть загру­жен уже после загрузки стра­ни­цы. Если это основ­ные дан­ные стра­ни­цы, то сле­до­ва­ние этому совету имеет смысл при гене­ра­ции дан­ных дли­тель­но­стью более 1–2 секунд или при объ­ёме дан­ных свыше 200Kb. Для допол­ни­тель­ных бло­ков этот порог несколько ниже.

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

Быст­рые AJAX-ссылки — обра­ботка пере­хо­дов по ссыл­кам при помощи AJAX, загрузка только изме­ня­е­мого содер­жа­ния, напри­мер, без пере­за­грузки под­клю­чен­ных сти­лей и скрип­тов, «шапки» сай­та, меню и «под­вала». Для реа­ли­за­ции подоб­ного отлично подойдут Turbolinks и Wiselinks.

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

«Про­грев» бра­у­зер­ного и сер­вер­ного кэша при помощи AJAX. Ваши поль­зо­ва­тели часто рабо­тают с при­ло­же­нием по какому-то опре­де­лен­ному или пред­ска­зу­е­мому сце­на­рию, а неко­то­рые шаги этого сце­на­рия тре­буют загрузки боль­шого объ­ёма дан­ных или слож­ного про­цесса гене­ра­ции? Тогда стоит заду­маться о загрузке в кеш бра­у­зера дан­ных, кото­рые вскоре потре­бу­ются вашему поль­зо­ва­те­лю, или о под­го­товке этих дан­ных на сто­роне сер­вера. Напри­мер, если поль­зо­ва­тель захо­дит на стра­ницу това­ра, то можно в фоно­вом режиме загру­зить ему уве­ли­чен­ные фото­гра­фии этого товара (еще до ини­ци­а­ции им про­цесса уве­ли­че­ния). Тут, конеч­но, важен баланс между потен­ци­аль­ным уско­ре­нием даль­ней­шей работы и вызы­ва­е­мой нагруз­кой на сер­вер и канал поль­зо­ва­теля — не стоит исполь­зо­вать дан­ный под­ход без замера ско­ро­сти канала поль­зо­ва­теля (напри­мер, для мобиль­ных поль­зо­ва­те­лей), а также без дей­стви­тель­ной обос­но­ван­но­сти пред­ва­ри­тель­ного выпол­не­ния задачи и оценки теку­щей загрузки сер­вера.

Пере­дача дан­ных, а не пред­став­ле­ния в AJAX — загрузка JSON- или XML-дан­ных и после­ду­ю­щая их шаб­ло­ни­за­ция уже на сто­роне кли­ента тре­бует меньше тра­фика между сер­вером и кли­ен­тов, меньше ресур­сов сер­вера на шаб­ло­ни­за­цию и чаще всего рабо­тает быст­рее, нежели загрузка уже зара­нее сфор­ми­ро­ван­ного HTML-кода.

Кэши­ро­ва­ние и GZIP-сжа­тие AJAX-запро­сов ускоряют отзыв­чи­вость приложений. Современные бра­у­зеры под­дер­жи­вают обра­ботку сжа­тых дан­ных, сжа­тые дан­ные меньше по объ­ёму и пере­да­ются быст­рее. Кэши­ро­ва­ние AJAX-отве­тов очень уско­ряет работу с при­ло­же­нием, про­сто используйте соответствующие заго­ловки в ответе веб-сер­вера — Expires или Cache-Control max-age, Last-Modified или ETag. Впро­чем, все правила опти­ми­за­ции JS рабо­тают и для AJAX.

Учёт ауди­то­рии с отклю­чен­ным JavaScript. Если важна ауди­то­рия с отклю­чен­ным JS (доля таких поль­зо­ва­те­лей чаще всего менее 0.5%), то акти­ва­ция AJAX-интер­фейса должна про­ис­хо­дить только при актив­но­сти JS в бра­у­зе­ре, а в слу­чае, если JS отклю­чен, дожен быть предо­став­лен клас­си­че­ский интерфейс.

Поделитесь с друзьями:


Информация о публикации:

Материал опубликован в 2014 году. Эта статья про фронтенд-разработку, про бэкенд-разработку и о веб-разработке. При пере­пуб­ли­ка­ции обя­за­тельно ука­за­ние пер­во­ис­точ­ника в виде гипер­тек­сто­вой ссылки на сайт web-creator.ru

Воспользуйтесь нашими
знаниями и опытом

Отправьте нам сообщение при помощи формы. Или напишите на e-mail s@web-creator.ru

Мы максимально оперативно ответим Вам по электронной почте или перезвоним.

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

Либо просто позвоните нам по номеру: +7 495 215-1501

Мы работаем по будним дням с 10 до 19 часов.

Комплексные услуги

Реализация «под ключ» проектов по созданию различных видов сайтов, разработка веб-приложений для автоматизации бизнес-процессов, ведение контекстных и медийных рекламных кампаний, поисковое продвижение, комплексная поддержка веб-проектов, консалтинговые услуги.