Firefox / Opera Бавно боядисване на страници

Току-що завърших проектирането на тази начална страница за моето стартиране: http://beta.mergenote.com/

Времето за зареждане и първоначалното изобразяване са моментални във всички браузъри, които съм тествал. (Не съм разглеждал нито една версия на IE, но го предоставих на приятели, които всички смятаха, че е достатъчно подобен на Chrome, те не забелязаха нищо.. те обаче не са уеб разработчици, така че ако забележите нещо, уведомете ме).

Уеб страницата използва jQuery за просто слайдшоу, а за превъртане с паралакс използва skrollr https://github.com/Prinzhorn/skrollr

Той използва SVG спрайт, чиято ширина и височина са зададени на 3 пъти най-големия изобразен размер на която и да е от иконите му (поради проблем с изобразяването на Opera и Firefox, при който SVG не се преначертават в крайния си размер).

В Chrome / Safari сайтът работи гладко, бързо, без проблеми. При Firefox и Opera (и особено Firefox) прерисуването на страницата отнема много време при преоразмеряване или превъртане, а всички анимации са изключително накъсани.

Подозирам, че може да е SVG спрайтът, но наистина не съм сигурен. Проблемите, които имам може да се засилят леко, когато го оразмерих по-голям, но ги имаше и преди.

Някакви идеи?


person runspired    schedule 29.07.2013    source източник


Отговори (1)


За мен е доста очевидно, че SVG са проблемът. Деактивирах ги един по един и страницата вече е бърза (преди изоставаше много).

Дори ако един SVG влезе в прозореца за изглед, страницата започва незабавно да изостава.

Той използва SVG спрайт, чиято ширина и височина са зададени на 3 пъти най-големия изобразен размер на всяка от неговите икони

Бихте ли уточнили? Този SVG е 2250 на 10350 пиксела. Ще отнеме огромно количество RAM за растеризиране. Може и да е 225x1035.

person Prinzhorn    schedule 30.07.2013
comment
Причината, поради която SVG е толкова голям, е проблем с изобразяването във Firefox и Opera, които растеризират SVG в първоначалния им размер и не се растеризират повторно, след като бъдат мащабирани. - person runspired; 30.07.2013
comment
Само няколко от иконите наистина трябва да са толкова големи, така че работя върху преработването на оформлението на спрайта с това предвид, трябва да завърши 1500px x 300px, ако съм направил правилно математиката си. - person runspired; 30.07.2013
comment
За изображения не е необходимо да премащабирате динамично, наистина трябва просто да използвате PNG спрайт с точните размери, от които се нуждаете. - person Prinzhorn; 30.07.2013
comment
За различни мобилни версии + преоразмеряване на лого тези изображения се премащабират, поради което не използвах PNG спрайт. Исках поне веднъж да опитам един спрайт вместо спрайтове, базирани на откриване на res. Не съм нов в тази игра, просто опитвам нещо ново със SVG спрайтове и нов в отстраняването на грешки в поддръжката на SVG (което беше главоболие от опит). :) Невероятна работа свършихте със skrolr, благодаря! - person runspired; 30.07.2013