Хорошо бы жилось разработчикам, если бы все браузеры, модели компьютеров и пользователи Ajax-приложений были одинаковыми? Возможно, но в жизни все обстоит совсем не так. Разработчики сталкиваются с бесчисленным множеством задач при разработке приложений, которые должны работать предсказуемо в разных браузерах, на разных компьютерах и с разными настройками у отдельных пользователей. Когда пользователи переносят Ajax-приложения с одного типа браузера на другой (и особенно, когда они переносят Ajax-приложение в портал Web-сервисов), нет гарантий неизменности их работы из-за присущих каждому браузеру ограничений. Джудит Майерсон, автор данной статьи, дает краткое описание этих ограничений, рассказывает, как обходить подводные камни, а также приводит некоторые полезные решения по оптимизации различий браузеров.
Познакомьтесь с некоторыми проблемами, с которыми сталкиваются разработчики Ajax-приложений, обобщенными для всех видов компьютеров, браузеров и пользователей. Нередко пользователи и разработчики работают с несколькими браузерами, и при переносе приложений с одного типа браузера на другой у разработчиков Ajax-приложений могут возникать различные проблемы. Невозможно предоставить пользователям полный кросс-браузерный эквивалент, поскольку каждый браузер имеет свойственные ему ограничения, влияющие на способ отображения (и даже работы) Ajax-приложения на Web-странице.
Широко используемыми браузерами являются Microsoft Internet Explorer, Opera, Firefox и Konquerer. За исключением Konquerer, работающим только в Linux, эти браузеры работают в операционных системах Windows, Linux и Apple Mac OSX. Поскольку в настоящее время существует несколько популярных браузеров, вам, как разработчику, принесло бы пользу освоение многочисленных различий между ними. Данная статья поможет распознать различия в аппаратном обеспечении компьютеров (такие как размеры оперативной памяти, дискового пространства и количество USB-портов), а также программные ограничения (доступность шрифтов, HTML-расширения и элементы форм). После рассмотрения проблем производительности различных вычислительных систем вы получите советы по оптимизации различий браузеров для перемещения пользователями приложений из одного браузера в другой и по преобразованию Ajax-приложений в портал Web-сервисов. Попутно вы узнаете о типичных подводных камнях Ajax-разработки (и о том, как их избежать).
Так много компьютерных систем и так мало времени!
Хотя многие разработчики для преобразования Web-страниц в Ajax-порталы предпочитают PC, пользователи Macintosh тоже выполняют данных тип преобразований. Если вы используете последнюю версию одного и того же браузера для просмотра Web-страниц на обеих системах (PC и Macintosh), то, возможно, заметили различия в отображении страниц. Различные модели PC и Macintosh могут также иметь разные размеры экранов и соответствующие размеры области отображения. Размеры и разрешение областей отображения некоторых моделей Macintosh могут значительно отличаться от некоторых моделей PC, несмотря на идентичность настроек. Эти различия в типах и моделях компьютеров могут повлиять не только на способ отображения шрифтов, но также и на многие другие настройки.
При разработке Ajax-приложений необходимо учитывать ширину и высоту страниц, а также то, как приложение будет отображаться с учетом возможных значительных различий в пользовательских настройках разрешения (например, 800x600 и 1024x768). Приложения, хорошо отображающиеся при высоком разрешении, могут потребовать длительного скроллинга от пользователей, настроивших свои компьютеры на низкое разрешение. А если ваши приложения требуют много скроллинга, вы рискуете потерять посетителей сайта.
Разные объемы оперативной памяти и дискового пространства
Если оперативной памяти для выполнения сложных вычислений недостаточно, компьютеры пользователей попытаются найти место на диске для завершения вычислений. Если свободное место в оперативной памяти или на диске закончится до завершения процесса вычислений, пользователи получат сообщение об ошибке.
Основная причина такого типа проблем в Ajax-приложениях связана со способом их работы с оперативной памятью, дисковым пространством и другими системными ресурсами. Разработчики могут либо снизить нагрузку на системные ресурсы, нужные для завершения вычисления, либо исправить приложение. Для снижения нагрузки, которая может привести к системным перегрузкам, можно, например, удалить ненужные файлы или подключить внешний USB-диск для хранения и запуска больших Ajax-приложений. Для исправления приложения можно, например, разделить его на модули и реализовать обработку исключительных ситуаций для каждого модуля, что облегчило бы идентификацию источника проблемы.
Чем больше USB-портов имеет компьютер, тем больше USB-устройств к нему можно подключить. Оптимальным для компьютера является как минимум два порта для подключения более мощных USB-устройств, например, переносного внешнего 120MB USB-диска через Y-кабель. Такое устройство полезно в тех случаях, когда закончилось место на внутреннем диске для хранения и запуска Ajax-приложений. Если необходимо больше USB-портов, чем имеется на компьютере, можно подключить USB-хаб. Если хаб поставляется с Y-кабелем, его можно подключить к обоим USB-портам.
Примечание. Если попробовать подключить большой внешний дисковый накопитель в хаб, поставляемый без адаптера, ни сам накопитель, ни портал Web-сервисов работать не будут, поскольку хаб обеспечивает меньше мощности, чем нужно для внешнего накопителя. Для работы накопителя нужен USB-хаб, обеспечивающий больше мощности.
Рассмотрим две проблемы со шрифтами: доступность и совместимость.
Текст в Internet Explorer для Windows выглядит иначе по сравнению с этим же текстом в Internet Explorer (или Navigator) для Macintosh - в частности, текст определенного размера шрифта на Macintosh выглядит меньшим по сравнению с PC. Как разработчик, вы должны знать максимальный размер шрифта, который можно установить обычными методами изменения размера шрифта на компьютерах PC и Macintosh. Шрифт, предпочитаемый определенным пользователем PC при просмотре в браузере, может быть недоступен в PC других моделей или в компьютерах Macintosh. Если определенный шрифт недоступен на определенном компьютере, используется шрифт по умолчанию (для определения доступности шрифта на PC с операционной системой Windows выберите пиктограмму Шрифты в "Панели управления", расположенной в меню Пуск).
Многие разработчики считают серьезной проблемой сделать текст одинаковым по размеру для разных браузеров и платформ. Проблема заключается в том, что браузеры по-разному позволяют пользователям менять размер шрифта. Например, в Windows браузер Internet Explorer предлагает пять размеров: Largest , Larger , Medium , Smaller и Smallest . Mozilla Firefox позволяет пользователям увеличивать или уменьшать размер шрифта, а также вернуться к первоначальному размеру. Opera, со своей стороны, позволяет пользователям настраивать размер шрифта путем выбора процентного отношения из списка. То есть, нет двух браузеров, дающих одинаковый результат при изменении размера шрифта в приложении.
Даже если установить размер шрифта описательно (например, medium ), в разных браузерах вы увидите разный результат. Одним из способов решения проблемы установки одинакового размера шрифта в нескольких браузерах является использование стилевых таблиц Cascading Style Sheets (CSS) посредством значений percentages или em для размеров шрифта. Наконец, можно использовать размеры в пикселях, основанные на разрешении экрана.
Кроме JavaScript и XML Ajax-приложения используют HTML, DHTML и Document Object Model (DOM). Ajax-приложение использует HTML для создания Web-форм, а DHTML - для разметки HTML, чтобы формы могли обновляться динамически. Поскольку DOM работает со структурой HTML, а с сервера возвращается XML, может возникнуть проблема из-за того, что более новые стандарты и элементы форм не являются общепринятыми.
Поскольку более новые части стандартов HTML лучше отображают Web-страницы в более новых версиях браузеров, большинство пользователей обновляет свои браузеры. Однако более новые стандарты часто не полностью поддерживаются в самых последних версиях некоторых браузеров, поскольку на практике стандарты опережают свою поддержку в браузерах. Хотя нет браузера, поддерживающего самую последнюю версию HTML-стандартов на 100%, некоторые браузеры ближе к этому, чем остальные.
Из-за того, что поддержка самых новых HTML-тэгов пока еще не общепринята, возможно, некоторые куски кода ваших страниц будут поняты не всеми браузерами. Если браузер не может понять часть вашей страницы, он не сможет отобразить то, что вы хотите. Например, при использовании нескольких перекрывающихся слоев (overlapping layers) в Internet Explorer можно столкнуться с некорректным их отображением в более ранних версиях этого браузера или в браузере другого типа. Opera и Firefox могут отображать небольшую часть перекрывающихся слоев, которые не отображает Internet Explorer. Я рекомендую использовать программное обеспечение для Web-разработки (например, Microsoft Expression Web), чтобы просматривать страницу в нескольких браузерах перед ее публикацией.
В зависимости от версии HTML-стандарта и используемого браузера размеры, интервалы и оформление элементов формы могут меняться. Элементы формы могут влиять на размер занимаемой области ниспадающими меню, полями ввода текста и другими элементами. Вам может понравиться отображение элементов форм на странице в одном браузере, однако в другом браузере эти же элементы формы могут отображаться не так, как вы хотели бы.
Необходимо учитывать некоторые факторы производительности приложений перед их публикацией. К ним относятся скорость работы выбранного браузера, размер всех больших XML-файлов и влияние дополнительных модулей (add-on).
По моему мнению, Opera является самым быстрым браузером для Windows-приложений. И хотя Firefox не быстрее Internet Explorer, я думаю, что он является лучшим вариантом в плане поддержки стандартов, защищенности и функциональных возможностей. Однако он еще не так быстр, как Opera. Что касается Linux-приложений, то для запуска и просмотра в KDE простых страниц самым быстрым я считаю браузер Konqueror. Однако, если встречаются сценарии или изображения, Opera - более быстрый вариант. И хотя Firefox, в общем, работает хорошо, я не думаю, что его скорость работы со сценариями, обработки кэша и страниц с изображениями сравнится с Opera. На Mac OS X Opera и Safari работают очень быстро. Safari 2 более быстр при запуске и обработке CSS, а Opera - при визуализации таблиц, работе со сценариями и историей посещений страниц. Navigator, по-видимому, является более популярным для приложений Mac OS X в сравнении с Firefox и Internet Explorer.
Хотя Opera является самым быстрым браузером для выполнения приложений, я считаю его функцию масштабирования (zoom) размеров шрифта не такой дружественной к пользователю, как варианты размеров шрифта в Internet Explorer или Ctrl-функции Firefox. Кроме того, при использовании для создания Web-страниц инструментальных средств проектирования Microsoft Expressions Web нужно иметь в виду, что Opera отсутствует в списке поддерживаемых браузеров.
Осторожно и благоразумно используйте большие текстовые XML-файлы, поскольку они могут замедлить время реакции браузера и даже затормозить сетевой трафик. Альтернативой большим текстовым XML-файлам является использование двоичных XML (подробно рассмотренных в моей первой статье "Ускорение Ajax-приложений и уменьшение уязвимости Web-сервисов", ссылка на которую приведена в разделе "Ресурсы").
Дополнительные модули браузеров
Для браузеров доступно множество различных дополнительных модулей (таких как блокировщики всплывающих окон, менеджеры закладок, темы пользовательского интерфейса), которые могут повлиять на Ajax-приложения неожиданным способом. Например, можно настроить блокировщик всплывающих окон на блокирование открытия новых окон браузера. Сразу и не поймешь, что блокировщик может перехватывать реальное состояние окна браузера и скрывать части приложения. Из-за этого Ajax-приложение может отображаться не так, как планировалось.
Десять советов и подводных камней
Ниже перечислены полезные советы по созданию оптимизированных Web-страниц, а также некоторые подводные камни, которых следует избегать. Эти предложения принесут пользу также пользователям Ajax-приложений.
- Для разработчиков. Избегайте использования HTML-расширений и с осторожностью используйте новейшие возможности языка, которые могут не поддерживаться большинством браузеров.
- Для разработчиков. Не спешите создавать страницы с возможностями HTML, поддерживаемыми самой последней версией браузера.
- Для разработчиков. Создавайте страницы, работающие с двумя последними версиями основных браузеров.
- Для разработчиков. Снижайте нагрузку на оперативную память, дисковую память и другие системные ресурсы, минимизировав их расход.
- Для разработчиков и пользователей. При необходимости обновляйте Ajax-приложения путем их перезапуска или, в крайнем случае, путем перезагрузки компьютера.
- Для разработчиков и пользователей. Регулярно удаляйте неиспользуемые и лишние файлы, освобождая дисковое пространство для оптимальной работы приложений.
- Для разработчиков и пользователей. Установите больше памяти или подключите внешний 120MB USB дисковый накопитель.
- Для разработчиков. Упростите многослойный дизайн Web-страниц для Ajax-портала.
- Для разработчиков. Разбивайте Ajax-приложение на модули для облегчения определения источника проблем. Включите в Ajax-приложение обработку исключительных ситуаций.
- Для разработчиков. Избегайте проблем с размерами шрифтов, используя CSS для установки размера шрифта в приложении через значения percentages или em. В крайнем случае, используйте размеры в пикселях.
Информация от группы разработчиков, тестировщиков, системных администраторов и потенциальных пользователей может помочь Ajax-разработчикам оптимизировать различия браузеров при разработке Ajax-приложений и преобразовании Ajax-приложения в портал Web-сервисов. Для минимизации влияния различий браузеров на Ajax-приложение необходимо серьезное планирование процессов создания, тестирования и разработки, что поможет гарантировать оптимальную производительность и предсказуемость.