У меня есть сетка данных, построенная с помощью SlickGrid. Я использовал фильтр яркости css , чтобы сделать нечетные строки более темными, чем четные строки, и смесь фона css , чтобы придать выделенным строкам синий цвет, сохраняя при этом чередование нечетных / четных строк. .
.slick-row.odd {
filter: brightness(.96);
}
.slick-row.selected {
background-image: linear-gradient(0deg, #DFE8F6, #DFE8F6);
background-blend-mode: multiply;
}
Чтобы дать некоторое представление, сетка выглядит так:
Недавно я понял, что сетка начинает мерцать при вертикальной прокрутке. Обычно новые строки выглядят немного медленнее, чем раньше, а четные строки выходят быстрее нечетных строк. Во время быстрой прокрутки создается ощущение, что все ваши нечетные строки (которые должны быть темнее) пусты, а четные строки содержат данные.
Я проверил инструменты разработчика Chrome, следуя нескольким учебникам, которые я могу найти, чтобы определить производительность рендеринга. Что я заметил, так это то, что фильтр яркости создает множество границ слоев. Я думаю, что это делает каждый ряд отдельным слоем.
Отключение стиля делает рендеринг более быстрым, мой вопрос в том, будет ли он медленным из-за фильтра CSS и слоев или просто потому, что у меня много стилей, которые можно применить?