Практические советы по повышению производительности HTML и JavaScript
Тема улучшения производительности сайтов и приложений всегда должна находиться на радаре у хорошего веб-разработчика. В одних случаях грамотная работа позволяет сэкономить вычислительные ресурсы, в других — сильно улучшить опыт работы с приложениями для всей аудитории пользователей, как это на днях случилось с 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.
