Кто как решает проблему производительности background-size?

[Zverushka]

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

Кто и как с этим борится? Вроде как по идее скриптик вставить и все, имулирующий это поведение.

 

Но я вот тут засунула волшебную строчку -webkit-backface-visibility: hidden, и лаги вроде как пропали. Но пока я рылась в гугле, пишут, что в файрфоксе тоже может лагать. Но у меня вроде все норм. Вот сижу и думаю теперь - скрипт все-таки или эту строчку.... Может кто сталкивался и придумал что-нибудь?

Edited June 12, 2014 by Zverushka

[SelenIT]

Как скриптик может помочь ускорению перерисовки того же количества тех же пикселей?

 

-*-backface-visibility: hidden (для moz она тоже существует) может помочь, т.к. создает RenderLayer (и его аналоги) — что-то типа современного hasLayout-а. И, в каких-то нигде толком не документированных случаях, перекладывает работу по отрисовке на GPU, что-таки может ее ускорить. Но говорят, что в самом вебките эту лазейку прикрывают (про блинк пока не знаю). В общем, имхо, надо тестить, и если где-то помогает, нигде не мешая — почему нет?

[Zverushka]

Как скриптик может помочь ускорению перерисовки того же количества тех же пикселей?

 

Он берет картинку <img> и присваивает ей нужные размеры, имитируя задний фон слоя. Видимо разные механизмы отрисовки у background-size и просто img. Например, при скролле страницы идут дикие тормоза, хотя пересчитывать размер уже не нужно, но браузер что-то там высчитывает, отрисовывает и лагает.

А наш скрипт в этот момент не будет задавать и пересчитывать нужные размеры для картинки, он будет это делать только на resize.

Edited June 12, 2014 by Zverushka

[SelenIT]

От лагов при скролле есть еще вот такое лекарство. Если на этих картинках есть какие-нибудь эффекты типа ховера, может помочь.

 

А фоны эти анимируются?

[Zverushka]

Не помогло к сожалению. Ховеров нет.

Плохая у меня манера на пальцах пытаться объяснять. Вот для примера лаги (крутим горзонтально)

http://jsfiddle.net/Zverushka/X9KX9/embedded/result/ - лагающая версия. открывать на весь экран. Выдает 30 фпс на прокрутке в среднем.

http://jsfiddle.net/Zverushka/X9KX9/1/embedded/result/ - нелагающая - 50-60 фпс на прокрутке....

 

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

Edited June 12, 2014 by Zverushka

[npofopr]

И картинки через оптимизатор прогоните, хоть размер уменьшиться.

[Zverushka]

300 кб для 3000пиксельной картинки разве много?

Edited June 12, 2014 by Zverushka

[SelenIT]

Скорее, 3000 пикселей много для 300-килобайтной картинки, имхо. При таком качестве можно и сильнее апскейлить, экономя оперативку и кол-во операций по преобразованию пикселей при визуально малозаметной разнице. Не уверен, что это решит проблему (итоговый массив для отрисовки-то останется примерно тем же), но я бы попробовал.

 

Еще float-ы сами по себе напряжноватая вещь для динамики, поскольку они зависят друг от друга, браузеры любят запускать reflow при любом неосторожном движении возле них. Если ширины блоков известны, я бы заюзал absolute. Заодно можно по onsroll делать блокам, заведомо не попадающим в экран, display:none — кто-то умный говорил, что иногда браузерам от этого становится легче...

[Zverushka]

@SelenIT, что такое "апскейл"?
я сейчас делаю сайт-кишку, горизонтальный. Длинной 25 тысяч пикселей. Соотвественно там все сейчас на флоатах. При этом он разбит на страницы разной ширины (даже 200 пикселей или 5 тысяч), все это флоат и внутри них - флоаты. Еще этот сайт должен быть адаптивным. Стоит ли заменять мои флоаты на абсолюты? 

И все это должно быть с паралаксами, анимацией, вот примерно как на этом сайте http://hotdot.pro/ru, но этот сайт расчитан на экраны одинаковой ширины, а мой не подчиняется законам полного экрана , их самописный паралакс-фулл-сайт плагин я разобрать не могу (я фз зачем они его на гитхаб выложили, когда у них даже нельзя самостоятельно указать контейнер для анимации, он вшит как #parallax  - впервые такое вижу), сейчас не знаю, что делать, пытаюсь какие-то костыли из разных плагинов городить. 

С одной стороны мне нужно пролистывать на скролле плавным движением часть экрана, это я делаю через 

$("body").mousewheel(function(event, delta) {		offsetMainLeft -= (delta * 140);		$("html, body").stop().animate({			scrollLeft: offsetMainLeft		}, function() {			animatingScroll = false;		});		if (!animatingScroll) {			// animatingScroll = true;			// applyHorizontalShift(-offsetMainLeft, $(mainLayer));			// offsetMainLeft -= (delta * 140);			// setTimeout(function() {			// 	animatingScroll = false;			// }, 300)		}		// applyHorizontalShift(-offsetMainLeft, $(mainLayer));		event.preventDefault();	});

По идее вместо анимации скролла на Jquery нужно на трансформах внутренний слой большой анимировать через translate, так как сайт достаточно перегружен и флоатами и скриптами и все это дело боюсь может сильно тормозить, но тогда у нас остается горизонтальный скролл у сайта, который не будет сдвигаться на скролле.. Если его убрать - мы теряем часть юзабилити, нужно оставить возможность скролла по захвату мышкой скроллбара. В качестве паралакса использую stellar, добавляю к его анимации транзиции. И вот на этом этапе то, что кипело в голове, начинает уже испаряться.

Пока это выглядит вот так http://html2css.ru/paul/ (пока анимацию делаю только на первом экране), предупреждаю, все еще очень кривое, пока это просто схема, мне нужно понять, могу ли я вообще реализовать все эти гребаные скроллы и паралаксы с анимацией , а потом уже заморачиваться адаптивной версткой....
А еще нужно продумать, как бы скрывать слои, что сейчас невидимы (за пределами экрана) при этом с условием паралакс анимации, которая имеет свойство на другие слои залазить. 
Как же хочется просто подключить один плагин, который реализует и паралакс, и плавную прокрутку рывком и горизонтальный скролл, решив все эти проблемы с производительностью и подобными ньюансами - но такой не нашла. 

Edited June 12, 2014 by Zverushka

[SelenIT]

"Апскейл" — увеличение, растягивание . Я поначалу подумал, что эти фоны всё равно слегка размыливаются (и для них это не баг, а фича), и не будет беды, если растянуть их еще сильнее. Возможно, неправ, надо проверять.

 

Да, на hotdot.pro сделано флоатами, но там весь их контейнер как целое сдвигается 3D-трансформацией (по крайней мере, в тех браузерах, которые это умеют). Плюс стоит overflow:hidden на html — возможно, это тоже как-то оптимизируется (надо будет погуглить). Интересно, что у меня это в фоксе работает плавнее, чем в яндекс-браузере (в последнем подлагивает на больших портретах и айпаде с меняющимся содержимым экрана).

[Zverushka]

Посмотрите, пожалуйста, кто-нибудь, сайт. Он подтормаживает, никак не могу решить проблему ... Я по идее сделала все, чтобы ничего не тормозило. Пока еще не навешивала почти никаких скриптов ,а уже при прокрутке лажа.

 

http://html2css.ru/paul/

 

Попыталась сделать фоны просто картинкой - однако тормоза были такими же. Картинки ужала, как советовали. Оставила фикс через -webkit-backface-visibilty. При прокрутке переодически подалгивает - идет резкое кратковременно падение фпс.

 

На скролле я только меняю tranlate3d позицию с transition анимацией. 

 

Мне кажется, что сайт веб-студии не должен иметь такие подтормаживания, так как это презентационная страница и такие косяки в ней вообще левые. Что же мне делать? Я ВОООБЩЕ теперь ничего не могу придумать.

 

Может если большие фоны разрезать на 5-10 мелких картинок - это поможет? Но как их тогда ратягивать во всю ширину...

[Нарек]

при прокрутке лажа.

 

Помоему браузер не успевает рендерить.

-webkit-backface-visibility: hidden;

Тормоза у меня только в хроме, ФФ нормально.

[Zverushka]

http://html2css.ru/paul2/ вот вторая версия без backface - произошла чертовщина, с сервера если смотреть в ней нет лагов... точнее не больше, чем в первой версии с этим параметров.
А вообще как - лаги приемлимые или нет, как считаете?

[npofopr]

Вот http://zestleaders.com/ кстати нечто подобное.

 

Не то чтобы подлагивает у вас, но есть какое то дергание при начале сролла.

[Zverushka]

@npofopr,красиво лагает, это успокаивает