Можете ли обьяснить кэширование картинок браузером?
Вопрос о том, как браузер тратит свои мощности на отрисовывание и что подразумевается под кэшем в плане рендера картинок:
1. Самый простой случай внешняя ссылка на файл, как для рендера браузера происходит обработка такого файла? Первый раз он его скачивает, на второй раз уже файл хранится где то в кэше. Если указаны размеры, то браузер резервирует под неё место, а дальше видеокарта отрисовывает данные взятые из файла?
2. Если картинка вставлена в виде data uri, она не кешэруется, закодирована сразу в строке, будь то в стилях или в разметке самой. В чем тут принципиальная разница между рендером данных из файла закэшированного и вставленного сразу в виде data uri
А теперь насчет svg картинок:
3, Просто ссылкой на внешний файл
4. Вставлена через data uri
5. Сразу в разметку
Через призму svg как теперь это влияет на кэширование и использвание ресурсов компьютера
6. Через спрайт. Тут отдельно хочу уточнить в случае, если вставить в саму разметку спрайт или закачать отдельным файлом, но тут снова возращаюсь к самому началу.
P.S Когда то читал про путь от запроса до конечного результата, какие у браузера под каждую задачу модули и т.д, но хотел бы сейчас уточнить по поводу картинок, потому что много способов использование. А я на самом деле не представляю работу процессора, видеокарты при отрисовке и обсчете визуальной состовляющей.
P.P.S Вопрос больше не про то, что чем больше закодировано и вставлено в файл, тем он более раздутый и чем больше ссылок на файлы, иконки, тем больше надо соединений сделать. А больше про сам рендер на экране из закэшированного файла image.png или закодированно датаурлом внутри, тоже самое к вариациям svg разметки.
P.P.S И про различные нюансы, я думаю есть какие то фишки для кэширования казалось бы того, что не кешируется.
Сергей delphinpro, с лохматых времен напридумывали кучу решений как браузер заставить рисовать быстрее. Но все они сводятся к одному.
Дать нужную полную информацию как можно раньше.
Вокруг чего все костылется ?
Броузер сделал get запрос к серверу. Получил тело страницы. А ему еще нужно 100500 css, images, js и прочего assets . По дефолту это он качает в 5 потоков и в какой момент что реально скачается неизвестно.
В идеале весь ассетс внедрить в тело самой страницы. Отрисовка будет сразу за один запрос к серверу. Минусы такого решения - пропускная способность сетевой инфраструктуры. На каждый хит - десяток мегабайт.
Все остальное поиск золотой середины.
Обший принцип - оптимизация времени отрисовки начально видимой части страницы. Пока пользователь на нее смотрит подкачается остальное.
Отделяя мух от котлет, стоит говорить просто о запросах браузера.
В заголовках каждого ответа, как правило, указано, стоит ли его кэшировать и надолго ли.
Это относится и к картинкам, и к скриптам, и к стилям, и даже к самой странице.
Если кэш дозволен - браузер сохраняет на диске результат этого запроса и при втором аналогичном запросе никуда не тянется, считывая данные с диска.
Естественно, если картинка вставлена датаурлом, svg целиком вставлен в текст страницы или изображение рисуется скриптами прямо в браузере - никакой речи о кэше просто нет и быть не может.
P.S. А если вас интересует, какие оптимизации браузер применяет для ускорения рендеринга - для начала стоит хотя бы обозначить, о каком конкретно браузере речь. Они, внезапно, разные...
Естественно, если картинка вставлена датаурлом, svg целиком вставлен в текст страницы или изображение рисуется скриптами прямо в браузере - никакой речи о кэше просто нет и быть не может.
Я это понимаю, но что подразумевается под кэшированной картинкой, которая уже сохраненна у клиента. В чем разница между отрисовкой информации в закэшированном файле и построении картинки по ходу, когда парсер видет данные в разметке, закодированные датаурлом.
На примитивном уровне, все файлы что закешированы уже есть на клиенте и не нужны дополнительные соединения, чтобы их скачать. Если большая часть закодировано датаурлом или вставлено svg разметкой, то раздувается первоначальные основные файлы разметки и стилей к нему.
Если не думать о времени на скачивание первоначального бандла или паралелльно различных картинок, иконок. А самом рендере иконок, картинок, есть ли разница между тем, чтобы отрисовывать из разметки или из закешированных файлов.
То есть браузер отметил себе участок для image.jpg он залезает у клиента в кэш, смотрит картинку и отрисовывает или она датаурлом закдирована в src атрибуте, он его разкодирует и начинает отрисовывать. Есть ли разница в этом процессе, помимо того, что когда картинка датаурлом вставлена, то сам файл чуть более раздутый.
И дополнительно к этому, что насчет нюансов, есть ли какие то типс н трикс, чтобы кешировать все же не кэшируемое с первого взгляда.
