Pull to refresh
211
0
Сергей Чикуёнок @chikuyonok

Фронт-энд разработчик

Send message

Анимация в браузерах и как с ней работать

Level of difficulty Medium
Reading time 10 min
Views 4.6K

Многие разработчики умеют создавать красивые и плавные анимации, но далеко не все понимают, как на самом деле они работают и что происходит «под капотом» браузера в момент их отрисовки и запуска. Вместе с тем, работа с анимацией без знания основных нюансов нередко заканчивается появлением лагов и чрезмерным потреблением ресурсов.

Месячная аудитория ОК достигает 36 млн пользователей, и почти половина из них заходит в соцсеть из браузеров — как мобильных, так и десктопных. Поэтому для нас важно, чтобы сайт со всей графикой хорошо работал на любом устройстве и в любом формате. Непрерывная работа над этой задачей позволила нам выработать экспертизу, которой мы готовы поделиться. 

Меня зовут Сергей Чикуёнок. Я ведущий разработчик в ОК. В этом материале я расскажу об основных этапах работы с анимацией для браузеров, ключевых сложностях и вариантах их нативной оптимизации. 

Читать далее
Total votes 43: ↑43 and ↓0 +43
Comments 8

Анимации на GPU: делаем это правильно

Reading time 20 min
Views 54K

Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на анимациях. Например, анимация, сделанная с помощью CSS-свойства transform выглядит гораздо приятнее и плавнее, чем анимация, сделанная через top/left. Однако на вопрос «как правильно делать анимации на GPU?» обычно отвечают что-то вроде «используй transform: translateZ(0) или will-change: transform». Эти свойства уже стали чем-то вроде zoom: 1 для IE6 (если вы понимаете, о чём я ;) для подготовки слоя для анимации на GPU или композиции (compositing), как это предпочитают называть разработчики браузеров.


Однако очень часто анимации, которые красиво и плавно работали на простых демках, вдруг неожиданно начинают тормозить на готовом сайте, вызывают различные визуальные артефакты или, того хуже, приводят к крэшу браузера. Почему так происходит? Как с этим бороться? Давайте попробуем разобраться в этой статье.

Total votes 78: ↑78 and ↓0 +78
Comments 26

Вышел Emmet v1.0

Reading time 3 min
Views 52K
Рад сообщить, что после более полугода разработки в свет вышел Emmet (бывший Zen Coding) v1.0.

Emmet — это инструмент для ускорения работы с HTML и CSS. В основе проекта лежит механизм динамических аббревиатур, которые разбираются «на лету» и из которых генерируется готовый фрагмент кода. Для написания аббревиатур используется синтаксис, похожий на CSS-селекторы, но с некоторыми дополнениями, специфическими для создания кода. Например, вот такая аббревиатура:

section>h2+ul.nav>li.nav-item$*5>a

простым нажатием клавиши превращается в:

<section>
    <h2></h2>
    <ul class="nav">
        <li class="nav-item1"><a href=""></a></li>
        <li class="nav-item2"><a href=""></a></li>
        <li class="nav-item3"><a href=""></a></li>
        <li class="nav-item4"><a href=""></a></li>
        <li class="nav-item5"><a href=""></a></li>
    </ul>
</section>

Подробности
Total votes 100: ↑98 and ↓2 +96
Comments 36

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Works in
Date of birth
Registered
Activity