Что влияет на производительность рендеринга страницы браузера? - PullRequest
1 голос
/ 31 января 2011

Под производительностью рендеринга в браузере я имею в виду такие вещи, как прокрутка, перемещение элементов в анимированном виде, изменение z-порядка.

В частности, я получаю огромное замедление в Firefox 3.6 и IE8, когда я перемещаю изображение с верхними левыми стилями по моей странице. У меня нет проблем с Chrome 8.

С помощью firebug я пытался скрывать элементы страницы один за другим, и самый большой из них на сегодняшний день был связан с широко используемым фоном Jpeg, который я использую. Интересно, как это влияет на производительность, когда изображение перемещается над другим элементом, который затемняет фон? Этот другой элемент является частично прозрачным PNG (но не в той части, в которой происходит движение), может быть, это как-то связано с этим? Я использую много эффектов прозрачности и CSS3, и они каким-то образом замедляют все, даже вещи, которые выглядят совершенно не связанными.

В целом создается впечатление, что браузер перерисовывает всю страницу, когда что-то движется, а не только затронутые пиксели.

Любое обоснованное предположение о том, почему все это происходит?

РЕДАКТИРОВАТЬ Любое изображение или текст, который находится ниже моего движущегося изображения, заставляет его сильно замедляться при прохождении над ним. Само движущееся изображение имеет прозрачный фон, но изменение его на непрозрачное практически не дало эффекта.

1 Ответ

3 голосов
/ 31 января 2011

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

Если вы хотите увидеть огромное замедление в большинстве браузеров, создайте страницу с набором элементов с border-radius и box-shadow,затем установите фон страницы на background-attachment: исправлено.

...