Оптимизация изображений

Question

При создании веб-страницы я заметил огромное снижение производительности (на стороне клиента), когда я добавил больше строк в таблицу.Каждая строка в моей таблице состоит из 4-5 разных значков размером 32х32 (ссылки на действия) и примерно 100 символов.Когда было 10 строк, веб-страница работала плавно - анимация прокрутки и jQuery были плавными.Теперь, когда в моей таблице более 100 строк (пагинация не возможна), анимация действительно медленная и грубая.Есть ли способ оптимизировать не сами изображения, а код, чтобы повысить производительность?

Сейчас у меня есть изображения в тегах.Будет ли какая-то разница, если я поменяю их на background-image?Будет ли браузер загружен меньше?

Answer 1

Если проблема в изображениях, скорее всего, потому, что клиент пытается повторно загрузить изображения для каждой строки, что очень неэффективно, даже если изображения маленькие. Вы можете проверить, верно ли это, с помощью такого инструмента, как Fiddler , проверив, получаете ли вы целую кучу одинаковых запросов при каждой перезагрузке страницы.

Если это проблема, посмотрите на CSS-спрайты . С помощью этого метода вы можете доставить 1 изображение клиенту, и это одно изображение будет использоваться для визуализации всех ваших значков во всех строках.