что еще нового в IE9 PP3, кроме canvas и video? Огромное описание, масса картинок.
![HeaderLeft[1]](http://www.gotdotnet.ru/upload/blog/XaocCPS/34a/HeaderLeft_1__af7f68ac-8518-4986-b125-36cadf758c50.png "HeaderLeft[1]")
23 июня строго по графику (период 8 недель) вышла третья тестовая сборка IE9. На Хабре уже успели написать про этот релиз и в самых общих словах обрисовать нововведения. Кроме того, тут же на Хабре успели сравнить производительность canvas в IE9 и Chrome.
Этот пост раскроет значительно больше деталей третьей тестовой версии Internet Explorer 9 и расскажет о нововведениях в браузер, которые будут важны для разработчиков.
Это четвертая статья из серии статей про нововведения в IE9 для разработчиков. Ознакомится с предыдущими частями можно здесь: часть 1 (CSS3, HTML5, DOM), часть 2 (SVG, GPU), часть третья (профили ICC, форматы изображений, JavaScript).
В IE9 Platform Preview 3 обновлены или реализованы следующие элементы, которые были не до конца реализованы в предыдущих версиях или которые отсутствовали вовсе:
Разработчики добавили пару демонстраций изменений CSS3 и DOM:
Анимированный логотип IE, который строится на одних только элементах border-radius.
Увы, Opera 10.6 Beta из-за багов в реализации свойств CSS3 отображает логотип неверно, а анимацию проводит рваную и дерганную.
Данная демонстрация показывает возможности работы механизма DOM Traversal по фильтрации элементов DOM.
IE9 PP3 проходит тест ACID3 на 83 балла из 100. Предыдущие тестовые версии набирали 55 и 68 балла соответственно. Прогресс очевиден.
В IE9 Platform Preview 3 добавлена поддержка встраиваемых шрифтов WOFF, TrueType и OpenType. Так же поддерживается стандарт EOT.
Реализация поддержки встраиваемых шрифтов, на мой взгляд, очень важный шаг. И снова, IE9 показывает свое превосходство в поддержке рендеринга и сглаживания шрифтов с помощью GPU. Ниже примеры рендеринга WOFF в разных браузерах.
Разработчики подготовили отличную тестовую страницу со встраиваемыми шрифтами, где любой может попробовать то, как его браузер поддерживает стандарты веб-шрифтов и как он их рендерит.
В новой тестовой версии IE9 в очередной раз увеличили производительность JavaScript:
Обновленная версия IE9 содержит массивное обновление поддержки стандарта ECMAScript 5. Новые элементы представлены в следующем списке:
Разработчики добавили несколько демонстраций новых возможностей ECMAScript 5:
По поводу реализации ECMAScript 5 Internet Explorer 9 занял лидирующую позицию. Тесты показывают следующие результаты:
Многих не устраивает то, что эти тесты отправлены в W3C самим Microsoft, наверное, лень перейти по ссылке и убедиться в тесте самостоятельно, благо исходные материалы доступны всем и каждому.
Тем не менее, если вам нужно “независимое” мнение, то пожалуйста, ознакомьтесь с независимым тестированием, которое показывает полную поддержку объектов стандарта ECMAScript 5 браузером IE9:
Разработчики Internet Explorer 9 добавили в третью тестовую версию поддержку Perfomance API который является частью спецификации W3C Web Timing. С помощью этого инструмента можно протестировать ваши веб-сайты с некоторой тестовой нагрузкой. API может быть изменен со временем, поэтому пока имеет приставку “ms”. Посмотреть на работу этого API можно на специальной странице.
Самая ожидаемая новая функция IE9 PP3 – это HTML5 Video. О ней, в отличии от canvas было известно заранее. Работу с видео в IE9 показывали еще в ходе конференции MIX, но ни в первой тестовой версии ни во второй поддержки не было.
Третья версия IE9 принесла поддержку HTML5 Video и, конечно, воспроизведение видео ускоряется через GPU (но пока только в Windows 7, не в Vista).
В данный момент реализована поддержка воспроизведение видео с кодеком H.264. Поддержка WebM будет реализована позднее, вероятно в первой бета-версии IE9, которая ожидается в августе.
Кроме тега video добавлена поддержка тега audio. Для этого тега поддерживаются кодеки MP3 и AAC. Разработчики предупреждают о известном баге: в Windows Vista файлы MP3, которые кодированы с помощью LAME могут проигрываться неправильно.
Разработчики подготовили пару интересных демонстраций.
При поддержке IMDB.com запущена демонстрация с рядом трейлеров на популярные вышедшие и ожидаемые фильмы. Измеритель FPS покажет производительность вашего браузера.
Для демонстрации тега audio разработчики подготовили проигрыватель музыки со списком и горячими клавишами.
Большим сюрпризом этого выпуска IE9 стала поддержка HTML5 Canvas. Слухи о поддержке canvas однажды просачивались в интернет, но подтверждения не получили.
В IE9 PP3 полностью поддерживается Canvas Element API и большая часть Canvas 2D Context API. Работа с canvas полностью ускоряется через GPU и это заметно на демонстрациях.
Ниже представлен список того, что в canvas IE9 реализовано не полностью:
Работа с каталогом бестселлеров книг с Amazon, при выборе книга приближается и ее можно полистать. В IE9 все операции происходят моментально с FPS = 60.
Демонстрация, которая уже стала знаменитой. Ее цитируют на множестве сайтов и показывают в многочисленных роликах. В аквариуме плавают рыбки, число которых можно увеличивать. Выше скриншот в 1000 рыбок, рыбки плавают достаточно хорошо. В Opera 10.6 Beta при этих условиях – 2 FPS. Про Chrome 6 говорить не приходится, смотрите видео с независимым тестом от Download Squad.
Помните видео с высокоскоростным Chrome и картофелем? Команда IE9 ответила тестом с картошкой. Попробуйте, такой ли быстрый Chrome в этом тесте?
Следующий тест – это астероидное облако с некоторым количеством сателлитов у одного из них. Сателлиты вращаются по орбите и вы можете увеличить их количество и посмотреть как это отразится на производительности. На IE9 увеличение не сказывается вообще никак.
Следующая демонстрация показывает реализацию технологии DeepZoom, которая ранее работала либо на Ajax либо на Silverlight, на базе canvas.
Перед вами гигапиксельная панорама по которой можно свободно перемещаться приближая и отдаляя интересующие вас детали.
Последняя демонстрация – это небольшой каталог реализованных функций canvas с демонстрацией. Например, на скриншоте демонстрируется анимация на canvas:
Разработчики IE9 создали для W3C еще 118 новых тестов по множеству параметров реализации стандартов. Плюс к этому было создано еще 1309 тестов реализации ECMAScript 5. Текущая ситуация по этим тестам такова:
Как можно убедиться, IE9 сам проходит не все тесты. Ознакомится более подробно с ними и проверить каждый тест самостоятельно можно на этой странице.
Обновились и инструменты разработчика IE9:
Дополнительно доступны видео на канале Channel 9:
Обширное официальное руководство разработчика IE9 на английском языке.
За бортом IE9 по прежнему остаются такие вещи как геолокация, web workers, web sockets, css3-трансформации, WebGL и прочие стандарты, многие из которых еще не выбрались из статуса черновиков. Вероятно, что что-то из этого мы увидим в августе в бета-версии IE9. Будем ждать сюрпризов, как в случае с canvas.
Как можно убедиться, в третьей тестовой версии IE9 добавлено очень много новых возможностей, функций, API, новых стандартов.
Разработка IE9 движется полным ходом. Во многих местах IE9 догнал, а то и обогнал своих конкурентов. Будем надеятся, что темп останется прежним и финальная версия IE9 будет еще лучше.
23 июня строго по графику (период 8 недель) вышла третья тестовая сборка IE9. На Хабре уже успели написать про этот релиз и в самых общих словах обрисовать нововведения. Кроме того, тут же на Хабре успели сравнить производительность canvas в IE9 и Chrome.
Этот пост раскроет значительно больше деталей третьей тестовой версии Internet Explorer 9 и расскажет о нововведениях в браузер, которые будут важны для разработчиков.
Это четвертая статья из серии статей про нововведения в IE9 для разработчиков. Ознакомится с предыдущими частями можно здесь: часть 1 (CSS3, HTML5, DOM), часть 2 (SVG, GPU), часть третья (профили ICC, форматы изображений, JavaScript).
HTML5/CSS3/DOM/SVG/XHTML
В IE9 Platform Preview 3 обновлены или реализованы следующие элементы, которые были не до конца реализованы в предыдущих версиях или которые отсутствовали вовсе:
HTML5
- обработка свободного места согласно правилам HTML5 (HTML5-conformant whitespace handling).
CSS3
- Полная поддержка модуля CSS3 Values & Units
- deg: degrees (angle unit)
- grad: grads (angle unit)
- rad: radians (angle unit)
- turn: turns (angle unit)
- ms: milliseconds (time unit)
- s: seconds (time unit)
- rem: font size of the root element (relative length unit)
- vw: viewport width (relative length unit)
- vh: viewport height (relative length unit)
- vm: smaller of viewport width or height (relative length unit)
- ch: zero-width (width of the zero glyph in the rendering font; relative length unit
- Добавлено свойство calc(), которое позволяет высчитывать значения CSS-элементов.
- Полная поддержка модуля CSS3 Namespaces
- Полная поддержка модуля CSS3 Background & Borders, кроме того поддержка SVG-кода как фона в том числе для множественных фонов.
- Поддержка CSS3 Fonts: включение в @font-face форматов TrueType, OpenType, Open Font Format. Пока остаются не реализованными свойства CSS3 Fonts: font-size-adjust и некоторые другие.
DOM
- полная поддержка DOM L2/L3 Events;
- полная поддержка DOM Style;
- в DOM Core добавлены функции и свойства: adoptNode, compareDocumentPosition, CDATASection, importNode, inputEncoding, isDefaultNamespace, isEqualNode, isSameNode, isSupported, lookupNamespaceURI, lookupPrefix, replaceWholeText, textContent, xmlEncoding, xmlStandalone, xmlVersion, wholeText.
SVG
- реализованы элементы: gradients, patterns, masking, clipping, markers, linking & views;
- внедрение SVG в <embed>, <iframe>, <img>;
- поддержка файлов .SVGZ с удаленного сервера;
- поддержка манипуляций SVG Text: Fill, stroke, positioning (x,y,dx,dy,rotate).
XHTML/XSLT и документы “text/xml”, “application/xml”
- XML-документы отображают SVG и XHTML-содержимое;
- XML-движок обновлен с MSXML3 до MSXML6;
- XSLT может применяться к SVG и XHTML-документам.
Демонстрации
Разработчики добавили пару демонстраций изменений CSS3 и DOM:
IE Logo
Анимированный логотип IE, который строится на одних только элементах border-radius.
Увы, Opera 10.6 Beta из-за багов в реализации свойств CSS3 отображает логотип неверно, а анимацию проводит рваную и дерганную.
DOM Traversal Gallery
Данная демонстрация показывает возможности работы механизма DOM Traversal по фильтрации элементов DOM.
ACID3
IE9 PP3 проходит тест ACID3 на 83 балла из 100. Предыдущие тестовые версии набирали 55 и 68 балла соответственно. Прогресс очевиден.
Веб-шрифты
В IE9 Platform Preview 3 добавлена поддержка встраиваемых шрифтов WOFF, TrueType и OpenType. Так же поддерживается стандарт EOT.
Реализация поддержки встраиваемых шрифтов, на мой взгляд, очень важный шаг. И снова, IE9 показывает свое превосходство в поддержке рендеринга и сглаживания шрифтов с помощью GPU. Ниже примеры рендеринга WOFF в разных браузерах.
Разработчики подготовили отличную тестовую страницу со встраиваемыми шрифтами, где любой может попробовать то, как его браузер поддерживает стандарты веб-шрифтов и как он их рендерит.
ECMAScript 5 и производительность JavaScript
В новой тестовой версии IE9 в очередной раз увеличили производительность JavaScript:
Обновленная версия IE9 содержит массивное обновление поддержки стандарта ECMAScript 5. Новые элементы представлены в следующем списке:
- для Object:
- Object.defineProperty, Object.defineProperties, Object.create, Object.getPrototypeOf, Object.getOwnPropertyDescriptor, Object.getOwnPropertyDescriptor, Object.keys, Object.seal, Object.freeze, Object.isSealed, Object.isFrozen, Object.preventExtensions, Object.isExtensible;
- для Array:
- indexOf, lastIndexOf, forEach, every, some, map, filter, reduce, reduceRight;
- другие полезные методы:
- String.prototype.trim, Date.prototype.toISOString, Date.parse, Date.now, Array.isArray, Function.prototype.bind
Разработчики добавили несколько демонстраций новых возможностей ECMAScript 5:
- ECMAScript 5 Arrays – работа с новым API массивов;
- ECMAScript 5 Game – игра построенная на разных API ECMAScript похожая на легендарный Bejeweled.
По поводу реализации ECMAScript 5 Internet Explorer 9 занял лидирующую позицию. Тесты показывают следующие результаты:
Многих не устраивает то, что эти тесты отправлены в W3C самим Microsoft, наверное, лень перейти по ссылке и убедиться в тесте самостоятельно, благо исходные материалы доступны всем и каждому.
Тем не менее, если вам нужно “независимое” мнение, то пожалуйста, ознакомьтесь с независимым тестированием, которое показывает полную поддержку объектов стандарта ECMAScript 5 браузером IE9:
window.msPerformance
Разработчики Internet Explorer 9 добавили в третью тестовую версию поддержку Perfomance API который является частью спецификации W3C Web Timing. С помощью этого инструмента можно протестировать ваши веб-сайты с некоторой тестовой нагрузкой. API может быть изменен со временем, поэтому пока имеет приставку “ms”. Посмотреть на работу этого API можно на специальной странице.
HTML5 Video/Audio
Самая ожидаемая новая функция IE9 PP3 – это HTML5 Video. О ней, в отличии от canvas было известно заранее. Работу с видео в IE9 показывали еще в ходе конференции MIX, но ни в первой тестовой версии ни во второй поддержки не было.
Третья версия IE9 принесла поддержку HTML5 Video и, конечно, воспроизведение видео ускоряется через GPU (но пока только в Windows 7, не в Vista).
В данный момент реализована поддержка воспроизведение видео с кодеком H.264. Поддержка WebM будет реализована позднее, вероятно в первой бета-версии IE9, которая ожидается в августе.
Кроме тега video добавлена поддержка тега audio. Для этого тега поддерживаются кодеки MP3 и AAC. Разработчики предупреждают о известном баге: в Windows Vista файлы MP3, которые кодированы с помощью LAME могут проигрываться неправильно.
Разработчики подготовили пару интересных демонстраций.
IMDb Video Panorama
При поддержке IMDB.com запущена демонстрация с рядом трейлеров на популярные вышедшие и ожидаемые фильмы. Измеритель FPS покажет производительность вашего браузера.
HTML5 Audio XML Playlist
Для демонстрации тега audio разработчики подготовили проигрыватель музыки со списком и горячими клавишами.
Canvas
Большим сюрпризом этого выпуска IE9 стала поддержка HTML5 Canvas. Слухи о поддержке canvas однажды просачивались в интернет, но подтверждения не получили.
В IE9 PP3 полностью поддерживается Canvas Element API и большая часть Canvas 2D Context API. Работа с canvas полностью ускоряется через GPU и это заметно на демонстрациях.
Ниже представлен список того, что в canvas IE9 реализовано не полностью:
- пока нет поддержки атрибута globalCompositeOperation;
- пока нет поддержки Canvas 2D Context DOM Exceptions;
- нет поддержки drawFocusRing() и API управления фокусом.
Amazon Shelf
Работа с каталогом бестселлеров книг с Amazon, при выборе книга приближается и ее можно полистать. В IE9 все операции происходят моментально с FPS = 60.
FishIE Tank
Демонстрация, которая уже стала знаменитой. Ее цитируют на множестве сайтов и показывают в многочисленных роликах. В аквариуме плавают рыбки, число которых можно увеличивать. Выше скриншот в 1000 рыбок, рыбки плавают достаточно хорошо. В Opera 10.6 Beta при этих условиях – 2 FPS. Про Chrome 6 говорить не приходится, смотрите видео с независимым тестом от Download Squad.
Mr. Potato Gun
Помните видео с высокоскоростным Chrome и картофелем? Команда IE9 ответила тестом с картошкой. Попробуйте, такой ли быстрый Chrome в этом тесте?
Asteroid Belt
Следующий тест – это астероидное облако с некоторым количеством сателлитов у одного из них. Сателлиты вращаются по орбите и вы можете увеличить их количество и посмотреть как это отразится на производительности. На IE9 увеличение не сказывается вообще никак.
Deep Zoom
Следующая демонстрация показывает реализацию технологии DeepZoom, которая ранее работала либо на Ajax либо на Silverlight, на базе canvas.
Перед вами гигапиксельная панорама по которой можно свободно перемещаться приближая и отдаляя интересующие вас детали.
Canvas Pad
Последняя демонстрация – это небольшой каталог реализованных функций canvas с демонстрацией. Например, на скриншоте демонстрируется анимация на canvas:
Тесты
Разработчики IE9 создали для W3C еще 118 новых тестов по множеству параметров реализации стандартов. Плюс к этому было создано еще 1309 тестов реализации ECMAScript 5. Текущая ситуация по этим тестам такова:
Как можно убедиться, IE9 сам проходит не все тесты. Ознакомится более подробно с ними и проверить каждый тест самостоятельно можно на этой странице.
Инструменты разработчика
Обновились и инструменты разработчика IE9:
- вернулась вкладка Profiler для профилирования скриптов, DOM и встроенных функций;
- во вкладке Network появилась колонка Initiator, которая показывает что именно вызвало загрузку контента;
- ошибки парсинга XML теперь отображаются в консоли инструментов.
Дополнительно
Дополнительно доступны видео на канале Channel 9:
- Internet Explorer 9 Platform Preview 3: A Look at the New Demos
- Internet Explorer 9 Platform Preview 3: A Look at ECMAscript 5
- Internet Explorer 9 Platform Preview 3: A Look at Canvas
- Internet Explorer 9 Platform Preview 3: A Look at HTML5 Video Support
- Internet Explorer 9 Platform Preview 3: A Look at Canvas and Amazon.com
Обширное официальное руководство разработчика IE9 на английском языке.
За бортом
За бортом IE9 по прежнему остаются такие вещи как геолокация, web workers, web sockets, css3-трансформации, WebGL и прочие стандарты, многие из которых еще не выбрались из статуса черновиков. Вероятно, что что-то из этого мы увидим в августе в бета-версии IE9. Будем ждать сюрпризов, как в случае с canvas.
Заключение
Как можно убедиться, в третьей тестовой версии IE9 добавлено очень много новых возможностей, функций, API, новых стандартов.
Разработка IE9 движется полным ходом. Во многих местах IE9 догнал, а то и обогнал своих конкурентов. Будем надеятся, что темп останется прежним и финальная версия IE9 будет еще лучше.
