Internet Explorer 10 — новые горизонты производительности

После очередного превью платформы Internet Expolorer 10 стало очевидным, что Microsoft продолжает работу по оптимизации своего браузера. Как и ранее в центре внимания оказались HTML5 технологии, а также поддержка новых спецификаций и API рабочих групп W3C.

Производительность HTML5
При просмотре специально подготовленных демо непривычно было наблюдать, как всякий раз IE10 оказывался быстрее своих конкурентов — Chrome, Firefox и Opera. Internet Explorer 10 действительно показал незаурядную скорость при работе с HTML5 видео, аудио и canvas, а также CSS3 градиентами.

Демо Flying Images

Асинхронное выполнение скриптов
Наличие атрибута async делает загрузку и выполнение кода JavaScript асинхронной относительно других объектов страницы. Тем самым решается проблема нежелательных блокировок и уменьшается общее время загрузки в тех случаях, когда между файлами скриптов не явных зависимостей.

Данный атрибут является частью стандарта W3C HTML5 и уже поддерживается многими современными браузерами.

Web Workers
Для большинства браузеров традиционной являлась однопоточная реализация, при которой выполнение скриптов и рендеринг страниц не могли выполняться параллельно. Внедрение технологии Web Workers сделало возможным фоновое выполнение кода JavaScript.

Новый объект Worker в качестве аргумента требует имя файла, который будет получен посредством асинхронного запроса к серверу:

var myWorker = new Worker('worker.js');

Взаимодействие с фоновым потоком осуществляется с помощью системы сообщений. Для отправления данных используется метод postMessage, а получение ответа реализуется через событие onmessage.

В следующем примере показано создание Worker потока, который ожидает сообщение от скрипта:

var hello = new Worker('hello.js');

hello.onmessage = function(e) {

alert(e.data);

};

«Рабочий» поток в свою очередь отправляет сообщение для отображения на экране

postMessage('Hello world!');

Page Visibility API
Page Visibility позволяет разработчикам явно отслеживать текущее состояние документа и назначать необходимые действия при изменениях видимости страницы сайта. API включает в себя два свойства document.hidden и document.visibilityState, а также одно событие visibilitychange.

С помощью Page Visibility API можно более эффективного распоряжаться вычислительными ресурсами, не нагружая ПК пользователей в те моменты, когда страница невидима. Кроме того, можно более грамотно реализовывать фоновое предварительное кэширование статических объектов.

Методы requestAnimationFrame и setImmediate
Поддержка двух новых методов requestAnimationFrame и setImmediate станет решением ряда проблем, связанных с выполнением кода JavaScript.

Часто случается, что анимации на веб-страницах выполняются в то время, когда документ находится на фоновой вкладке, или окно браузера и вовсе свернуто. Также нередким случаем является отсутствие синхронизации между частотой дисплея и таймерами JavaScript.

Например, если раньше интервалы для анимации задавались с помощью setInterval:

var handle = setInterval(renderLoop, PERIOD);

то теперь можно использовать более эффективный метод requestAnimationFrame, который автоматически выравнивает частоту обновления приложений и интервалы рендеринга самого бразузера:

var handle = msRequestAnimationFrame(renderLoop);

В свою очередь метод setImmediate является альтернативой методу setTimeout с нулевым периодом тайм-аута. Если ранее код имел вид:

var handle = setTimeout(spellCheck, 0);

То более эффективный подход будет выглядеть следующими образом:

var handle = msSetImmediate(spellCheck);

Источник: IEBlog