CC BY
20
УДК 681.3.06
Медведев Ю.С.1, Терехов В.В.2 ©
1Профессор, доктор технических наук, Северо-Кавказский филиал ФГБОУ ВПО «Российская
академия правосудия», г. Краснодар;
2Доцент, кандидат технических наук, Филиал Военного учебно-научного центра Военно-
воздушных Сил «Военно-воздушная академия им. профессора Н.Е. Жуковского и
Ю.А. Гагарина» (г. Краснодар)
НЕКОТОРЫЕ АСПЕКТЫ ОЦЕНКИ ПРОИЗВОДИТЕЛЬНОСТИ ДИНАМИЧНЫХ
ИНТЕРАКТИВНЫХ AJAX - ПРИЛОЖЕНИЙ
Аннотация
Современные web-приложения практически не отличаются от настольных приложений по развитости пользовательского интерфейса, интерактивности. В свою очередь, это выдвигает высокие требования к их производительности. Для достижения максимальной производительности web-приложения необходимо минимизировать объём передаваемых данных и число запросов к web-серверу. В статье рассматриваются методы повышения скорости загрузки web-страниц, получившие наиболее широкое распространение.
Ключевые слова: web-приложение, web-сервер, web-браузер, Ajax-приложение. Keywords: web application, web server, web browser, Ajax application.
В недалёком прошлом большинство web-ресурсов, как правило, содержало лишь копии традиционных источников информации в формате html. Со временем web-приложения перестали быть системами распространения статического контента. На сегодняшний день это распределённые персонализированные приложения уровня предприятия [1, 339]. Разработка и поддержание таких программных комплексов является весьма сложной задачей.
Развитие технологий программирования на стороне web-браузера достаточно долго сдерживалось, так как web-браузеры обеспечивали весьма слабую совместимость, позволяя кроссбраузерно отображать только самые простые HTML-документы. Код более сложных web-приложений разрабатывался, как правило, для конкретной версии web-браузера [2, 13].
Появление Rich Internet application (RIA, «богатое Интернет-приложение») позволило расширить круг решаемых задач и расширить сферу применения web-приложений. До появления технологии Ajax web-приложения выполнялись преимущественно на стороне web-сервера. Web-браузер в таком случае играл роль пассивного монитора, который отображал полученный с web-сервера HTML-документ. Управление поведением элементов пользовательского интерфейса осуществлялось путём полной перерисовки HTML-документа, полученного новым запросом с web-сервера, а это слишком тяжеловесное решение [2, 13].
В противоположность классическому web-приложению, Ajax-приложение выполняется как на web-сервере, так и на web-клиенте, т.е. в web-браузере. Использование фонового (без перезагрузки основного HTML-документа) обмена данными между web-браузером и web-сервером позволяют создавать по-настоящему динамические web-приложения.
В настоящее время web-разработчики могут выбирать из широкого круга библиотек JavaScript, обеспечивающих кроссбраузерность (jQuery, Prototype.js, YHOO UI и др.). Такие библиотеки реализуют базовые средства разработки приложений, компоненты пользовательского интерфейса, такие как Slider, Accordion, Data Picker, визуальные эффекты, технологию drag-and-drop. К положительным особенностям библиотек относятся профессиональный художественный дизайн и глубокая проработка каждого модуля библиотеки [2, 10].
Современные многофункциональные web-приложения - это приложения, которые удобны для пользователя и обеспечивают функциональность, ставшую уже привычной для настольного (desktop) приложения. Они должны отвечать требованиям, предъявляемым к web-
© Медведев Ю.С., Терехов В.В., 2014 г.
приложениям уровня предприятия. Перечислим некоторые из них [3, 12]: наличие внешних (пользовательских) и внутренних (корпоративных) разделов сайта; единообразие внешнего вида всех генерируемых web-страниц; высокая производительность обслуживания пользователей.
Теперь невозможно представить web-приложения без использования JavaScript, графических изображений, CSS. Загрузка, кэширование и отображение этих ресурсов требует значительного времени. Для достижения максимальной производительности web-приложения необходимо минимизировать объём передаваемых данных и число запросов к web-серверу. Перечислим некоторые методы повышения скорости загрузки web-страницы, получившие широкое распространение [3, 41]: кэширование данных на стороне сервера; кэширование web-страниц (на стороне сервера либо на стороне клиента); использование многоуровневой архитектуры FrontEnd-BackEnd; использование web-сервера, построенного по FSM (Finite State Machine), сжатие передаваемых данных средствами протокола HTTP. Все они в той или иной мере способствуют повышению производительности web-приложения и могут применяться как по отдельности, так и комбинироваться разработчиками web-приложений.
Большое влияние на скорость загрузки имеет качественный программный код: применение производительных конструкций кода может дать ощутимый прирост производительности web-приложения. Скорость загрузки web-приложения также ухудшается при неявно закрытых тегах HTML. Web-разработчику следует помнить универсальное правило: web-приложение, соответствующее спецификации XHTML, быстрее загружается и отображается браузером. При помощи доступных в сети инструментов (например Offline HTMLHelp.com Validator) можно осуществить такую проверку.
Целесообразно JavaScript-код главной страницы web-приложения размещать непосредственно в HTML-файле этой страницы. JavaScript-код, необходимый для других страниц, выносят в отдельные файлы, которые подгружаются динамически при отображении этих страниц web-приложения. Использование файлов с JavaScript - кодом большого размера также может негативно сказаться на работе web-приложения. В ряде случаев вместо этого целесообразно использовать несколько файлов меньшего размера, применять программные средства, такие как LazyLoad JavaScript для динамической загрузки сценариев, разбивая логику web-приложения на независимые модули.
В случае если тег <script> размещается (как зачастую рекомендуют в учебниках по HTML) внутри элемента <head>, то страница обрабатывается только после загрузки и выполнения JavaScript - кода. Этот недостаток устраняется размещением тега <script> перед закрывающим тегом </body>. Тогда визуально сайт загружается значительно быстрее.
Web-приложение должно проектироваться таким образом, чтобы оно функционировало и при отключённом JavaScript - коде. Это позволит вначале загружать файлы изображений и CSS, а определённая задержка загрузки JavaScript-кода будет некритичной. Оптимально, если необходимые ресурсы будут загружаться по запросу в случае необходимости.
Применительно к языку PHP высокую эффективность показали программы-акселераторы, позволяющие кэшировать скомпилированный байт-код [3, 59]. Для кэширования неоткомпилированного кода предлагается использовать программу Memcached. Это может ускорить процесс обращения к базе данных [3, 62]. Отмечается прирост производительности web-приложений в обоих случаях до 300% [3, 74].
Для уменьшения размеров файлов используют специальные утилиты (YUI Compressor, PngCrush, PngOptimizer). В файлах JavaScript и CSS удаляются лишние биты: удаляются пробелы, комментарии, переводы строк, заменяются на более короткие имена переменных. Изображения также оптимизируются. В результате объём файла уменьшается в среднем на 5055%. Дополнительно на web-сервере файлы могут сжиматься утилитой GZIP. Суммарно такая обработка файлов может привести к уменьшению объёма файлов на 80-85% [3, 47].
Библиотеки JavaScript (Prototype, JQuery, Dojo, MooTools, YUI, ExtJS, и т.д.) дают возможность быстрой разработки web-компонентов, решают проблемы кросс-браузерной совместимости. При этом их применение целесообразно в том случае, если используется весь арсенал имеющихся средств. В противном случае разумнее использовать более легковесное
решение - написать код JavaScript. Следует также ограничить число обработчиков событий в web-приложении, т.к. их чрезмерное использование также неминуемо скажется на производительности web-приложения.
Технология Ajax совершила настоящий прорыв, приблизив web-приложения к традиционным интерактивным настольным приложениям. При этом разработчики не должны забывать, что Ajax-запрос выполняет полный HTTP-запрос, что эквивалентно по затратам ресурсов перезагрузке все страницы [2, 14]. Поэтому количество Ajax-запросов для сложных web-приложений должно ограничиваться.
Для динамичных интерактивных web - приложений характерна высокая нагрузка на сервер. Для повышения производительности применяют кеширование объектов, прежде всего графических изображений. Ведь зачастую объекты не изменяются, поэтому при последующих запросах они могут использоваться браузером повторно (к примеру, верхний (header) и нижний (footer) блоки web-страниц). Для загрузки изменённых файлов, как правило, изменяют их имена, программно обновляя ссылки на них в web-приложениях, применяя сценарий сборки. Для оптимизации кеширования настраиваются соответствующим образом заголовки в запросах, передавая инструкции серверу о сроке хранения ресурсов [1, 431].
Отдельного внимания заслуживает механизм взаимодействия с DOM. Производительность web-приложения в значительной мере можно повысить, грамотно используя стили вместо многократных перерисовок изображения страницы изменениями программного кода [1, 154].
Удалённые ресурсы, что очевидно, дольше загружаются по сети. Резервом увеличения производительности является использование сети доставки содержания (CDN), которая, кроме того, применяет gzip-сжатие и контроль за кешированием файлов [1, 309]. Распределение файлов по сети основывается на географическом расположении web-клиентов.
Анализ сетевого трафика, вызванного загрузкой страницы web-приложения (количество HTTP-запросов, размер и количество загружаемых ресурсов, HTTP-заголовки, сведения о кэше для исследуемого файла и т.д.) можно осуществить с помощью расширений большинства современных браузеров: Firebug для Mozilla® Firefox®, Web Inspector для Safari®, Developer Tools для Chrome®, Developer Tools для Internet Explorer® 8 [3, 112]. Такая диагностика позволяет выявить причины низкой производительности и повысить скорость работы web-приложения.
Рассмотренные в статье методы в отдельности могут не привести к значительному повышению производительности web-приложения, однако проведение комплекса предлагаемых мероприятий может значительно увеличить скорость загрузки сайта, что особенно актуально для web-приложений с большим трафиком.
Литература
1. Веллинг Л., Томсон Л. Разработка Web-приложений с помощью PHP и MySQL, 3-е изд. - М.: «Вильямс», 2006. - 880 с.
2. Хольцнер С. jQuery. Практическое применение.-М.: Эскмо, 2010. - 224 с.
3. Фаулер М. Архитектура корпоративных программных приложений. - М.:Изд.дом «Вильямс», 2006. - 540 с.
