Разгоняем CSS-селекторы: стоит ли?

Client optimization
Виталию Харисову посвящается

После перевода заметки «Оптимизируем CSS-производительность» и справедливых замечаний Виталия vithar, я решил поставить серию экспериментов по скорости работы CSS-селекторов внутреннего движка браузеров. Результаты получились весьма забавными, а местами, наверное, даже интересными.

Методика. Размер файлов



Естественно, что скорость работы одиночного CSS-правила весьма высока, и даже десятки и сотни их не должны заметно замедлить работу браузеров. Поэтому нужно ставить эксперимент по работе с несколькими тысячами правил, иначе точность результатов будет весьма невысока. Использовать JavaScript для генерации HTML/CSS-кода не представляется разумным, ибо тогда придется учитывать еще и скорость работы JS-движка в браузерах, в итоге, эксперимент будет недостаточно чистым.

В конце концов, было решено сгенерить статичные файлы (порядка 300Кб), которые будут содержать достаточное число различных CSS-селекторов. Это самое «достаточное» число подбиралось по нескольким параметрам, в том числе: размер файла (гонять несколько Мб через браузер и интернет совсем не хотелось) и скорость работы HTML/CSS-кода в браузерах (она должна быть достаточно низкой, чтобы файлы в несколько сотен Кб уже заметно тормозили при открытии).

читать дальше на webo.in →
Tags:cssieoperafirefoxsafaricss1css2css-селекторыоптимиза
Hubs: Client optimization
+34
2.6k 35
Comments 32

Popular right now

Senior Angular Developer (remote/relocation)
from 5,000 to 7,000 $New.HRRemote job
Senior Front-End Developer (React)
from 3,000 to 5,000 $WizataRemote job
Middle Frontend Developer
from 100,000 to 150,000 ₽AstraLabRemote job
Frontend developer
to 130,000 ₽Articul MediaМоскваRemote job
Frontend разработчик
from 100,000 to 130,000 ₽Diamond Personnel R&CМосква