[блогеру на заметку] CSS-свойство box-shadow + Firefox = эпичные тормоза и лаги
Сегодня обнаружил сайт, на котором Firefox тормозит и лагает вплоть до того, что почти невозможно прокручивать страницу. При этом на соседних вкладках другие сайты ведут себя вполне нормально. (Обычно если Firefox тормозит, то весь целиком.)
Стало любопытно разобраться, в чём проблема. Скрипты в качестве подозреваемого сразу отпадают, поскольку
В самом деле, вот обсуждение проблемы на форуме проекта, а вот и соответствующий багрепорт, который висит в багзилле в состоянии UNCONFIRMED с 2008-го года. Да. И, как пишут там в комментариях, в бете 4-й версии баг по-прежнему присутствует. Ведь все силы разработчиков ушли на то, чтобы сплагиатить из Opera большую красную кнопку.
Сайт тот, кстати, слегка подтормаживает и в других браузерах — еще бы, сохранённая копия страницы вместе со всеми скриптами и картинками весит 1.7 мегабайт. (Не знаю, зачем нужно столько скриптов, но, как говорится, хозяин — барин.) Но даже целому взводу JavaScript-кодеров, которые писали все эти скрипты, не под силу так угробить производительность современного компьютера, как это могут сделать разработчики мозиловского движка рендеринга страниц. И победоносное пришествие CSS3 с настоящими тенями и истинными-скруглёнными-углами опять откладывается на неопределённый срок.
Так что, товарищи блогеры, будьте бдительны, проверяйте свои дизайны на совместимость с популярными браузерами и если что, сносите все эти красивости нахрен. Удобство посетителя важнее красивых теней.
14 комментариев
А лекарство есть от этих тормозов? Где почитать?
Можно убрать из таблицы стилей в шаблоне блога все строчки с -moz-box-shadow и box-shadow, оставив только -webkit-box-shadow и -goog-ms-box-shadow.
-webkit-box-shadow - это аналог box-shadow для браузеров на webkit-овском движке (Сафари, Хром и Хромиум). А -goog-ms-box-shadow, если я правильно понимаю это непонятное "goog-ms" , — это для гугловского набора скриптов, который эмулирует современные фичи браузеров для старых версий Internet Explorer-а. В этих браузерах красивости отанутся, в Firefox пропадут.
Хотя я не заметил, чего они такого существенного добавляют во внешний вид сайта, можно вообще все эти строчки выпилить, мне кажется, дизайн ничуть не пострадает.
Убрал, дизайн вроде бы не пострадал...
Попробовал у себя через мозилу посмотреть, вродебы нормально...
После того как страница прогрузится полностью, прокручиваться сейчас стало нормально.
Пока грузится - всё еще немного подлагивает, но это, видимо, из-за большого объема скриптов.
Странно, у меня всего 4 скрипта подгружено в виде гаджетов html/java
Вероятно, очень жирные гаджеты. В сохранённой локально копии страницы общий размер *.js-файлов 695 килобайт. При этом, копия еще и с инета что-то догружает динамически при открытии.
Нашел, что грузит страницу. Это скрипт одной кнопки для соц.закладок
Именно он и нагружает так сильно.
Баг актуален до сих пор, в новейшей версии FF
Достаточно написать что-то вроде:
box-shadow:inset 0 0 50px #ccc; и будут заметны тормоза
Если написать box-shadow:inset 0 0 500px #ccc; то прокрутка страницы превращается в слайдшоу.
Firefox 46.0
Прошло 5 лет - БАГ АКТУАЛЕН!
На дворе 2016 год, а баг box-shadow:inset в FF версии 46.0 еще актуален. Несколько дней выносил себе мозг, пытаясь разобраться в чем причина
Вот ты лошара короче! Нет бы Вована сразу спросить!
Да вот надо было. Вован, спасибо тебе за помощь!
https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Putin_with_flag_of_Russia.jpg/200px-Putin_with_flag_of_Russia.jpg
Отправить комментарий