Главная > AJAX, Mozilla Firefox, Open Source, web2.0, Разное > Професcиональная разработка и анализ AJAX веб-приложений с YSlow

Професcиональная разработка и анализ AJAX веб-приложений с YSlow

19 января 2008

yslowlogo.gifПриветствуем наших читателей. В последнее время мы часто затрагивали тему веб-приложений и AJAX, рассматривали и инструменты для разработки, и общие моменты проектирования и функционирования таких приложений. Но это такая тема, что наверное, можно ещё очень много написать, что мы, постепенно и делаем. Сегодня вкратце расскажем об одном уникальном инструменте, утилите, польза и мощь которой совершенно несоизмеримая с её размером (да и распространяется она бесплатно, open-source).

YSlow это дополнение к браузеру Mozilla Firefox, которое интегрируется в другой плагин, Firebug, и предоставляет статистический инструментарий для анализа производительности веб-приложения. Кроме этого, в него строен и анализатор кода, а также что-то вроде экспертной системы, которая исходя из анализа приложения выдаёт рекомендации по устранению найденных проблем.

Давайте кратко расcмотрим работу этого плагина.

На вкладке "Performance"  мы анализируем  все моменты, влияющие на производительность приложения. Анализ производится по несколько десятков пунктов, и в результате ведается подробный обзор и рекомендации. Например, если у вас не используется gzip сжатие, то в качестве рекомендации будет выдан список файлов, к которым применение сжатия даст эффект. Описание каждого пункта ведёт на страницу на сервере Yahoo, где все описано более подробно. Это своего рода мини-энциклопедия по производительности веб-приложении от разработчиков Yahoo, к которым стоит прислушаться, уж у кого-кого, а у них накоплен в этой области достаточный опыт. Кстати, саму энциклопедию можно просмотреть по этой ссылке.

performance.gif

Вкладка "Stat" позволяет проанализировать, как изменится производительность приложения, если будет использовано кеширование в браузере. Для примера, начальная страница нашего проекта, с использованием неоптимизированных версий библиотеки ExtJS, имеет размер около 1 мегабайта и требует 13 HTTP запросов, в то же время при использовании кеша трафик уменьшается до размера самой страницы (шесть килобайт всего лишь), хотя количество запросов остаётся неизменным. Статистика подсчитывается раздельно для каждого типа информации - JavaScript, CSS-изображений, стилей и т.п. Это позволяет наглядно посмотреть распределение загружаемой информации и увидеть те места в приложении, которые требует более пристального внимания.

stats.jpg

Вкладка "Components" выводит список всех компонент страницы - подключаемых файлов различных типов, а также дополнительная информация по каждому из них, например, время истечения кеша (если определено заголовком от сервера), размер оригинальный и в случае использования Gzip сжатия,   а также E-tag, используемый для управления кешированием. Эта информация очень полезна для наглядного определения, какие именно файлы могут влиять на производительность и где есть ещё резерв для оптимизации. Также можно наглядно видеть результат оптимизации на стороне сервера (ведь много параметров настраиваются именно в заголовках HTTP-ответов).

В дополнение к этим инструментам в пакет встроен статический анализатор/верификатор JavaScript кода JLint, который после анализа всего JavaScript кода, который подключается на странице, выводит построчно все найденные ошибки и неточности, которые могут влиять на работоспособность приложения. Имейте ввиду, что если вы используете фреймворки, и у вас есть минимизированный (сжатый и оптимизированный) код, он может быть неверно воспринят и анализатор укажет на ошибки. В большинстве случаев с таким кодом все хорошо, но проверить всегда стоит.

jslint.jpg

Интересны ещё несколько инструментов. YSlow позволяет получить в виде одного общего файла все используемые на странице JavaScript файлы и CSS стили. То есть, если вы подключаете к странице несколько различных файлов, к тому же определяете несколько своих функций в теле самой страницы, то после окончательной отладки и выхода вашего приложения из разработки вы сможете сэкономить несколько (а порой и десятки) запросов к серверу и трафик, если объедините весь код в один файл, который и будет подключается взамен нескольких разрозненных файлов. Это в случае сложных приложений позволит существенно сэкономить трафик и сократить время загрузки и реакции приложения.

Ну и для формирования наглядного общего отчёта в печатном виде есть функция "Printable view" - на случай, если вам понадобится наглядное подтверждение вашей работы для начальства.

Без сомнения, этот инструмент обязателен просто для серьёзной разработки веб-приложений, с другой стороны, он достаточно простой и интуитивно понятный, поэтому самостоятельно разобраться и проанализировать своё приложение у вас не займёт много времени. А вот работа по улучшению и оптимизации - да, это уже работа и часто серьёзная, в худших случаях требующая переработки даже основной архитектуры приложения. Так что чем раньше вы начнёте использовать этот инструментарий, тем быстрее и раньше, с меньшим количеством изменений, у вас выйдет качественное и быстрое веб-приложение. Успехов!

  1. 20 января 2008 в 00:20 | #1

    Спасибо, очень интересно.

  2. 20 января 2008 в 02:20 | #2

    Круто, отличная тулза, ее как раз и не хватало. Спасибо!

  3. 20 января 2008 в 02:56 | #3

    спасибо за комментарии, стараемся 😉 хотя сегодня на редкость плохой день, но статья то все же вышла хорошая и если кому полезная, то это радует 🙂

  4. 23 января 2008 в 00:30 | #4

    Очень занимательно прочесть такое, спасибо.

  5. 27 января 2008 в 17:18 | #5

    Очень полезная статья. Спасибо.

Комментирование отключено.
Developers.org.ua