Position fixed создает лаги при скролле страницы

[Zverushka]

Проблема такая - есть 3 фиксед элемента и скрипт, который плавно крутит с помощью меню страницу к разным якорям. Все сильно тормозит.

Стоит убрать фиксед - и лаги пропадают. Что же делать, как бороться?

Edited November 30, 2013 by Zverushka

[klierik]

скрипт, который плавно крутит с помощью меню страницу к разным якорям.

 

только я не понял что именно тут имеется ввиду?

[Zverushka]

ddscrollSpy скрипт

Вот сайт, который тормозит. http://zverushka.bl.ee/monitors3/

А вот его версия с отключенным скриптом, который завадавал позицию фиксед (но виноват не скрипт - я проверяла, отключала этот скрипт и принудительно ставила фиксед всем 3м элементам) - тормоза остававались.

http://zverushka.bl.ee/monitors/

Edited December 2, 2013 by Zverushka

[klierik]

ага. дошло.

 

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

[Zverushka]

Обновила выше пост со ссылками.

Приложить архив?

Edited November 30, 2013 by Zverushka

[Zverushka]

Я переделала скрипт на абсолютное позиционирование, но лаги по ходу так и остались.

Подскажите, где слабое место - как сделать сайт более быстрым? 

http://zverushka.bl.ee/monitors3/

 

П.С. Как же коряво абсолюты в хроме выглядят =((

Edited November 30, 2013 by Zverushka

[Zverushka]

В общем если убрать эту штуку:

* {

box-shadow: none !important;

}

То лаги пропадают. Все лаги дают всего 6 блоков, в каждом из котором всего 2 тени - внутренняя (60 пикселей) и внешняя. То есть 12 теней дают дикие лаги.

Что делать, как быть. Как объяснять заказчику? Помогите люди добрые.

[Zverushka]

Оставшиеся лаги создает bxslider.

Вот версия без теней, но со слайдером.http://zverushka.bl.ee/monitors4/#new

И еще будет 2й слайдер, не бх - пока ищу который подойдет по функциональности с увеличенной по центру картинкой.

Получается я могу вставить эти 6 блоков через картинку, но так как background-size начинается от 9 осла, надо делать по старинке - разбить блок на 3 части - центральную и верх и низ, чтобы они масштабировались. Посоветуете последним способом?

[Switch74]

Полосочка в меню не перемещается на активнцю кнопку при прокрутке страницы колесом мыши, мне кажется стоит это доделать

можно попробовать вынести фиксированные элементы за пределы wrap-outer и прокрутку делать не в body а в wrap-outer

из-за теней, прозрачностей и т.п. красотули часто бывают тормоза, ими лучше не злоупотреблять

ну и чем меньше информации на одной странице тем проще: быстрее грузится, лучше индексируется

 

оффтоп

нифига се медиа комплекс, 32'' брали не давно за 20000, так там полноценный телек, может все и вся, ну разве что 3D не показывает и экран не сенсорный

Edited December 2, 2013 by Switch74

[klierik]

на 17" и 23" мониторах в Chrome Mac все работает нормально.

хотя я допускаю что тормаза вовсе не из-за position, а из-за огромного кол-ва рендерируемой браузером графики, которую онн, скорее всего, перерисовывает при скроле.

[Zverushka]

@klierik, у тебя при навигации по меню плавно крутится?

Хотя вопрос уже устарел - я все 3 раза уже переделала...

[klierik]

да, все отлично.

[Zverushka]

http://zverushka.bl.ee/#calc вот этот сайт?

Только в хроме лагает (.... Может я зря переделывала? У заказчика кстати не лагает. а я аж смотреть на это не могу.

Edited December 2, 2013 by Zverushka

[klierik]

http://screencast.com/t/4KQdc8K8n

[Zverushka]

Оу! Спасибо большое за видео! Кстати интересует именно плавность прокрутки меню - то есть надо кликнуть например на калькулятор. когда страница в самом верху.

Но может мне кажется или на видео действительно все рывками? Или просто в видео мало кадров, ощущение будто pagedown листается?

Edited December 2, 2013 by Zverushka

[Animkim]

Однозначно в Мозиле все плавнее раз в 10, если сравнивать то да в хроме лагает, а ie10 вообще летает!

[Zverushka]

Ну все-таки не зря лагодром убирала, хоть это радует...