Методы сокращения количества CSS-расчетов на веб-странице

Question

Наше приложение на работе использует среду ExtJS (Sencha) для пользовательского интерфейса. Проблема, с которой я сталкиваюсь при работе с фреймворком, заключается в объеме HTML, который выводится фреймворком.

Я заметил, что области системы, о которых пользователи сообщают, что они медленные, имеют массу вычислений CSS. Я измерил это в Google Speedtracer, и некоторые страницы загружаются за 8 секунд. 80% времени посвящено исключительно вычислениям CSS. Прежде чем пытаться изменить способ работы фреймворка, нужно ли в любом случае отложить расчет CSS страницы или эти вычисления выполняются при визуализации объектов?

Я искал способы сделать это, и, возможно, мое "google-fu" ужасно, но я не нашел ничего конкретного о том, как добиться чего-то подобного.

РЕДАКТИРОВАТЬ: После разговора с коллегой он указал мне направление вызова .suspendEvents () в сетке перед загрузкой каких-либо данных и впоследствии .resumeEvents (), только это сэкономило 300 мс времени загрузки: число вызовов .getStyle, обнаруженных Firebug. Мне еще предстоит проверить эту разницу с Google SpeedTracer

Answer 1

Трудно сказать, что является причиной вашей производительности, не зная точно, что делает ваше приложение. CSS будет иметь некоторое влияние , но не очень , более вероятно, что некоторый JavaScript в вашем приложении вызывает чрезмерное переворачивание во время визуализации страницы.

Краткое содержание статьи Стуборнеллы (вторая ссылка)

Reflow - это процесс, с помощью которого элементы веб-страницы размещаются в соответствии с правилами стиля. Перекомпоновка требует больших вычислительных затрат, но обычно можно нарисовать статическую HTML-страницу за один раз, если рендеринг любых более поздних элементов не влияет на уже нарисованные элементы. Вещи, которые могут привести к многократным перерасходам и некоторым обходным путям:

1. Динамическое добавление классов CSS к элементам - измените классы как можно ниже в дереве dom, чтобы ограничить влияние
2. Добавление нескольких элементов DOM - создайте невидимую структуру и добавьте ее в одну операцию вместо
3. Добавление нескольких встроенных стилей к видимым элементам - лучше создать класс со всеми стилями, а затем применить класс
4. Применение анимации к относительно позиционированным элементам - лучше для анимации position: fixed или position: absolute элементов, так как они не влияют ни на что другое
5. Мелкозернистая анимация - перемещение элемента на 3 пикселя за раз может быть более плавным, чем перемещение на 1 пиксель за раз, потому что вы избегаете двух повторений
6. Таблицы являются одним из немногих случаев, когда рендеринг элемента позже в DOM может изменить способ рендеринга более раннего элемента - если вы должны использовать таблицы, используйте table-layout: fixed

Answer 2

Мы также боролись с накладными расходами на использование extJS - хотя инфраструктура очень всеобъемлющая, снижение производительности (особенно с IE6) было большим ограничением. Вот некоторые шаги, которые мы предприняли для оптимизации фреймворка:

1. Оптимизируйте библиотеку, включающую только пакеты, которые используются на вашем сайте. Это означает настройку файла jsb2 и развертывание собственного развертывания extJS.
2. В нашем тестировании производительности мы определили, что CSS является самым большим нарушителем. Преимущество использования пользовательской сборки extJS заключается в сокращении неиспользуемых CSS-селекторов. Для дальнейшей оптимизации CSS мы использовали Скорость страницы Google, чтобы идентифицировать селекторы CSS, которые неэффективны для их рефакторинга / удаления. Обратите особое внимание на:
   • Псевдо : зависание селектор
   • Универсальная * клавиша с переключателями потомков

Полученный ext "lite" должен значительно повысить производительность, особенно в IE6. Хотя команда Secha постоянно совершенствует производительность с каждым выпуском, издержки загрузки всей платформы слишком дороги, чтобы их игнорировать.

Надеюсь, это поможет ...

Answer 3

Smartoptimizer действительно потрясающий, пробовали ли вы какие-либо из этих типов инструментов типа сжатия кода gzip?

https://github.com/farhadi/SmartOptimizer