Front-end caching knowledge combing

cache meaning

When a user visits a website, such as Nuggets, it will first load pictures and data from the website and cache them locally to prevent them from being opened again, and then go to the server to obtain data, improving the user experience and optimizing the speed of opening the webpage.

caching effect

1. Reduce bandwidth consumption
2. Reduce server requests
3. Improve website performance and optimize customer experience

cache location

Priority: service worker > memory cache > disk cache > push cache

Generally, you can see the location of the file cache from the size of the console, as shown in the figure:

service worker

Offline caching, a page will only be cached once, when it is first loaded. It will only be cached when it is registered, and https requests must be used, because it involves request interception, https must be used to ensure file transfer security

memory cache

Memory cache, which generally stores resources commonly used in pages, such as scripts, pictures, styles, and so on. The reading speed is faster than the disk, but the cache time is short. When the process is closed, the cache becomes invalid

disk cache

Hard disk cache, large capacity, can store everything, large coverage, more cache resources, but the reading speed is slower than memory cache

prefetch cache

Frame fetching cache, resources marked as prefetch in the link, indicating that the browser is idle and reloads

push cache

Push cache is http/2 knowledge. When none of the above three caches hits, it will be cached here. Generally, it is stored in the session (session), and the time limit is very short. When the session is closed, the cache will be invalid.

cpu, hard disk, memory

Like many people, I tend to confuse the concept of hard disk and memory, and I always think that memory and hard disk are the same concept, but they are not.

cpu, hard disk, and memory are all important components of a computer

• cpu: central processing unit, also called processor, coordinates and caches the functions of various components
• Hard disk: disk, the role of storing files and application software, the computer will not lose data when the computer is powered off
• Memory: Responsible for data exchange processing between data on hard disk and other hardware and CPU. It is characterized by small size, fast speed, storage with electricity, and emptying without electricity. That is, when the computer is turned on, data can be stored in the internal memory, and all data will be automatically cleared after the computer is turned off.

Types of web cache

浏览器缓存、cdn缓存、数据库缓存、代理服务器缓存

1. CDN cache: When sending a web request, CDN will calculate the shortest path of the requested content. In order to speed up the request, it will generally be put into the CDN, such as https://unpkg.com/vue@3/dist/vue. global.js
2. Database cache: When the data in the data table is too large, the front-end request will cache it in the local memory, and the next time the back-end data will be queried from the cache first, and if there is no cache, the request will be sent to the back-end
3. Proxy server caching: similar to browser caching, but the proxy server faces a wide range of clients, so files that are called many times will be cached to speed up page response and reduce bandwidth requests
4. Browser cache: When making an http request, it will cache the http data, such as the forward and backward of the web page, and save the data that the user has visited before

strong cache

For a period of time, read data directly from the cache without sending a request to the server, and the status code is200

Judgment basis: When sending a request, the browser will first judge response headerwhether there is expires(http1.0)an or pragmaor cache-controlfield, and if it exists, it is强缓存

negotiation cache

强缓存After expiration 协商缓存(cache time exceeds cache-control, max-ageor no-cache)

• Negotiation cache takes effect: status code304
• Negotiation Cache Invalidation: Status Code200
  

Through the following two ways to achieve

last-modified

The last modification time , when requesting again, request headerwill carry if-last-modified( the last-modified returned by the server last time ), the server will compare it if-last-modifiedwith last-modified, if it is the same, it will return 304 , otherwise the server will return 200 and a new resource file

shortcoming:

• Even if the information has not been modified, the server will modify and return last-modified, resulting in waste of resources
• last-modified is timed in seconds , if the modification is less than a second, the server will not perceive it and will return 304

etag

A unique identifier , the server will return one each time etag, and a new one will be generated when the resource file is modified etag. When requesting again, request headerit will carry if-none-match( the etag returned by the previous request ), compare the two, and return 304 if they are consistent, and return 200 and a new resource file if they are inconsistent

difference between the two

• last-modified has high efficiency, and the hash generation of etag needs to be calculated according to the content of the file
• etag is more precise
• etag has higher priority

Actual usage scenarios

• The basically unchanged data in the webpage will be cached, such as css, js and pictures, etc.
• html structure will not be cached
• Web page business data will not be cached