#html #css #image
#HTML #css #изображение
Вопрос:
При создании веб-страницы я заметил огромное снижение производительности (на стороне клиента), когда я добавил больше строк в таблицу. Каждая строка в моей таблице состоит из одних и тех же 4-5 разных значков размером 32×32 (ссылки на действия) и около 100 символов. Когда было 10 строк, веб-страница работала плавно — прокрутка и анимация jQuery были плавными. Теперь, когда в моей таблице более 100 строк (разбивка на страницы не предусмотрена), анимация действительно медленная и грубая.
Есть ли способ оптимизировать не сами изображения, а код, чтобы повысить производительность?
Прямо сейчас у меня есть изображения в тегах. Будет ли иметь какое-либо значение, если я изменю их на with background-image? Будет ли браузер менее загруженным?
Ответ №1:
Если проблема с изображениями, то, скорее всего, это связано с тем, что клиент пытается повторно загрузить изображения для каждой строки, что очень неэффективно, даже если изображения маленькие. Вы можете проверить, верно ли это, с помощью такого инструмента, как Fiddler, проверяя, получаете ли вы целую кучу одинаковых запросов при каждой перезагрузке страницы.
Если это проблема, посмотрите на CSS-спрайты. С помощью этого метода вы можете доставить клиенту 1 изображение, и это одно изображение будет использоваться для отображения всех ваших значков во всех ваших строках.
Комментарии:
1. Спасибо за ответ, это то, о чем я беспокоился, но для меня это мало что значит, поскольку проблема заключается в серверной части системы. Что меня больше беспокоит, так это то, что одни и те же изображения хранятся отдельно в ОЗУ, мне просто нужно некоторое объяснение методов, используемых браузером. Что насчет спрайтов — если изображение загружается один раз, сохраняет ли клиент его один раз или столько раз, сколько мы ссылаемся на него в разметке / CSS? И спасибо вам за инструмент Fiddler, изучите его.
2. @Vlakarados: пока URL, который вы используете для загрузки / извлечения изображения, является постоянным, клиентский браузер должен быть достаточно умен, чтобы сохранить изображение один раз и повторно использовать его по мере необходимости при рисовании элементов в окне.