digital-garden/dev/architecture/highload/Кэширование на стороне браузера.md

---
aliases: []
tags:
  - maturity/🌱
date:
  - - 2024-06-17
zero-link:
  - "[[../../../meta/zero/00 HighLoad|00 HighLoad]]"
parents:
  - "[[../Кэширование|Кэширование]]"
linked:
---
Статический контент — это элементы веб-сайта, которые остаются неизменными на протяжении долгого времени на всех страницах. К такому контенту относятся файлы изображений, CSS и JavaScript. Поскольку эти файлы редко изменяются, их можно сохранять в кэше браузера пользователя. Это позволяет браузеру загружать локальные копии файлов, а не запрашивать их каждый раз с сервера, что ускоряет работу сайта.

Обычно кэшируются только GET запросы, так как они должны быть [[../Идемпотентность|идемпотентны]].

Управление кэшированием часто осуществляется с помощью http-заголовков. Заголовки для кэширования:
- ETAG. Тег, который позволяет указать версию файла. Можно использовать [[../../cryptography/MD5|MD5]].
- [[../../network/Условный GET запрос|If-Modified-Since]]. Дата изменения файла.
- Cache-Control. Передает инструкции по выполнению кэширования.
	- public - Сохранять может не только браузер, но и промежуточные узлы
	- private - Сохранять может только браузер клиента
	- no-store - не кэшируем. ==не уверен что правильно записал==
	- no-cache - Сохранять только в браузере, не сохранять на промежуточных серверах. ==не уверен что правильно записал==
	- max-age - Сколько нужно хранить файл в памяти
- LocalStorage. Можно через JS складывать данные.


![](../../../meta/files/images/Pasted%20image%2020240619083856.png)

Инвалидация:
- Самый простой вариант указывать версию в GET параметрах.
- Для статики можно использовать [[../Fingerprint|Fingerprint]]

***
## Мета информация
**Область**:: [[../../../meta/zero/00 HighLoad|00 HighLoad]]
**Родитель**:: [[../Кэширование|Кэширование]]
**Источник**:: 
**Автор**:: 
**Создана**:: [[2024-06-17]]
### Дополнительные материалы
- [[../../devops/nginx/Кэширование статики в Nginx]]
### Дочерние заметки
<!-- QueryToSerialize: LIST FROM [[]] WHERE contains(Родитель, this.file.link) or contains(parents, this.file.link) -->
<!-- SerializedQuery: LIST FROM [[]] WHERE contains(Родитель, this.file.link) or contains(parents, this.file.link) -->
- [[Кэширование статики в Nginx]]
<!-- SerializedQuery END -->