CSS Triggers

Пямая ссылка на CSS Triggers

Когда вы меняете CSS свойство браузеру нужно как-то отрегировать на ваши изменения. Некоторые свойства меняют макет страницы. Например, при изменении ширины width браузеру необходимо изменить макет(layout) элемента, затем отрисовать(paint) каждый пиксель элемента,а затем скомпоновать(composite) всех их вместе. Это большая работа. Некоторые свойства можно изменить с меньшими затратами. Например изменении background-image нет необходимости в изменении макета, но нужна отрисовка и компоновка.

Пол Льюис провел исследование о том, какие свойства что делают. Хороший справочник, чтоб помочь подумать о том, какие изменения вы можете сделать и они легкие(а значит быстрые) для браузера, а какие изменения даются сложно(таким образом делаются медленно).

Так же подробнее почитать о этапах визуализации можно здесь

Оригинал статьи на английском

К заметкам