Веб-разработчик, облачные технологии
25,7
рейтинг
9 июня 2010 в 10:44

Разработка → Internet Explorer 9: наиболее полное руководство разработчика (и не только), часть 3

HeaderLeft[1]
Это третья часть руководства по нововведениям в браузере IE9. В первой части я рассмотрел поддержку стандартов CSS, HTML5, DOM, вторая часть была посвящена реализации в IE9 технологии SVG. В третьей завершающей части я расскажу про поддержку в IE9 нового стандарта веб-шрифтов WOFF, ICC-профилях, форматов TIFF и JPEG XR, изменениях в JavaScript-движке, инструментах разработчика и об интерфейсе пользователя в IE9.

Веб-шрифты и WOFF


История внедрения произвольных шрифтов в веб-страницы имеет давние корни. Для многих будет откровением узнать, что первым браузером реализовавшим свойство @font-face из CSS2 был Internet Explorer 4.0 выпущенный 13 лет назад в 1997 году. Однако, из-за того, что технология не получила широкого распространения, @font-face был убран из спецификации CSS 2.1, но реализация этого свойства была во всех версиях IE начиная с 4.0.

Надо заметить, что формат шрифта для внедрения в IE не совсем обычный. Он называется Embedded OpenType, является подмножеством формата OpenType и был разработан с целью иметь возможность защитить авторское право на шрифты, а так же позволить уменьшить размер файла шрифта с помощью сжатия и исключения неиспользуемых символов. Файлы eot получались значительно меньше своих собратьев из форматов TrueType и OpenType. Формат EOT был отправлен на стандартизацию в W3C как открытый формат в 2008 году.

@font-face вернулся в спецификации CSS3 и получил реализацию в остальных браузерах только с версий Firefox 3.5+, Safari 3.1+, Opera 10+ и Chrome 4.0+. Однако, в отличии от Internet Explorer, эти браузеры позволяют внедрять шрифты форматов TrueType (TTF) и OpenType (OTF). Проблема авторского права и огромного размера некоторых шрифтов в этом случае не решается.

Новым поколением технологии веб-шрифтов должен стать стандарт WOFF (Web Open Font Format). 8 апреля 2010 года Microsoft, Mozilla и Opera вместе отправили спецификацию WOFF 1.0 в W3C. Это запрос был размещен на сайте W3C 19 апреля. WOFF предлагает те же возможности, что и EOT: он базируется на sfnt, в нем, с помощью специальных инструментов, может быть сокращен набор символов, он сжимается с помощью zlib и у него есть необязательная секция, которую могут использовать авторы для размещения зашифрованных или любых других данных.

Формат WOFF поддерживается в Firefox 3.6 и будет поддерживаться в Internet Explorer 9.

Поддержка TIFF и JPEG XR


Internet Explorer 9 нативно поддерживает форматы изображений TIFF и JPEG XR. Кроме того, IE9 использует декодирование изображений через Windows Imaging Component (WIC), что позволяет увеличить скорость декодирования до 30%.

Если с TIFF все понятно и широкоизвестен, то JPEG XR – это новый стандарт, который еще не получил широкого распространения. JPEG XR – это стандарт ISO/IEC 29199-2:2009 и часть стандарта ITU-T T.832:2009. Разработанный в Microsoft, этот стандарт значительно улучшает старый JPEG-формат и добавляет к нему множество возможностей. Основным преимуществом JPEG XR является то, что при одинаковом с JPEG размером файлов, он предлагает гораздо лучшее качество картинки. Убедится в этом можно на этой тестовой странице для Internet Explorer 9. Там же демонстрируется и поддержка браузером формата TIFF.

ICC-профили


Известная международная организация International Color Consortium стандартизирует форматы ICC profiles. Как сообщает wikipedia: “системы следующие спецификации позволяют сохранить точное цветовоспроизведение при использовании различных приложений и устройств от фазы создания до окончательной печати. Устройству ответственному за цветопередачу соответствует свой ICC-профиль”.

Таким образом поддержка ICC-профилей необходима для точной цветопередачи. И Internet Explorer 9 реализует такую поддержку для ICC v2 и ICC v4. Простой официальный тест от организации ICC позволит определить насколько точно передает цвета ваш браузер и какой версии ICC-профили он поддерживает, если вообще поддерживает.

Chakra – новый JavaScript-движок IE9


На конференции MIX10 Microsoft, помимо всех прочих нововведений в браузер, анонсировал новый JavaScript-движок под названием Chakra. Этот движок даже на ранней стадии показывал отличные результаты производительности обгоняя IE8 в 7 раз. Улучшения в Platform Preview 2 только закрепили успех.

image

В чем же особенности Chakra:

image

— фоновая компиляция JavaScript и использование многоядерных процессоров. При запуске приложения IE9 загружает страницу используя быстрый интерпретатор одновременно с этим фоновый компилятор компилирует JS-код в машинный код и возвращает его назад по завершении. Таким образом, браузер не ждет результата компилятора при запуске страницы и первая загрузка страницы происходит быстрее;

— для оптимизация типов движок IE9 использует техники, которые применяются сегодня в динамических языках: type representation, polymorphic inline caching, dynamic type inference и т.д;

— быстрый интерпретатор используется там, где необходимо немедленное исполнение кода на странице, он использует эффективный opcode, оптимизации с типами, register-based движок позиционирования;

— значительно улучшены все компоненты библиотек JS: для работы со строками, объектами, массивами, особенно регулярными выражениями.

Некоторые подробности нового движка Chakra можно узнать в этом видео: Inside IE 9’s High Performance JavaScript Engine. Там же можно посмотреть и другие видео, которые касаются Internet Explorer 9.

Инструменты разработчика


То что IE8 включил в себя инструменты разработчика – было большим шагом вперед, в них было несколько инновационных вещей для того времени, например профилировщик JavaScript. Однако, производительность инструментов сильно зависела от сложности HTML-страницы. На больших страницах инструменты тормозили и работать с ними было невозможно.

Другой претензией к инструментам разработчика IE8 было отсутствие возможности мониторинга и анализа HTTP-запросов/ответов. Было приятно узнать, что в IE9 такой инструмент появился.

image

image

Кроме того, работа со страницами с очень большим DOM тоже была улучшена, хоть и не настолько, насколько хотелось бы. Будем надеяться, что к финальной версии производительность подтянут. Из мелочей, который хотелось бы еще отметить:

— возможность менять Agent String

image

— появилась JavaScript-консоль (как справедливо заметили, она была и в IE8, но теперь ее сделали отдельной вкладкой)

image

В двух тестовых сборках IE9 не было вкладки профилировщика JavaScript, но разработчики обещают, что эта функция вернется улучшенной и обновленной.

Внешний вид


Этот раздел полностью мои подозрения, которые могут не иметь ничего общего с действительностью. Дело в том, что текущие тестовые сборки IE9 представлены в неприглядном виде: нет элементов управления, нельзя перейти назад в истории просмотра, нет строки ввода адреса (адрес вводится по ctrl+o).

image

Такому виду я нахожу два разумных объяснения:

— упрощение сделано намеренно, чтобы тестовые версии не использовались на практике и не разошлись среди обывателей, что может привести потмо к трудностям к переводу их на финальные версии. Другими словами, внешний вид IE9 сделан хардкорным для того, чтобы им пользовались только разработчики в целях тестирования;

— упрощение сделано вынуждено из-за того, что внешний вид IE9 в конечном варианте будет кардинально отличаться от IE8. Он либо не готов, либо его не хотят заранее светить, готовя сюрприз на определенное время.

Мне больше нравится вторая гипотеза. Я подозреваю, что IE9 получит WPF-интерфейс (GPU-ускоренный, естественно, как и все в WPF) с кучей визуальных эффектов. Не многие знают, что у Microsoft уже есть браузер построенный на WPF с кардинально новым интерфейсом и парой откровенно удачных решений. Это браузер – Pivot.

image

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

Мне нравятся многие идеи Pivot, но он тяжелый и явно не оптимизирован ни на что кроме работы с pivot-данными. Однако, я надеюсь, что Microsoft сделает из IE9 что-то похожее на Pivot в плане интерфейса, использовав лучшие его идеи.

Другой спекуляцией на мой взгляд может стать возможность расширения будущего IE9. Если интерфейс будет кардинально модифицирован, то претерпит изменение и система плагинов в IE. Я надеюсь, что будущая система расширений будет построена на новой удачной архитектуре MEF, которая доступна в .NET 3.5 и 4.0.

Заключение


В трех статьях я постарался рассказать про то, что именно ждет разработчиков и пользователей в новом Internet Explorer 9. Работа над ним продолжается, но и сейчас заметен тот огромный прогресс в функционале, который проделали разработчики браузера внедряя поддержку множество новых для IE вещей и механизмов. Поддержка CSS3/HTML5/SVG, новый очень быстрый JavaScript-движок, GPU-ускорение и возможно, новый внешний вид – это то, что нас ждет в IE9.

Совсем скоро, в середине или конце июня будет доступна третья тестовая версия IE9, в которой ожидается появление поддержки HTML5 video и прочих нововведений. Я буду держать вас в курсе дел и продолжу этот цикл статей с новой порцией информации.
Владимир @XaocCPS
карма
776,6
рейтинг 25,7
Веб-разработчик, облачные технологии
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (34)

  • +3
    Очень хочется MEF, но сомневаюсь, что мы его получим.
    Будем надеяться.
  • +3
    > — появилась Javascript-консоль

    Она была еще в IE8
  • +1
    Кстати о Pivot уже писалось на хабре habrahabr.ru/blogs/the_future_is_here/75791/, а тут разработчик Pivot рассказывает о том как этот браузер был построен на идеях Джефа Расника blog.tribalcode.com/?p=232
  • –1
    Насколько я понял (возможно я ошибаюсь) MEF не изолирует плагин от основного приложения, и тогда есть вероятность, что он обрушит все приложение, а для браузера это не очень хорошее свойство.
  • +1
    по сравнению с диаграммой теста SunSpider уже вышли следующие версии — Safari5, Chrome5, Opera 10.60a
    И как водится они еще «выше, сильнее, быстрее» :) чем раньше
    • 0
      Просто «выше, сильнее, быстрее» уже не настолько критичны. Тоесть когда отставание было в десятки раз, это супер существенно. А щас, ну быстрее. Ну и что? Я этого всерано как пользователь не вижу.
  • +1
    наконец-то пошел прогресс
  • 0
    Всё-таки в IE9 есть компилятор js.
    Вопрос на миллион: байткод кэшируется? Если да, то по каким принципам?
  • +2
    Не стали придумывать для разработчиков что-то свое, взяли интерфейс Firebug. Не похоже на микрософт :)
    • –1
      Приспособления для одинаковых целей часто похожи друг на друга, так любой молоток похож на полоток.
      Если что, Developer Toolbar для IE был доступен еще в IE6.
  • –5
    А мне нравятся встроенные в IE средства разработки. Уже можно уходить с тормозиллы и пользоватся IE.
    • +5
      а мне кажется IE8 далеко до firebug как жигули до мерседеса.
      Кстати в удобстве использования они примерно совпадают с приведенными аналогами.
      • –1
        > а мне кажется IE8 далеко до firebug как жигули до мерседеса.

        Что такого особенного умеет Firebug?
        • +1
          Например, налету обновляет DOM в испекторе, CSS свойства показывает снизу вверх (в порядке объявления), показывает все свойства объекта Javascript
          • –1
            Вы смеетесь?

            > налету обновляет DOM в испекторе

            IE тоже так умеет.

            > показывает все свойства объекта Javascript

            IE тоже так умеет.
            Вот, например, методы объекта jquery
            dl.dropbox.com/u/1760537/images/2010-06/js-dev.png

            > CSS свойства показывает снизу вверх (в порядке объявления)

            Да, это очень серьезное преимущество, пожалуй стоит того, чтоб перейти на Firebug.

            На самом деле в firebug, действительно, есть вещи, которые пока не умеет Developer Toolbar в IE, но почему-то вы вспомнили не их, а достаточно тривиальную базовую функциональность.
        • +3
          Вы им пользовались на «реальных» проектах?
          одно только юзабилити оставляет желать лучшего.

          там очень много не продутых моментов.
          в firebug об этих проблемах даже не думаешь
          В качестве примера — IE8 делает два окна, одно для отладки, второе с сайтом, что само по себе уже не удобно. И таких ляпостей куча.

          • –7
            Я им пользуюсь каждый день.
            Да, действительно, во время отладки JS он отваливается от основного окна.
            Пожалуй это единственная моя претензия к нему.
            Зато там есть JS консоль, которой нет (ну или я не знаю, как ее включить) в Firebug.
            • +6
              Ну если вы даже не нашли как включить JS-консоль в Firebug…
              • –4
                У меня просто стояла устаревшая версия Firebug, я обновил его и увидел эту консоль.
                В любом случае то, что я не нашел консоль в Firebug не делает Developer Toolbar хуже, а Firebug лучше.
                • +2
                  Ну как сказать… Я лично только приветствую начинания MS в деле отладки и профилирования JS, AJAX и т.п. Но любой здравомыслящий человек с мало-мальским опытом увидит, что их Developer Toolbar в IE8 слизан подчистую с Firebug. Когда я первый раз его (DT) увидел, то долго и громко смеялся. В кои-то веки здесь майкрософт выступает в лице догоняющей (и всё ещё не догнавшей) стороны. Может, конечно, они со временем обгонят по фичам файрбаг, но кричать об инновациях на каждом шагу, как это любит делать МС вообще и ХаосCPS в частности, право же, не стоит.
                  • –1
                    «любой здравомыслящий человек с мало-мальским опытом» знает, что Developer Tools появились в 2007 году и были доступны еще для IE6.

                    Также любой «любой здравомыслящий человек с мало-мальским опытом» понимает, что все инструменты для выполнения однотипных задач чем-то похожи друг на друга.
                    Тот же JS profiling впервые появился никак не в Firebug.

                    Ксатит, пока в этом его реальное, а не вымышленное преимущество.
                    Очень показательно, что никто его в пример не привел, зато все горазды на общие фразы.

                    • +1
                      Я пользовался DT в IE6 и знаю, что это такое. Пользоваться этим для каких-то связанных с JS задач нереально. В нём даже JS-консоли не было -) Firebug был действительно прорывным проектом. Я может конечно не очень хорошо знаю историю, но там, вроде бы, впервые появилась отладка JS, встроенная в браузер, JS-консоль, просмотр AJAX-запросов и ответов. По-моему, просмотр скомпилированного стиля тоже появился впервые именно в Firebug.
                      Теперь же, когда МС, опере и вебкиту стало очевидно, что те задачи, которые решил Firebug, надо решать и в других браузерах, они наконец зашевелились.
                      Где, кстати, по-вашему, впервые появился JS profiling?
                      • –1
                        > Где, кстати, по-вашему, впервые появился JS profiling?

                        Я не могу ответить на этот вопрос, сам пользовался какой-то сторонней утилитой, когда в Firebug его не было. Сейчас, скорее всего буду пользоваться Firebug, а как появится и Developer Tools.

                        Я на самом деле тоже не очень хорошо знаю историю, меня просто раздражает, зашоренность и бездумное охаиванией изделий Микрософта, только потому что это изделия Микрософта.

                        У меня такое чувство, что если завтра МС начнет массовую кормежку бездомных, то и тогда люди скажут «это они подчистую слизали у Армии спасения, матери Терезы, и т. п.», и смотрите, как хорошо и искренне кормят в других местах, и как плохо и подло у МС.

                      • –1
                        Посмотрел — в IE8 вообще-то есть профайлинг.
                        Может не такой навороченный, но вполне себе достаточный.
    • +1
      Я вас разочарую, ИЕ еще та тормозилла по сравнению Mozilla Firefox.
  • 0
    Проверил ie.microsoft.com/testdrive/Graphics/48ImageSupport/ В FF 3.6, safari 5, ie6,7,8 — везде показывает JPEG XR. ОС Win XP SP3
    В чем новшество? Или я что-то делаю не так?
    • –2
      ИМХО нужно же что-то написать было
    • –1
      для вас показывают png:

      Image quality simulated with PNG for browsers that don't support JPEG XR or TIFF
      • –1
        приношу свои извинения, был не прав
    • –1
      Извиняюсь, там png
  • +5
    Основным преимуществом JPEG XR является то, что при одинаковом с JPEG размером файлов, он предлагает гораздо лучшее качество картинки. Убедится в этом можно на этой тестовой странице для Internet Explorer 9.
    Ну а вот мой вариант 30-и килобайтного JPEG-файла. Не правда ли, он больше похож на новый JPEG XR, чем на старый JPEG, представленный в демке. Нет, я не хочу сказать, что новый революционный формат, разработанный максрософтом плох, просто он опять продвигается через обман. Как всегда.
    • –1
      даже с этим, ваш вариант больше размером и имеет артефакты которых нет на jpeg xr, достаточно наложить одно на другое и пролистать по кругу. особенно заметны характерные квадраты jpeg на фоне, которых нет у xr-версии

      кроме того jpeg xr поддерживает 128 bit, HDR, честный loseless и прозрачность
      • +4
        Едва заметную квадратность я вижу, также я вижу, что фон у jpeg xr размыт намного сильнее, чем в моем варианте.
        Но ведь дело не в этом. Вы пытаетесь перевести в русло «все равно jpeg xr немного лучше». Да лучше, лучше, не спорю я, просто демо лживо и неверно показывает степень различия.
  • 0
    Интересно, производительность Developer Tools тоже подняли? Или хотя бы сделали, чтоб вначале грузилось побыстрее

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.