В недавнем интервью я обнаружил, что меня несколько раз спрашивали о кэшировании браузера. Ведь кеширование — очень важный момент в оптимизации производительности фронтенда, хоть я и ленивый, но все же планирую потратить некоторое время на то, чтобы разобраться в точках знаний, и, наконец, действовать сегодня!
Что такое кеширование браузера
Мы знаем, что при доступе к веб-странице вам необходимо загрузить с сервера некоторые ресурсы, необходимые для рендеринга страницы, такие как html-документы, css, js, изображения и т. д., а некоторые ресурсы редко изменяются, например изображение логотипа, представляющее компания. Если эти ресурсы кешировать, нагрузка на сервер, естественно, снизится, а также сократится время загрузки страницы. Однако, использовать кеш или нет, и как долго браузер ресурсов должен кэшироваться, как эти браузеры узнают? Не волнуйтесь, это все контролируется сервером.В заголовке ответа http (http response header) будут некоторые поля для управления.Поговорим об этих полях подробнее.
Классификация кэша браузера
1. Сильный кеш
Сильное кэширование управляется с помощью двух полей Expires и Cache-Control., который контролирует время кеширования ресурсов и не будет запрашивать сервер в течение срока действия.
- Истекает Значение Expires — это абсолютное время, представляющее собой строку времени в формате GMT (время по Гринвичу — это британское среднее время по Гринвичу, время по Гринвичу = пекинскому времени — 8 часов), которое относится к конкретному времени истечения срока действия кэша, которое описывает ввремя, это момент времени.
Expires: Wed, 25 Jul 2028 19:19:42 GMT
Указывает, что срок действия ресурса истечет после 2028-07-25 19:19:42, и в это время ресурс необходимо снова запросить. Поскольку Expires зависит от системного времени клиента, при изменении локального времени кэш может оказаться недействительным, поэтому в целом мы считаем, что использование Cache-Control — лучший выбор.
- Кэш-Контроль Установите max-age для Cache-Control, который указывает, сколько секунд составляет максимальное время кэширования, которое определяет продолжительность времени, которое описываетвремя, который представляет интервал времени, который является относительным временем. Например, если я хочу установить допустимое время для этого ресурса равным 3 дням, то значение max-age равно 259200 (3 * 24 * 60 * 60 = 259200).
Cache-control: max-age=259200
Указывает, что срок действия ресурса истекает через 3 дня, и ресурс необходимо снова запросить с сервера.
Cache-Control и Expires могут быть включены одновременно в конфигурации сервера, то есть в заголовке ответа Expires и Cache-Control могут существовать одновременно, если они включены одновременноCache-Control имеет более высокий приоритет.
2. Согласовать кеш
Согласование кеша заключается в том, чтобы определить, доступен ли ресурс кеша серверу.Конечно, сервер и клиент должны сотрудничать друг с другом. Сервер МОЖЕТ включать поле Last-Modified или поле ETag в заголовок ответа.
- Last-Modified / If-Modified-Since
Last-Modified указывает время последней модификации запрошенного ресурса на стороне сервера.Когда ресурс запрашивается снова, заголовок запроса браузера выводит If-Modified-Since, чтобы спросить сервер, был ли обновлен ресурс. - ETag/If-None-Match
После каждой модификации файла на стороне сервера будет генерироваться новый ETag, который является уникальным идентификатором файла.При повторном запросе ресурса в заголовок запроса браузера будет включено значение If-None-Match, которое является значением, возвращаемым до .ETag, отправьте это значение на сервер, и спросите, изменился ли ETag ресурса.Если есть изменение, значит, версию ресурса нужно обновить, и клиент больше не может использовать данные в кеше.
Механизм кеширования браузера
Я не знаю, ясно ли я изложил предыдущее содержание, все в порядке, я сделаю резюме здесь. Короче говоря, браузер будет судить, попал ли сильный кеш в соответствии с полями Expires и cache-control в заголовке ответа http, Если он попадет, он напрямую извлечет ресурс из кеша и больше не будет запрашивать его с сервера. . В противном случае (без сильного попадания в кеш) браузер выдаст условный запрос и включит в заголовок запроса поле If-Modified-Since или If-None-Match. If-None-Match — это ETag, первоначально полученный браузером. Когда сервер обнаруживает, что время обновления ресурса позже, чем время, указанное в If-Modified-Since, или текущий ETag ресурса на стороне сервера не соответствует указанному в If-None-Match, он указывает что ресурс необходимо повторно запросить с сервера. В противном случае браузеру не нужно будет повторно загружать весь ресурс, а нужно будет только загрузить ресурс из кеша, а http-код ответа — 304 (304 Not Modified).
Влияние различных пользовательских операций на кеш
Во время интервью меня спросили о влиянии на кэш, когда пользователь выполняет некоторые операции, следующим образом.
| Действие пользователя | Expires/Cache-Control | Last-Modified/Etag |
|---|---|---|
| Введите в адресной строке | ☑️ | ☑️ |
| переход по ссылке на страницу | ☑️ | ☑️ |
| новое окно | ☑️ | ☑️ |
| вперед и назад | ☑️ | ☑️ |
| F5 обновить | ✖️. | ☑️ |
| Ctrl+F5 Принудительно обновить | ✖️ | ✖️ |
постскриптум
В последнее время, так как я готовлюсь к интервью, я планирую организовать точки знаний, чтобы облегчить закрепление и закрепление знаний.Если есть какие-либо неточности в тексте, пожалуйста, покритикуйте и исправьте~
PS: В эту холодную зиму 2019 года я, фронтенд-подразделение Гули, наконец-то получил удовлетворительное предложение. Счастливый, я пошел смотреть фильм сегодня днем. Я займу некоторое время, чтобы разобраться с этим позже, я поделюсь с вами обзорными вопросами, которые я подготовил для интервью, и вместе добьемся прогресса!
использованная литература
Стоя на плечах гигантов, позвольте мне видеть дальше, спасибо автору следующей статьи.
1,Кэш браузера, не так просто сказать, что я люблю тебя
2,Оптимизация веб-сайта: введение в стратегии управления кешем браузера и настройки