Механизм кеширования браузера, который должен понимать внешний интерфейс

внешний интерфейс

Отмеченное наградами исследование | Жесткий диск емкостью 1 ТБ ждет вас, чтобы изучить тенденции развития и исследования приложений AI + блокчейн


1. Что такое кеширование браузера?

Браузеры обычно кэшируют часто используемые ресурсы на диске и в памяти вашего ПК. Например, место хранения кеша браузера Chrome находится в папке Cache и папке Media Cache в \Users\Your_Account\AppData\Local\Google\Chrome\User Data\Default.

2. Что такое сервер статических ресурсов?

На обычных веб-сайтах часто используются статические ресурсы и трафик занят. Для веб-сайтов с немного большим трафиком статические ресурсы будут размещены на сервере CDN, чтобы улучшить взаимодействие с пользователем, не занимая пропускную способность сети бизнес-сервера.

3. Процесс запроса браузером статических ресурсов

Для фронтенд-разработчиков мы в основном имеем дело с кешем в браузере, вышеописанный процесс является упрощенной версией, на самом деле в практических приложениях обычно используется сервер статических ресурсов (CDN).

4. Классификация кеша браузера

На следующем рисунке показаны результаты запросов разных ресурсов на сайте, видно, что некоторые ресурсы считываются напрямую из кеша, некоторые ресурсы перепроверяются с сервером, а некоторые ресурсы перевыгружаются с сервера.

  • 200 from cache
  • 304 not modified

Обратите внимание, что все, что мы обсуждали о кэшировании ресурсов, относится только к запросам GET. Для поведенческих операций, таких как POST, DELETE и PUT, кэширование обычно не выполняется.

5. Управление кэшем и срок действия

  • Cache-Control — новый заголовок ответа в HTTP 1.1.
  • Expires — это заголовок ответа в HTTP 1.0.
  • Cache-Control использует относительное время
  • Expires указывает конкретную дату истечения срока действия, а не секунды. Поскольку многие серверы и клиенты имеют несогласованные часы, лучше использовать Cache-Control.
  • Если Cache-Control и Expires используются одновременно, Cache-Control переопределит Expires.

6. Какие свойства может задавать Cache-Control

  • max-age (единица измерения – с)

Укажите максимально допустимое время для настройки кэша, которое определяет продолжительность времени. После того, как браузер отправит запрос на сервер, браузер больше не будет отправлять запросы на сервер в течение периода максимального возраста.

  • public

Указанные ответы могут кэшироваться в кэше прокси и, таким образом, использоваться несколькими пользователями. Если частный не указан явно, по умолчанию используется общедоступный.

  • private

Ответы могут кэшироваться только в частных кешах, а не в кешах прокси. Ресурсы, чувствительные к некоторой пользовательской информации, обычно должны быть установлены как частные.

  • no-cache

Указывает, что сервер должен сначала подтвердить, был ли изменен ресурс (полагаясь на If-None-Match и Etag), а затем решить, следует ли использовать локальный кеш.

  • no-store

Категорически запрещено кешировать какие-либо ресурсы, а это означает, что каждый раз, когда пользователь запрашивает ресурс, на сервер отправляется запрос, и каждый раз загружается весь ресурс. Обычно используется для конфиденциальных ресурсов.

Для использования Cache-Control см. рисунок ниже.

7. Пределы свежести

HTTP хранит копии ресурсов сервера в кэше в течение периода времени, известного как предел свежести. Этот запрос на тот же ресурс не будет повторно проходить через сервер в течение определенного периода времени. Cache-Control и Expires в протоколе HTTP можно использовать для установки предела свежести.Первый — это новый заголовок ответа в HTTP1.1, а второй — заголовок ответа в HTTP1.0. Оба делают одно и то же, но поскольку Cache-Control использует относительное время, а Expires может иметь проблему, заключающуюся в том, что время на стороне клиента и на стороне сервера отличается, мы предпочитаем выбирать Cache-Control.

HTML-код

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    <title>Web Cache</title>
    <link rel="shortcut icon" href="./shortcut.png">
    <script>
    </script>
  </head>
  <body class="claro">
  <img src="./cache.png">
  </body>
</html>

код сервера узла

var http = require('http');
var fs = require('fs');
http.createServer(function(req, res) {
    if (req.url === '/' || req.url === '' || req.url === '/index.html') {
        fs.readFile('./index.html', function(err, file) {
            console.log(req.url)
            //对主文档设置缓存，无效果
            res.setHeader('Cache-Control', "no-cache, max-age=" + 5);
            res.setHeader('Content-Type', 'text/html');
            res.writeHead('200', "OK");
            res.end(file);
        });
    }
    if (req.url === '/cache.png') {
        fs.readFile('./cache.png', function(err, file) {
            res.setHeader('Cache-Control', "max-age=" + 5);//缓存五秒
            res.setHeader('Content-Type', 'images/png');
            res.writeHead('200', "Not Modified");
            res.end(file);
        });
    }
    
}).listen(8888);

Когда к странице обращаются во второй раз в течение 5 секунд, браузер извлекает ресурс непосредственно из кеша.

8. Повторная аутентификация сервера

Тот факт, что ресурс, кэшированный в браузере или прокси-кеше, устарел, не означает, что он на самом деле отличается от ресурса на исходном сервере, это просто означает, что пришло время проверить. Эта ситуация называется повторной аутентификацией сервера.

  • Если ресурс изменится, вам необходимо получить новый ресурс и заменить старый ресурс в кеше.
  • Если ресурс не изменился, кэшу нужно только получить новый заголовок ответа и новое время истечения срока действия, а также обновить время истечения срока действия ресурса в кэше.

Рекомендуемый метод аутентификации для HTTP1.1 — If-None-Match/Etag, а в HTTP1.0 используется If-Modified-Since/Last-Modified.

9. Etag и If-None-Match

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

пример кода

var http = require('http');
var fs = require('fs');
http.createServer(function(req, res) {
    if (req.url === '/' || req.url === '' || req.url === '/index.html') {
        fs.readFile('./index.html', function(err, file) {
            console.log(req.url)
            //对主文档设置缓存，无效果
            res.setHeader('Cache-Control', "no-cache, max-age=" + 5);
            res.setHeader('Content-Type', 'text/html');
            res.writeHead('200', "OK");
            res.end(file);
        });
    }
    if (req.url === '/shortcut.png') {
        fs.readFile('./shortcut.png', function(err, file) {
            console.log(req.url)
            res.setHeader('Content-Type', 'images/png');
            res.writeHead('200', "OK");
            res.end(file);
        })
    }
    if (req.url === '/cache.png') {
        fs.readFile('./cache.png', function(err, file) {
            console.log(req.headers);
            console.log(req.url)
            if (!req.headers['if-none-match']) {
                res.setHeader('Cache-Control', "max-age=" + 5);
                res.setHeader('Content-Type', 'images/png');
                res.setHeader('Etag', "ffff");
                res.writeHead('200', "Not Modified");
                res.end(file);
            } else {
                if (req.headers['if-none-match'] === 'ffff') {
                    res.writeHead('304', "Not Modified");
                    res.end();
                } else {
                    res.setHeader('Cache-Control', "max-age=" + 5);
                    res.setHeader('Content-Type', 'images/png');
                    res.setHeader('Etag', "ffff");
                    res.writeHead('200', "Not Modified");
                    res.end(file);
                }
            }
            
        });
    }
    
}).listen(8888)

10. Как рассчитать значение Etag

  • Значение ETag обычно рассчитывается на стороне сервера и возвращается клиенту в ответ на запрос клиента.
  • Информацию заголовка ETag можно легко получить с помощью метки времени, но это не рекомендуется и ничем не отличается от информации заголовка Last-Modified.
  • Значением ETag может быть что угодно, что однозначно идентифицирует ресурс, например версия, связанная с ресурсом в постоянном хранилище, один или несколько атрибутов файла, информация о заголовке объекта и контрольная сумма (CheckSum), или он может вычислять хэш информации об объекте. значение столбца.
  • Иногда расчет значения ETag может иметь относительно большие затраты, в этом случае можно использовать такие методы, как генерация уникального значения (например, общего GUID).
  • По умолчанию Apache автоматически генерирует ETag через конфигурацию FileEtag INode Mtime Size в FileEtag (конечно, он также может быть настроен пользователем).
  • Поскольку Etag создается сервером, уникальность Etag должна быть гарантирована в среде кластера.

11. If-Modified-Since и Last-Modified

Эти два заголовка являются заголовками запроса/ответа, которые используются в HTTP 1.0 для проверки того, истек ли срок действия ресурса. Оба этих заголовка являются датами. Процесс проверки аналогичен Etag и здесь подробно описываться не будет. При использовании этих двух заголовков для проверки обновления ресурса возникают следующие проблемы:

  • Некоторые ресурсы документов периодически переписываются, но фактическое содержание не меняется. В этот момент метаданные файла покажут, что дата последней модификации файла не совпадает с датой If-Modified-Since, что приведет к ненужному ответу.
  • Некоторые ресурсы документации изменены, но содержание модификации не важно и не требует обновления всех кешей (например, комментариев к коду).

12. Резюме

  • Кэш браузера делится на 200 из кеша и 304 не измененных
  • Cache-Control и Expires в протоколе HTTP можно использовать для установки предела свежести.Первый — это новый заголовок ответа в HTTP1.1, а второй — заголовок ответа в HTTP1.0.
  • max-age (в с) и Expires указывает конкретную дату истечения срока действия вместо секунд
  • Если Cache-Control и Expires используются одновременно, Cache-Control переопределит Expires.
  • Клиенту не нужно заботиться о том, как генерируется значение ETag, пока служба отправляет ему значение ETag при изменении состояния ресурса.
  • По умолчанию Apache автоматически генерирует ETag через конфигурацию FileEtag INode Mtime Size в FileEtag (конечно, он также может быть настроен пользователем).
  • ETag часто отправляется вместе с If-None-Match или If-Match клиентом на сервер для обработки через информацию заголовка HTTP (включая значение ETag).
  • Last-Modified часто используется клиентом вместе с If-Modified-Since, чтобы включить значение Last-Modified в заголовок HTTP и отправить его на сервер для обработки.
  • Некоторые ресурсы документов периодически переписываются, но фактическое содержание не меняется. В этот момент метаданные файла покажут, что дата последней модификации файла не совпадает с датой If-Modified-Since, что приведет к ненужному ответу.

13 demo

demo

【Выбор редактора】

  1. Foreign Media Express: 10 основных навыков фронтенд-инженеров
  2. Что не так с бэкенд-разработкой? Выставлена ​​зарплата фронтенд-программистов
  3. Foreign Media Express: Двенадцать главных навыков, которыми должен овладеть фронтенд-разработчик
  4. Летняя галантерея! Коллекция суперпрактичной галантереи для фронтенд-разработчиков на август 2017 года.
  5. 10 бесплатных инструментов для веб-разработки переднего плана — Envato — Medium
【Редактор:Чжан ЯнниТЕЛ: (010) 68476606]
Нравится 0
Категории