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 и прочих нововведений. Я буду держать вас в курсе дел и продолжу этот цикл статей с новой порцией информации.
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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 тоже подняли? Или хотя бы сделали, чтоб вначале грузилось побыстрее

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