Возможно ли, чтобы переходы CSS3 или объекты с большим объемом памяти влияли на плавность прокрутки в Chrome?

Question

Я работаю над сайтом с большим количеством переходов CSS3 (с аппаратным ускорением) и объектами с высокой памятью (например, массив из 39 объектов, каждый из которых содержит полный источник HTML для типичной онлайн-статьи новостей), и я Я заметил некоторую очень неустойчивую прокрутку, которую я не смог отладить.

Я держал эти объекты с высокой памятью вне DOM, что должно препятствовать тому, чтобы они влияли на производительность DOM, однако я не могу не думать, что они все еще оказывают отрицательное влияние. У меня нет примеров кода для публикации, потому что я не уверен, является ли это проблемой.

Пожалуйста, перейдите на этот сайт ( Оранжевый ) и нажмите на плитку статьи. В div читателя, который появляется на странице, попробуйте прокрутить, как обычно. Чувствуется ли он прерывистым / нервным? Есть ли у вас какие-либо предложения, как это улучшить?

Answer 1

CSS3-переходы, непрозрачность, текст, тени и тому подобное, безусловно, влияют на скорость рендеринга. Фактически, даже сайты с интенсивным использованием одних лишь текстовых теней могут вызывать прерывистую прокрутку на среднем компьютере. Объединение этого с интенсивным использованием javascript похоже на рецепт прерывистого просмотра веб-страниц.

edit: Анимация загрузки на o в оранжевом довольно крутая!

Answer 2

Да, это нервно. Страница с большим количеством Javascript сделает это, и фреймворки, такие как jQuery, вообще не помогут. Я бы рекомендовал как можно больше перекодировать без использования jQuery и пропустить его через JSLint (http://www.jslint.com/).

Попробуйте также использовать инструменты разработчика Chrome, чтобы понять, что является узким местом.

Попробуйте тоже отключить Javascript и посмотреть, будет ли он лучше. Если это не так, то вы знаете, где находится ваша проблема.