С точки зрения оптимизации производительности фронтенда самое важное, конечно же, это кеш, использование кеша очень полезно для проекта. Например, когда мы посещаем веб-страницу и используем функцию возврата на веб-страницу, мы обнаружим, что загрузка происходит очень быстро, а опыт очень хорош.В этом сила кэширования.
Что такое кеш?
Когда мы впервые посещаем веб-сайт, например juejin.cn, компьютер загружает изображения и данные с веб-сайта на компьютер.Когда мы снова посещаем веб-сайт, веб-сайт будет загружен непосредственно с компьютера, что кеш.
Каковы преимущества кэширования?
1. Сбросьте нагрузку на сервер, не нужно каждый раз запрашивать определенные данные.
2. Улучшить производительность, открывать локальные ресурсы точно будет быстрее, чем запрашивать сервер.
3. Уменьшите потребление полосы пропускания.Когда мы используем кеш, он будет генерировать лишь небольшое потребление сети.Что касается того, почему открытие локальных ресурсов также будет генерировать потребление сети, то будет объяснено следующее.
Типы веб-кеша:Кэш базы данных, кеш CDN, кеш прокси-сервера, кеш браузера.
Так называемый кеш браузера на самом деле относится к области памяти в компьютере, используемой локально, а также открывает жесткий диск в качестве буфера передачи данных, а затем использует этот буфер для временного сохранения ранее доступной информации.
Процесс кеширования браузера:Сильный кеш, согласованный кеш.
Расположение кеша браузера обычно делится на четыре категории:Service Worker-->Кэш памяти-->Кэш диска-->Push Cache.
1. Сильный кеш
Сильное кеширование означает, что при обращении к URL мы не будем отправлять запрос на сервер, а будем читать ресурс напрямую из кеша, но вернем код состояния 200.
Как настроить сильный кеш?
В первый раз, когда мы заходим на страницу, запрашиваем сервер, а затем сервер отвечает. Браузер определит, следует ли кэшировать ресурс в соответствии с заголовком ответа. Если поля expires, pragma или cache-control в заголовке ответа указывают, что это является сильным кешем, ресурсы браузера будут кэшироваться в кеше памяти или кеше диска.
Во втором запросе браузер определяет параметры запроса и, если он соответствует условию сильного кеша, напрямую возвращает код состояния 200 и извлекает данные из локального кеша. В противном случае параметры ответа сохраняются в заголовке запроса заголовка запроса, чтобы увидеть, соответствуют ли они согласованному кэшу.Если они совпадают, будет возвращен код состояния 304. Если они не совпадают, сервер вернет новый ресурс.
expires
Это поле, которое HTTP1.0 управляет кешем веб-страницы. Значение представляет собой метку времени, то есть время по Гринвичу, если быть точным. Сервер возвращает время истечения срока действия кеша результатов запроса, что означает, что при повторной отправке запроса, если время истечения не превышено, используйте его напрямую.Кэш, если истек, перезапросите.
Одним из недостатков является то, что он использует местное время, чтобы определить, истекло оно или нет, и местное время может быть изменено само по себе.
Cache-Control
Это поле, которое управляет кэшированием веб-страницы в HTTP1.1.Когда Cache-Control существует, Cache-Control имеет более высокий приоритет.Основные значения:
public: ресурсы на клиенте и сервере могут кэшироваться.
privite: ресурс может кэшироваться только клиентом.
no-cache: клиент кэширует ресурсы, но нужно ли проверять кэш путем согласования кеша.
no-store: не использовать кеш.
max-age: срок хранения кэша.
Cache-Control использует относительное время max-age для решения проблемы истечения срока действия.
pragma
Это поле отключает кэширование веб-страницы в HTTP 1.0, и его значение — no-cache, что имеет тот же эффект, что и no-cache в Cache-Control.
2. Расположение тайника
Выше мы сказали, что для сильного кэширования мы поместим ресурсную комнату в кеш памяти и кеш диска.Какие ресурсы помещаются в кеш памяти и какие ресурсы помещаются в кеш диска?
Ресурсы хранения, такие как изображения и веб-страницы, в основном кэшируются в кэше диска, а большинство ресурсов, таких как файлы кэша операционной системы, кэшируются в кэше памяти. Конкретная операция автоматически назначается браузером, и она будет назначена тому, кто увидит, что коэффициент использования ресурсов невысок.
Видно, что время запроса кеша памяти все 0 мс.Разве это не удивительно?Позвольте мне разобраться в этом аспекте.
При поиске кеша браузера он будет выглядеть по порядку: Service Worker-->Кэш памяти-->Кэш диска-->Push Cache.
1. Service Worker
Это независимый поток, работающий за браузером, и обычно его можно использовать для реализации функции кэширования. При использовании Service Worker транспортным протоколом должен быть HTTPS. Поскольку в Service Worker задействован перехват запросов, для обеспечения безопасности необходимо использовать протокол HTTPS. Кэш Service Worker отличается от других встроенных механизмов кеширования в браузерах, он позволяет нам свободно контролировать, какие файлы кешируются, как сопоставлять кеш, как читать кеш, и кеш является постоянным.
2. Memory Cache
Кэш в памяти в основном содержит ресурсы, которые были захвачены на текущей странице, такие как стили, скрипты, изображения и т. д., которые были загружены на страницу. Чтение данных в памяти определенно быстрее, чем с диска.Хотя кеш памяти эффективен при чтении, сохраняемость кеша очень короткая и будет освобождаться по мере освобождения процесса. Как только мы закрываем вкладку, кэш в памяти освобождается.
3. Disk Cache
Кэш, хранящийся на жестком диске, читается медленнее, но все может храниться на диске, что лучше, чем кэш памяти с точки зрения емкости и своевременности хранения.
Среди всех кешей браузера охват Disk Cache в основном самый большой. Он будет судить, какие ресурсы необходимо кэшировать в соответствии с полями в HTTP Herder, какие ресурсы можно использовать напрямую без запроса, а какие ресурсы просрочены и требуют повторного запроса. И даже в случае кросс-сайта, как только ресурс с тем же адресом будет закэширован жёстким диском, он больше не будет запрашивать данные. Большая часть кеша поступает из Disk Cache.
Кэш памяти намного быстрее, чем кеш диска. В качестве примера: прямой доступ к файлу с удаленного веб-сервера может занять 500 мс (полсекунды), затем доступ к диску может занять 10–20 мс, а доступ к памяти — всего 100 нс, а более продвинутый доступ к кэшу L1 (самый быстрый и минимальный кэш процессора) занимает всего 0,5 наносекунды.
Удивительно, мы видим еще один prefetch cache, что это?
кеш предварительной выборки
В теге ссылки есть предварительная выборка, и она появится при повторной загрузке.
Prefetch — это способ предварительной загрузки. Ресурсы, помеченные как prefetch, будут загружены браузером во время простоя.
4. Push Cache
Push Cache (push cache) — это контент в HTTP/2, он будет использоваться, когда ни один из трех вышеуказанных кешей не сработает. Он существует только в сеансе (Session) и освобождается после завершения сеанса, а время кэширования также очень короткое, всего около 5 минут в браузере Chrome, и он строго не реализует инструкции кэширования в заголовке HTTP.
5. ЦП, память, жесткий диск
Здесь упоминаются жесткий диск и память, возможно, у некоторых друзей нет интуитивного представления о жестком диске и памяти.
Центральный процессор, память и жесткий диск являются основными компонентами компьютера.
ЦП: сокращение от центрального процессора (Central Processing Uit), также называемого процессором, является вычислительным ядром и ядром управления компьютера. Компьютер управляется и контролируется центральным процессором. Пусть различные компоненты компьютера работают бесперебойно и играют роль в координации и контроле.
Жесткий диск: Устройство, на котором хранятся данные, такие как данные и программное обеспечение.Он имеет характеристики большой емкости и не допускает потери данных после сбоя питания.
Память: отвечает за обработку обмена данными между данными на оборудовании, таком как жесткие диски, и ЦП. Он характеризуется небольшим размером, быстрой скоростью, может сохранять мощность, и никакая мощность не может быть сброшена, то есть компьютер может сохранять данные в памяти при включении, и все данные в нем будут автоматически очищены после компьютер выключен.
3. Согласовать кеш
Согласованное кэширование — это процесс, в котором браузер отправляет запрос на сервер с идентификатором кеша после того, как сильный кеш становится недействительным, и сервер решает, использовать ли кеш в соответствии с идентификатором кеша.
В основном есть две ситуации:
Кэш согласования вступает в силу и возвращает 304
Согласовать аннулирование кеша, вернуть 200 и запросить результат
Как настроить кеш переговоров?
Last-Modified / If-Modified-Since
Last-Modified — это время последнего изменения файла ресурсов на сервере, когда сервер ответил на запрос.
If-Modified-Since означает, что когда клиент снова инициирует запрос, он несет значение Last-Modified, возвращенное последним запросом, и значение этого поля сообщает серверу время последнего изменения ресурса, возвращенного последним запросом. Когда сервер получает запрос и обнаруживает, что заголовок запроса содержит поле If-Modified-Since, он сравнивает значение поля If-Modified-Since со временем последнего изменения ресурса на сервере. время ресурса сервера больше, чем Если значение поля Modified-Since, ресурс будет возвращен снова с кодом состояния 200, в противном случае он вернет 304, что указывает на то, что ресурс не был обновлен, а файл кеша можно продолжать использовать.
Etag / If-None-Match
Etag — это уникальный идентификатор (генерируемый сервером) текущего файла ресурсов, который возвращается, когда сервер отвечает на запрос.
If-None-Match означает, что когда клиент снова инициирует запрос, он несет значение Etag уникального идентификатора, возвращенное последним запросом, и значение этого поля сообщает серверу значение уникального идентификатора, возвращенное последним запросом ресурса. После того, как сервер получит запрос и обнаружит, что заголовок запроса содержит If-None-Match, он сравнит значение поля If-None-Match со значением Etag ресурса на сервере. 304, что указывает на то, что ресурс не обновлен. , продолжать использовать файл кеша, если он несовместим, вернуться к файлу ресурсов с кодом состояния 200.
Etag/If-None-Match имеет более высокий приоритет, чем Last-Modified/If-Modified-Since, и только Etag/If-None-Match вступает в силу, если оба существуют.
4. Схема кэша
Большинство текущих проектов используют эту схему кэша:
-
HTML: согласование кеша;
-
css, js, картинки: сильный кеш, имя файла с хешем.
5. Разница между сильным кешем и кешем согласования
1. Сильный кеш не отправляет запросы на сервер, поэтому иногда браузер не знает, обновлен ли ресурс, но согласованный кеш отправляет запрос на сервер, поэтому сервер должен знать, обновлен ли ресурс.
2. Большинство веб-серверов по умолчанию включают кэширование согласований.
6. Влияние сброса на надежные кэши и кэши согласования
1. Когда ctrl+f5 принудительно обновляет веб-страницу, загружайте ее непосредственно с сервера, пропускайте сильный кеш и кеш согласования.
2. Когда f5 обновляет страницу, сильный кеш пропускается, но проверяется согласованный кеш.
3. Напишите URL в адресной строке браузера и нажмите Enter.Браузер обнаружит, что этот файл есть в кеше, поэтому продолжать запрос не нужно, достаточно зайти в кеш, чтобы его получить. (самый быстрый)