CC BY
86
ТЕХНИЧЕСКИЕ НАУКИ TECHNICAL SCIENCES
УДК 004.41/.42 ББК 32.973-018 42
Медведев Ю.С.
Доктор технических наук, профессор кафедры общеобразовательных дисциплин СевероКавказского филиала ФГБОУ ВПО «Российская академия правосудия», Краснодар, e-mail: ysm-73@yandex.ru Терехов В.В.
Кандидат технических наук, зав. 105 кафедрой механики филиала Военного учебно-нщ>чного центра Военно-воздушных Сил «Военно-воздушная академия им. проф. Н.Е. Жуковского и Ю.А. Гагарина», Краснодар, e-mail: partner2002@front.ru
К вопросу о достижении максимальной производительности
Ajax-приложений
(Рецензирована)
Аннотация
web- -
витости пользовательского интерфейса, интерактивности. В свою очередь, это выдвигает высокие
. web-
web- .
web- ,
.
Ключевые слова: web-прможение, web-cepeep, web-браузер, Ajax-пршожение. Medvedev Yu.S.
Doctor of Technical Sciences, Professor of Department of General Education Disciplines, Caucasus Branch of Russian Academy of Justice, Krasnodar, e-mail: ysm-73@yandex.ru
Terekhov V.V.
Candidate of Technical Sciences, Head of Mechanics Department 105, Branch of Military Scientific Center of Military-Air Forces, Military-Air Academy named after Professor N.E. and Yu.A. Gagarin, Krasnodar, e-mail: partner2002@front.ru
How to maximize an Ajax application's performance
Abstract
Modern web applications do not differ in practice from desktop applications in the development of the user interface and interactivity. In turn, this puts forward high demands to their performance. To achieve maximum performance of your web application you need to minimize the amount of transmitted data and the number of requests to the web server. The paper discusses the methods of increasing speed of loading the most widespread web pages.
Keywords: web application, web server, web browser, Ajax application.
В недалеком прошлом большинство web-ресурсов, как правило, содержало лишь копии традиционных источников информации в формате html. Со временем web-приложения перестали быть системами распространения статического контента. На сегодняшний день это распределенные персонализированные приложения уровня предприятия [1]. Разработка и поддержание таких программных комплексов является весьма сложной задачей.
Развитие технологий программирования на стороне web-браузера достаточно дол-
the North-
Education-Zhukovsky
го сдерживалось, т.к. web-браузеры обеспечивали весьма слабую совместимость, позволяя кроссбраузерно отображать только самые простые HTML-документы. Код более сложных web-приложений разрабатывался, как правило, для конкретной версии web-браузера [2].
Появление Rich Internet application (RIA, «богатое Интернет-приложение») позволило расширить круг решаемых задач и расширить сферу применения web-приложений. До появления технологии Ajax web-приложения выполнялись преимущественно на стороне web-сервера. Web-браузер в таком случае играл роль пассивного монитора, который отображал полученный с web-сервера HTML-документ. Управление поведением элементов пользовательского интерфейса осуществлялось путем полной перерисовки HTML-документа, полученного новым запросом с web-сервера, а это слишком тяжеловесное решение [2].
В противоположность классическому web-приложению, Ajax-приложение выполняется как на web-сервере, так и на web-клиенте, т.е. в web-браузере. Использование фонового (без перезагрузки основного HTML-документа) обмена данными между web-браузером и web-сервером позволяют создавать по-настоящему динамические web-приложения.
В настоящее время web-разработчики могут выбирать из широкого круга библиотек JavaScript, обеспечивающих кроссбраузерность (j Query, Prototype.js, YHOO UI и др.). Такие библиотеки реализуют базовые средства разработки приложений, компоненты пользовательского интерфейса, такие как Slider, Accordion, Data Picker, визуальные эффекты, технологию drag-and-drop. К положительным особенностям библиотек относятся профессиональный художественный дизайн и глубокая проработка каждого модуля библиотеки [1].
Современные многофункциональные web-приложения - это приложения, которые удобны для пользователя и обеспечивают функциональность, ставшую уже привычной для настольного (desktop) приложения. Они должны отвечать требованиям, предъявляемым к web-приложениям уровня предприятия. Перечислим некоторые из них [3]: наличие внешних (пользовательских) и внутренних (корпоративных) разделов сайта; единообразие внешнего вида всех генерируемых web-страниц; высокая производительность обслуживания пользователей.
Теперь невозможно представить web-приложения без использования JavaScript, графических изображений, CSS. Загрузка, кэширование и отображение этих ресурсов требует значительного времени. Для достижения максимальной производительности web-приложения необходимо минимизировать объем передаваемых данных и число запросов к web-серверу. Перечислим некоторые методы повышения скорости загрузки web-страницы, получившие широкое распространение [1, 2]: кэширование данных на стороне сервера; кэширование 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 высокую эффективность показали программы-акселераторы, позволяющие кэшировать скомпилированный байт-код [2]. Для кэширования неоткомпилированного кода предлагается использовать программу Memcached. Это может ускорить процесс обращения к базе данных [2]. Отмечается прирост производительности web-приложений в обоих случаях до 300% [2].
Для уменьшения размеров файлов используют специальные утилиты (YUI Compressor, PngCrush, PngOptimizer). В файлах JavaScript и CSS удаляются лишние биты: удаляются пробелы, комментарии, переводы строк, заменяются на более короткие имена переменных. Изображения также оптимизируются. В результате объем файла уменьшается в среднем на 50-55%. Дополнительно на web-сервере файлы могут сжиматься утилитой GZIP. Суммарно такая обработка файлов может привести к уменьшению объема файлов на 80-85% [2].
Библиотеки JavaScript (Prototype, JQuery, Dojo, MooTools, YUI, ExtJS, и т.д.) дают возможность быстрой разработки web-компонентов, решают проблемы кросс-браузерной совместимости. При этом их применение целесообразно в том случае, если используется весь арсенал имеющихся средств. В противном случае разумнее использовать более легковесное решение - написать код JavaScript. Следует также ограничить число обработчиков событий в web-приложении, т.к. их чрезмерное использование также неминуемо скажется на производительности web-приложения.
Технология Ajax совершила настоящий прорыв, приблизив web-приложения к традиционным интерактивным настольным приложениям. При этом разработчики не должны забывать, что Ajax-запрос выполняет полный HTTP-запрос, что эквивалентно по затратам ресурсов перезагрузке всех страниц [2]. Поэтому количество Ajax-запросов для сложных web-приложений должно ограничиваться.
Для динамичных интерактивных web-приложений характерна высокая нагрузка на сервер. Для повышения производительности применяют кеширование объектов, прежде всего графических изображений. Ведь зачастую объекты не изменяются, поэтому при последующих запросах они могут использоваться браузером повторно (к примеру, верхний (header) и нижний (footer) блоки web-страниц). Для загрузки измененных файлов, как правило, изменяют их имена, программно обновляя ссылки на них в web-приложениях, применяя сценарий сборки. Для оптимизации кеширования настраиваются соответствующим образом заголовки в запросах, передавая инструкции
серверу о сроке хранения ресурсов [2].
Отдельного внимания заслуживает механизм взаимодействия с DOM. Производительность web-приложения в значительной мере можно повысить, грамотно используя стили вместо многократных перерисовок изображения страницы изменениями программного кода [1].
Удаленные ресурсы, что очевидно, дольше загружаются по сети. Резервом увеличения производительности является использование сети доставки содержания (CDN), которая, кроме того, применяет gzip-сжатие и контроль за кешированием файлов [1, 2]. Распределение файлов по сети основывается на географическом расположении web-клиентов.
Анализ сетевого трафика, вызванного загрузкой страницы web-приложения (количество HTTP-запросов, размер и количество загружаемых ресурсов, HTTP-заголовки, сведения о кэше для исследуемого файла и т.д.), можно осуществить с помощью расширений большинства современных браузеров: Firebug для Mozilla® Firefox®, Web Inspector для Safari®, Developer Tools для Chrome®, Developer Tools для Internet Explorer® 8 [1]. Такая диагностика позволяет выявить причины низкой производительности и повысить скорость работы web-приложения.
Рассмотренные в статье методы в отдельности могут не привести к значительному повышению производительности web-приложения, однако проведение комплекса предлагаемых мероприятий может значительно увеличить скорость загрузки сайта, что особенно актуально для web-приложений с большим трафиком.
Примечания:
1. Овчаренко A.B. Ajax на примерах. СПб.: БХВ-Петербург, 2010. 432 с.
2. Хольцнер С. jQuery. Практическое применение.
.: , 2010. 224 .
3. . -
граммных приложений. М.: Изд. дом «Вильяме», 2006. 540 с.
References:
1. Ovcharenko A.V. The examples of Ajax use. SPb.: BHhV-Petersburg, 2010. 432 pp.
2. Holtsner S. jQuery. Practical application. M.: Eskmo, 2010. 224 pp.
3. Fowler M. Architecture of corporate program applications. M.: «Williams» publishing house, 2006. 540 pp.
