Тема улучшения производительности сайтов и приложений всегда должна находиться на радаре у хорошего веб-разработчика. В одних случаях грамотная работа позволяет сэкономить вычислительные ресурсы, в других — сильно улучшить опыт работы с приложениями для всей аудитории пользователей, как это на днях случилось с Wikipedia. А часто и все сразу.

Скорость работы веб-приложений условно зависит от трех составляющих: 1) как устроена сетевая инфраструктура, через которую доставляются данные и код, 2) как работает браузер и 3) как, собственно говоря, написан ваш код, который браузер должен исполнять.

Все три компоненты постоянно улучшаются и оптимизируются. Например, в сетевом стеке определенные общие улучшения несет переход на HTTP 2.0. С точки зрения браузеров, все производители постоянно работают над улучшением своих движков. В случае Chakra в Microsoft Edge, помимо общего повышения производительности работы с JavaScript, мы добавляем поддержку специализированных средств вроде Asm.js и SIMD.js, призванных повысить эффективность кода в специфичных сценариях (в Firefox и Google Chrome — аналогично).

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

Наши коллеги Дорис Чен и Джон-Дэвид Далтон подготовили целый курс с практическими советами по улучшению производительности вашего кода на HTML и JavaScript. Вы можете посмотреть его на соответствующей странице в Microsoft Virtual Academy или под катом в виде отдельных роликов.

Веб-производительность 101

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

Инструменты и измерения

Знакомство с инструментами, которые помогут отслеживать и измерять скорость работы JavaScript и HTML.

Стратегии и принципы: сетевые запросы и загружаемые данные

Подходы для реализации быстрых ответов на сетевые запросы и уменьшения объема загружаемых данных.

Стратегии и принципы: использование медиа-ресурсов

Советы по оптимизации медиа-контента и использованию преимуществ CSS3.

Стратегии и принципы: память, разметка и выполнение кода

Как управлять использованием памяти и строить эффективную структуру разметки и оптимизировать выполнение кода.

Написание быстрого JavaScript

Советы по написанию хорошего и быстрого JavaScript, включая инициализацию JS по запросу и эффективную работу с JSON, .innerHTML, числами, массивами и DOM-объектами.

Пример: настройка производительности казуальной игры

Разбор примера с казуальной игрой, в которой шаг за шагом с использованием стратегий и принципов предыдущих уроков улучшаются время запуска, отзывчивость UI, эффективность потребления памяти.

Куда писать пожелания?

Как и ранее, мы будем рады вашим отзывав и пожеланиях по улучшению работы нашего браузера. Запросы на новые возможности в области производительности можно оставлять на UserVoice, сообщать о багах следует на Microsoft Connect, а общие комментарии — в твиттере команды Edge.