Оптимизация скорости
Хочу оставить здесь две ссылки, которые регулярно приходится искать:
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
https://csstriggers.com/
Они про оптимизацию скорости отрисовки страницы в браузере при изменении разных свойств элементов в JS и CSS.
Каждый раз, когда что-то меняется в коде, браузер делает операции reflow (перестроение дерева DOM элементов) и repaint (изменение внешнего вида элементов). Иногда эти операции могут быть очень тяжёлыми и могут очень сильно замедлить отрисовку.
Например, вычисление
Если подробнее, то вот это хороший курс на тему, который я когда-то сама смотрела:
https://www.udacity.com/course/browser-rendering-optimization--ud860
#практика #оптимизация
Хочу оставить здесь две ссылки, которые регулярно приходится искать:
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
https://csstriggers.com/
Они про оптимизацию скорости отрисовки страницы в браузере при изменении разных свойств элементов в JS и CSS.
Каждый раз, когда что-то меняется в коде, браузер делает операции reflow (перестроение дерева DOM элементов) и repaint (изменение внешнего вида элементов). Иногда эти операции могут быть очень тяжёлыми и могут очень сильно замедлить отрисовку.
Например, вычисление
element.offsetWidth в цикле может иногда привести к заметным зависаниям. А изменение свойств transform или opacity работает обычно быстрее, чем абсолютное позиционирование, потому что не влияет на элементы вокруг и использует аппаратное ускорение.Если подробнее, то вот это хороший курс на тему, который я когда-то сама смотрела:
https://www.udacity.com/course/browser-rendering-optimization--ud860
#практика #оптимизация
👍1
Как инвертировать фото с помощью HTML5 canvas
Сегодня работа как-то не клеилась, поэтому я решила поучаствовать в еженедельном Codepen Challenge. В этот раз тема — эффекты наведения на изображениях.
https://codepen.io/gnykka/pen/LYpxJEe
Это небольшой пример инвертирования части картинки. Я загружаю фото, рисую его на HTML5 canvas, попутно сохраняя и инвертируя цвета. При наведении мышки я определяю, какая часть изображения попала в область, и рисую её в инвертированном варианте.
Похожий подход я использовала, когда делала один из проектов в прошлогоднем Парке Интуиции, MDWRLD. Там все фото и картинки рисуются на наскольких canvas. Они смещаются с разной скоростью и этим создают эффект параллакса. Быстрой перерисовки и плавности скролла удалось добиться благодаря предобработке фото при загрузке. Каждое фото загружается, запоминается в виде последовательности своих пикселей и на всякий случай сразу же инвертируется. А потом уже очень просто при любом сдвиге поместить эту последовательность в новое место.
Главная проблема canvas в том, что обычно при любых изменениях перерисовывать приходится сразу всё. В svg проще — изменил один элемент и всё готово. Ну и векторная графика прекрасно масштабируется, а на canvas вечно надо ухищряться, чтобы избежать размытости.
#практика #canvas
Сегодня работа как-то не клеилась, поэтому я решила поучаствовать в еженедельном Codepen Challenge. В этот раз тема — эффекты наведения на изображениях.
https://codepen.io/gnykka/pen/LYpxJEe
Это небольшой пример инвертирования части картинки. Я загружаю фото, рисую его на HTML5 canvas, попутно сохраняя и инвертируя цвета. При наведении мышки я определяю, какая часть изображения попала в область, и рисую её в инвертированном варианте.
Похожий подход я использовала, когда делала один из проектов в прошлогоднем Парке Интуиции, MDWRLD. Там все фото и картинки рисуются на наскольких canvas. Они смещаются с разной скоростью и этим создают эффект параллакса. Быстрой перерисовки и плавности скролла удалось добиться благодаря предобработке фото при загрузке. Каждое фото загружается, запоминается в виде последовательности своих пикселей и на всякий случай сразу же инвертируется. А потом уже очень просто при любом сдвиге поместить эту последовательность в новое место.
Главная проблема canvas в том, что обычно при любых изменениях перерисовывать приходится сразу всё. В svg проще — изменил один элемент и всё готово. Ну и векторная графика прекрасно масштабируется, а на canvas вечно надо ухищряться, чтобы избежать размытости.
#практика #canvas
MDWRLD
Inspiration and great creative power!
👍1
Сравнение библиотек для рисования
На прошлой неделе я углубилась в изучение существующих библиотек рисования графики. Их оказалось просто огромное количество под совершенно разные нужды. Например, PixiJS — очень мощный и популярный движок для создания игр, а Draw2d заточен под рисование диаграмм или графов.
Моя задача была понять, у какой библиотеки больше возможностей и фич, с какой удобнее работать и какая быстрее всего перерисовывает сцены с большим количеством элементов. Я выбрала три библиотеки (PixiJS, Two.js и Paper.js) и решила их сравнить.
Результат можно найти тут: benchmarks.slaylines.io
Код — здесь: github.com/slaylines/canvas-engines-comparison
Почему такой выбор? Нужна была библиотека, которая умела бы быстро перерисовывать весь экран, а значит, нужен был canvas (желательно с поддержкой webgl). PixiJS — очень популярная штука, вокруг которой есть большое комьюнити (это обычно безумно важно при разработке чего-то не одноразового). Two.js на первый взгляд показался очень симпатичным, простым и минималистичным. Paper.js приглянулся направленностью на работу с векторной графикой.
А выводы из сравнения у меня такие:
1. PixiJS — очень крутой и шустрый движок, который умеет без проседания fps рисовать тысячи элементов. При этом он довольно сложный, с огромным количеством всего. Не стала бы брать его на маленькие и простые проекты, но вот для больших и долгих он в самый раз.
2. Two.js умеет переключаться между webgl, canvas и svg. В режиме webgl может без заметных тормозов перерисовывать 5 тысяч элементов. Но первый раз рисует эти 5 тысяч очень долго.
3. У Paper.js нет поддержки webgl, поэтому даже 2 тысячи элементов начинают тормозить. Ещё там можно использовать специальный тип скриптов для быстрого создания сцены, хотя я этим не воспользовалась и писала всё в обычном JS коде.
#практика #canvas
На прошлой неделе я углубилась в изучение существующих библиотек рисования графики. Их оказалось просто огромное количество под совершенно разные нужды. Например, PixiJS — очень мощный и популярный движок для создания игр, а Draw2d заточен под рисование диаграмм или графов.
Моя задача была понять, у какой библиотеки больше возможностей и фич, с какой удобнее работать и какая быстрее всего перерисовывает сцены с большим количеством элементов. Я выбрала три библиотеки (PixiJS, Two.js и Paper.js) и решила их сравнить.
Результат можно найти тут: benchmarks.slaylines.io
Код — здесь: github.com/slaylines/canvas-engines-comparison
Почему такой выбор? Нужна была библиотека, которая умела бы быстро перерисовывать весь экран, а значит, нужен был canvas (желательно с поддержкой webgl). PixiJS — очень популярная штука, вокруг которой есть большое комьюнити (это обычно безумно важно при разработке чего-то не одноразового). Two.js на первый взгляд показался очень симпатичным, простым и минималистичным. Paper.js приглянулся направленностью на работу с векторной графикой.
А выводы из сравнения у меня такие:
1. PixiJS — очень крутой и шустрый движок, который умеет без проседания fps рисовать тысячи элементов. При этом он довольно сложный, с огромным количеством всего. Не стала бы брать его на маленькие и простые проекты, но вот для больших и долгих он в самый раз.
2. Two.js умеет переключаться между webgl, canvas и svg. В режиме webgl может без заметных тормозов перерисовывать 5 тысяч элементов. Но первый раз рисует эти 5 тысяч очень долго.
3. У Paper.js нет поддержки webgl, поэтому даже 2 тысячи элементов начинают тормозить. Ещё там можно использовать специальный тип скриптов для быстрого создания сцены, хотя я этим не воспользовалась и писала всё в обычном JS коде.
#практика #canvas
benchmarks.slaylines.io
Canvas Engines Comparison
Render multiple moving rectangles to compare a number of canvas engines.
Моё вчерашнее демо вызвало довольно активное обсуждение на Hacker News:
Show HN: Canvas engines performance comparison – PixiJS, Two.js, and Paper.js
Выделю интересный тредик про рисование текстур. Есть пример использования PixiJS для рисования огромного количества зайцев. Можно добавить больше 50 тысяч зайцев и не просесть в fps. Это действительно впечатляюще, хотя вполне объяснимо: там загружается всего 5 текстур зайцев, потом они просто переиспользуются. Текстуры работают быстрее чистого рисования графики, можно было бы сделать текстуру квадрата и добавлять её на поле. Хотя это было бы нечестно по отношению к другим библиотекам.
Вот ещё полезное обсуждение, почему все эти фреймворки не используются в обычных веб сайтах, раз они так быстро всё рисуют. Если кратко: из-за недоступности элементов, когда они просто отрисованы на канвасе и недоступности технологий типа webgl на всех устройствах.
И немного дискуссии про циклы и что лучше читается в коде: map, forEach и тд или старый добрый for loop. Мне тут справедливо указали на то, что обычный цикл for быстрее моего любимого функционального подхода.
Появился запрос сделать такой же тест на Greensock. Никогда не использовала, но будет интересно попробовать. Ещё писали про P5.js. Тоже можно добавить, хотя P5 просто не создана для подобных вещей, она заточена под генеративную графику и небольшие красивые примеры.
Напишите мне, если было бы интересно посмотреть какую-то ещё библиотеку.
#практика #обсуждения
Show HN: Canvas engines performance comparison – PixiJS, Two.js, and Paper.js
Выделю интересный тредик про рисование текстур. Есть пример использования PixiJS для рисования огромного количества зайцев. Можно добавить больше 50 тысяч зайцев и не просесть в fps. Это действительно впечатляюще, хотя вполне объяснимо: там загружается всего 5 текстур зайцев, потом они просто переиспользуются. Текстуры работают быстрее чистого рисования графики, можно было бы сделать текстуру квадрата и добавлять её на поле. Хотя это было бы нечестно по отношению к другим библиотекам.
Вот ещё полезное обсуждение, почему все эти фреймворки не используются в обычных веб сайтах, раз они так быстро всё рисуют. Если кратко: из-за недоступности элементов, когда они просто отрисованы на канвасе и недоступности технологий типа webgl на всех устройствах.
И немного дискуссии про циклы и что лучше читается в коде: map, forEach и тд или старый добрый for loop. Мне тут справедливо указали на то, что обычный цикл for быстрее моего любимого функционального подхода.
Появился запрос сделать такой же тест на Greensock. Никогда не использовала, но будет интересно попробовать. Ещё писали про P5.js. Тоже можно добавить, хотя P5 просто не создана для подобных вещей, она заточена под генеративную графику и небольшие красивые примеры.
Напишите мне, если было бы интересно посмотреть какую-то ещё библиотеку.
#практика #обсуждения
👍1
SVG анимации
Последние 2 недели я активно делала проект для Парка Интуиции. О нём я пока молчу до публичной публикации, но расскажу про некоторые особенности разработки. Я делала для него много svg анимаций в том числе зависящих от скролла. Решила собрать несколько небольших примеров и поделиться ими.
1. https://codepen.io/gnykka/pen/KKVVXMv
Самый простой способ сделать анимацию — нативный, в самом svg. Наряду со стандартными и привычными всем элементами типа path, circle и т.д. в svg есть элемент animation. Можно сделать автоматическую анимацию какого-то свойства (например, прозрачности) или запускать анимацию из кода. Можно взять элемент animateMotion и сделать анимацию движения по траектории.
2. https://codepen.io/gnykka/pen/QWyyqJQ
Второй простой и стандартный способ — анимация в css с помощью keyframes. Тут уже svg ничем не отличается от любого другого html элемента. Удобство в том, что можно делать сложные анимации относительно просто без написания кода. Здесь, кстати, может помочь отличная шпаргалка про easing functions.
3. https://codepen.io/gnykka/pen/ZEbqraW
Ну и сложный способ для ценителей — через код можно сделать практически всё, что угодно. Например, морфинг объектов. Или можно привязывать изменение свойств элементов к положению скролла. Или объединить и делать морфинг по скроллу (как раз наш случай). В примере выше я тестировала плагин Greensock, но потом выяснила, что он доступен только по подписке. Ещё я попробовала KUTE.js, но там морфинг какой-то ограниченный и не очень красивый. Так и не нашла удобного инструмента, посоветуйте мне, если знаете такой!
А то, что у нас получилось, покажу на следующей неделе.
#практика #svg #анимации
Последние 2 недели я активно делала проект для Парка Интуиции. О нём я пока молчу до публичной публикации, но расскажу про некоторые особенности разработки. Я делала для него много svg анимаций в том числе зависящих от скролла. Решила собрать несколько небольших примеров и поделиться ими.
1. https://codepen.io/gnykka/pen/KKVVXMv
Самый простой способ сделать анимацию — нативный, в самом svg. Наряду со стандартными и привычными всем элементами типа path, circle и т.д. в svg есть элемент animation. Можно сделать автоматическую анимацию какого-то свойства (например, прозрачности) или запускать анимацию из кода. Можно взять элемент animateMotion и сделать анимацию движения по траектории.
2. https://codepen.io/gnykka/pen/QWyyqJQ
Второй простой и стандартный способ — анимация в css с помощью keyframes. Тут уже svg ничем не отличается от любого другого html элемента. Удобство в том, что можно делать сложные анимации относительно просто без написания кода. Здесь, кстати, может помочь отличная шпаргалка про easing functions.
3. https://codepen.io/gnykka/pen/ZEbqraW
Ну и сложный способ для ценителей — через код можно сделать практически всё, что угодно. Например, морфинг объектов. Или можно привязывать изменение свойств элементов к положению скролла. Или объединить и делать морфинг по скроллу (как раз наш случай). В примере выше я тестировала плагин Greensock, но потом выяснила, что он доступен только по подписке. Ещё я попробовала KUTE.js, но там морфинг какой-то ограниченный и не очень красивый. Так и не нашла удобного инструмента, посоветуйте мне, если знаете такой!
А то, что у нас получилось, покажу на следующей неделе.
#практика #svg #анимации
Steamgraph
Давненько не брала я в руки шашек! То есть не кодила красивых и бессмысленных графиков на d3. Вчера мне внезапно захотелось сделать steamgraph. Получился такой динамический пример:
https://codepen.io/gnykka/pen/ZEQJOmG
#практика #d3
Давненько не брала я в руки шашек! То есть не кодила красивых и бессмысленных графиков на d3. Вчера мне внезапно захотелось сделать steamgraph. Получился такой динамический пример:
https://codepen.io/gnykka/pen/ZEQJOmG
#практика #d3
CodePen
Dynamic Steamgraph
Dynamic steam chart with randomized data....
Генератор супрематизма
В последнем Парке Интуиции во время обсуждений возможных проектов прозвучала идея сделать генератор картин Кандинского. Мне, как большому любителю абстрактного и современного искусства, эта идея сразу приглянулась.
Спустя два месяца я внезапно к этой идее вернулась и сделала на выходных небольшой генератор супрематических картин:
https://codepen.io/gnykka/pen/bGEJddK
Расскажу, как это всё работает. На полотне создаются от 6 до 10 случайных фигур (прямоугольников или эллипсов) в случайных местах и случайного размера. Ещё на полотне случайно располагаются две точки притяжения, которые влияют на положение созданных фигур. Степень влияния определяет ещё один случайный параметр каждой фигуры — масса. Чем больше масса, тем меньше сдвигается фигура под воздействием притяжения.
А кредитсы за помощь в адаптации гравитационной теории уходят Мише в @ohblog.
#практика #generativeart
В последнем Парке Интуиции во время обсуждений возможных проектов прозвучала идея сделать генератор картин Кандинского. Мне, как большому любителю абстрактного и современного искусства, эта идея сразу приглянулась.
Спустя два месяца я внезапно к этой идее вернулась и сделала на выходных небольшой генератор супрематических картин:
https://codepen.io/gnykka/pen/bGEJddK
Расскажу, как это всё работает. На полотне создаются от 6 до 10 случайных фигур (прямоугольников или эллипсов) в случайных местах и случайного размера. Ещё на полотне случайно располагаются две точки притяжения, которые влияют на положение созданных фигур. Степень влияния определяет ещё один случайный параметр каждой фигуры — масса. Чем больше масса, тем меньше сдвигается фигура под воздействием притяжения.
А кредитсы за помощь в адаптации гравитационной теории уходят Мише в @ohblog.
#практика #generativeart
codepen.io
Suprematism Art Generator v1
...
Временная ось на D3js
Года 2 назад я работала над одним проектом, где делала систему визуализаций медиакампаний. Там было порядочно графиков: тренды, сентимент, распространение новостей. Объединяло их то, что везде была нужна удобная и понятная временная ось.
Оси в D3js меня порядочно раздражают обычно, потому что они очень неуниверсально сделаны. Даже у простой числовой оси нельзя из коробки сделать бесконечный зум, чтобы двигаться по адекватным значениям. Казалось бы, очевидный случай: округляемые тики с шагом кратным 1, 2, 5 или 10 — но нет, такое приходится делать вручную.
В итоге для временной оси мне пришлось сделать свою реализацию:
https://codepen.io/gnykka/pen/xyKJZL
У этой оси есть 4 типа отображения (в зависимости от размера и уровня зума) — года, кварталы, месяцы и дни. Полупрозрачным красным обозначены выходные.
Здесь всего 2 зависимости: D3js (для модификаций svg элементов и преобразования дат в координаты экрана) и moment.js (простых и удобных операций с датами).
#практика #d3
Года 2 назад я работала над одним проектом, где делала систему визуализаций медиакампаний. Там было порядочно графиков: тренды, сентимент, распространение новостей. Объединяло их то, что везде была нужна удобная и понятная временная ось.
Оси в D3js меня порядочно раздражают обычно, потому что они очень неуниверсально сделаны. Даже у простой числовой оси нельзя из коробки сделать бесконечный зум, чтобы двигаться по адекватным значениям. Казалось бы, очевидный случай: округляемые тики с шагом кратным 1, 2, 5 или 10 — но нет, такое приходится делать вручную.
В итоге для временной оси мне пришлось сделать свою реализацию:
https://codepen.io/gnykka/pen/xyKJZL
У этой оси есть 4 типа отображения (в зависимости от размера и уровня зума) — года, кварталы, месяцы и дни. Полупрозрачным красным обозначены выходные.
Здесь всего 2 зависимости: D3js (для модификаций svg элементов и преобразования дат в координаты экрана) и moment.js (простых и удобных операций с датами).
#практика #d3