Заметки с тегом «opera»

Профилирование CSS и неиспользуемые селекторы

Я уже писал, что самыми эффективными селекторами с точки зрения анализа и обработки их браузером будут простые селекторы . Когда браузер встречает каскад, то ему требуется пройти от текущего элемента до корня документа в поисках всех элементов, удовлетворяющих условию селектора.

А что произойдет, если браузер никогда не встретит элемент с нужными характеристиками во время такого обхода? Чтобы ответить на этот вопрос я решил сделать несколько замеров скорости отрисовки достаточно сложной страницы (около 2500 элементов и глубиной 20 уровней). Страница содержала реальные и вполне типичные для проекта данные — таблица на сотню строк, свёрстанная блочными элементами.

Для создания нагрузки я применил модифицированный скрипт, который постоянно прокручивает окно, заставляя браузер перерисовывать всё содержимое окна. А замеры делал с помощью профайлера Opera Dragonfly.

Итак, на моей тестовой странице была подключена библиотека виджетов jQuery UI. Но так как фактически никаких виджетов там не было, то CSS-правила, относящиеся к jQuery UI, никогда не применялись. Они-то и создавали эту паразитную нагрузку.

Сначала я сделал замер с подключенными стилями темы.

Эксперимент с подключенными стилями темы jQuery UI

А затем повторил эксперимент без подключения этих стилей.

Эксперимент без стилей jQuery UI

По рейтингу затраченного времени на пересчёт стилей видно, что самыми «тяжёлыми» оказались каскады, для которых никогда не находятся подходящие элементы. На странице множество элементов span (1123, если быть точнее), но, ни один не имеет предка с классом ui-datepicker-next или ui-datepicker-prev.

Из этого конкретного эксперимента можно сделать вывод, что чем больше будет загружено CSS-правил, тем медленнее будет работать движок браузера на перерисовке страницы, даже если эти правила никогда не будет применены на странице.

Отсюда напрашивается ещё один вывод: объединение разношерстных стилей в один файл с большой вероятностью ухудшит производительность стадий reflow и repaint. Деградация будет не так заметна, если в стилях гарантировано не применяются каскады с селекторами по тегу.

Комментарии к заметке: 6

Определение браузера

Когда я искал материал для статьи «Обнаружение браузера Opera 9», то наткнулся на интересный тест браузеров, выполненный исключительно на CSS, — http://www.brunildo.org/test/csshacks3.html.

Этот тест успешно определяет версию IE, версию Firefox ниже 3.0 (Gecko <1.9) и 3.x (Gecko 1.9). Однако определение версий Webkit и Opera в нем нет.

Другие тесты и эксперименты.

Оставте свой комментарий

Обнаружение браузера Opera 9

Совсем недавно я начал применять web-шрифты в реальных проектах. Благодаря простым утилитам (например, @font-face Generator ) можно быстро сконвертировать шрифт в нужные форматы. Но статья совсем не о том. Эти web-шрифты прекрасно (если не брать во внимание проблемы со сглаживанием) отображаются во всех браузерах (даже в IE6!!!) кроме Opera версии 9 и ниже. В связи с эти фактом я и озадачился методами обнаружения Opera 9.

Очевидным способом является проверка строчки User-Agent . Этот вариант решения проблемы хорош до тех пор, пока не сталкиваешься с подменой строки.

С другой стороны проверить тип браузера и его версию можно через определение возможностей (feature detection). В этом случае, как правило, проверяют хорошо известные дефекты или специфическое поведение браузера в тех или иных ситуациях.

Так для браузеров Opera до 10 версии будет характерным отличительным признаком отсутствие события contextmenu у DOM-элемента.


function () {
  var isPresent = null;
  if (document.createElement) {
    var el = document.createElement("p");
    if (el && el.setAttribute) {
      el.setAttribute("oncontextmenu", "");
      isPresent = typeof el.oncontextmenu != "undefined";
    }
  }
  return isPresent;
}

Обнаружение такой не очевидной особенности гораздо эффективнее, например, по сравнению с обнаружением поддержки web-шрифтов потому, что шрифту придется загрузить по сети.

Так же, наверное, можно использовать какие-то CSS-хаки, специфичные для Opera, по аналогии с тем, как я делал определение IE6.

Оставте свой комментарий