🔫 самое коварное CSS свойство

Пару недель назад наш дизайнер завел ишью, мол у него в хроме часть нашей апки, а именно канвас, как-то странно рендерится. В нашем понимании канвас - это полотно, где можно драгать всякие элементы(блоки, картинки, текст), зумить и тд, создавать своего рода диаграммы, но с технической стороны это HTML+SVG (для конектов между блоками). Так вот при минимальном зуме, когда весь контент виден сразу, этот самый канвас рендерился криво, то стрелки пропадали, то картинки не полностью рисовались, то блоки при ховере блинкали, то еще что-то странное. Естественно в большинстве случаев все вместе взятое. Я начал дебажить, но у меня, моих коллег и у остальных продуктов все было норм, на всякий случай я перепроверил коммиты, что бы убедится что за последнее время не было никаких фиксов/фич которые могли поломать канвас. Ничего не найдя - откомментил что не воспроизводится, закрыл таску и отписал дизайнеру взять помощнее комп, а то у него там скетч и фигма на пару сотен бордов сжирают все ресурсы 😂

И вот вчера опять прилетает мне эта ишью, но уже от интерпрайз клиентов, продукты в панике, мол аффектает топовых юзиков. Пробую воспроизвести - и опа, у меня тоже воспроизводится. Еще раз смотрю коммиты - ничего что связанно с канвасом за последние пару месяцев, странно, очень странно... Сажусь за дебаг, вроде все работает, дом-ноды рисуются на обычном зуме, никакого JS кода который как-то там кропает элементы у нас нет. Начинаю осознавать, что скорее всего что-то замедляет рендеринг хрома. Пробую замерить память, на большом проекте дев тулз тупо падает и перезагружает страницу. Иду на перформанс табку и делаю замеры. Тут, с первого взгляда, все норм, нет экспенсив js, большенство показателей не особо отличаются от такого же замера на маленьком проекте. НО обращаю внимания что рендер таска какая-то уж слишком большая и composite layers фаза находится сильно далеко от последнего paintа, который на удивление очень маленький. И тут до меня доходит - слои... Открыв вкладку слоев и подождав около минуты, пока она прогрузится, увидел +100500 слоев. Благо при клике на слой, хром выдает инфу, для какой дом-ноды этот слой и почему он был создан, иначе я не представляю как такое можно дебажить...

Как оказалось, для каждого элемента на канвасе создавался новый слой. Но не потому что на этом элементе есть will-change , translate3d или еще какой-то хак для создания слоя, про это мы знаем и стараемся не перегружать хром. А потому что у SVGшки, которая рисует конекты для блоков, был задан will-change и эта SVGшка лежит под всеми дом-нодами на канвсе. И что бы хром мог это все нормально скомпоновать, ему нужно все дом-ноды с z-indexом выше чем у этой SVGшки вынести на отдельный слой. ТАДА - у нас потекли слои, чем больше блоков на канвасе, тем больше пидалит хром. Фикс изи - просто убрали will-change с SVG, плюс сделали небольшую оптимизацию - теперь добавляем will-change дом-нодам которые драгаются на данные момент, и убираем после завершения операции. Таким образом дом-ноды которые драгаются выносятся на новый слой, и отрисовка для них происходит быстрее.

Вывод: используйте will-change (и дургие хаки для создания слоев) с умом, добавляйте до начала операции/анимации и убирайте по завершению. Не добавляйте его просто так, на статик элементы, которые когда-нибудь могут быть проанимированны, ибо на слабых девайсах, или с обновлением хром(как было у нас) все будет тупить...

Читать в ноушен: https://bit.ly/3aeg8si

#css #debug #performance