Cache sets that programmers must know

1. Threads and processes

1.1 Process:

A process is a running activity of a program in a computer on a data set, the basic unit of resource allocation and scheduling in the system, and the basis of the operating system structure.

1.2. Thread:

Thread is the smallest unit that the operating system can perform operation scheduling. It is included in the process and is the actual operation unit in the process. A thread refers to a single sequential control flow in a process. A process can have multiple threads concurrently, and each thread executes different tasks in parallel.

1.3. Relationships

Each process has a corresponding thread, and when executing a program, it actually executes a corresponding series of threads. A process is the smallest unit of resource allocation, and a thread is the smallest unit of program execution.

2. Browser kernel module composition

4. Event loop mechanism

How the model works:

Execute the initialization code, and hand over the event callback function to the corresponding module for management.
When an event occurs, the management module will add the callback function and its data to the callback queue.
Only after the initialization code is executed (it may take a certain amount of time), it will traverse and read Get the callback function execution in the callback queue

5. Cache

5.1. Cache Understanding

1. Cache Definition:
2. The browser stores the data previously requested by the user on the local disk. When the visitor needs to change the data again, there is no need to send the request again, and the data is obtained directly from the browser.
3. The benefits of caching:
4. reduce the number of requests
5. Save bandwidth and avoid wasting unnecessary network resources
6. Reduce server stress
7. Improve the loading speed of browser pages and improve user experience

var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
//是否启用cookie
if(!cookiesEnabled){
    
    
    alert("没有启用cookie ");
}else{
    
    
    alert("已经启用cookie ");
}

5.2. Cache Classification

1. Strong cache
2. No request is sent to the server, data is obtained directly from the local cache
3. The status code of the requested resource is: 200 ok (from memory cache)
4. Negotiate cache
5. Send a request to the server, and the server will determine whether to hit the negotiation cache according to the resource in the request header
6. If hit, return a 304 status code to notify the browser to read the resource from the cache
7. The common ground of strong cache & negotiation cache
8. Both read resources from the browser side
9. Differences between Strong Cache vs Negotiated Cache
   1. Strong cache does not send requests to the server
   2. Negotiate the cache to send a request to the server, and decide whether to use the cache according to the information returned by the server

5.3. Schematic diagram of cache usage

5.4. Header parameters in the cache

Strongly cached header parameters

1. expires：
2. This is the specification of http1.0; its value is a time string in GMT format with absolute time. For example Mon, 10 Jun 2015 21:31:12 GMT, if the time of sending the request is before expires, then the local cache is always valid, otherwise it will send the request to the server to get resource
3. cache-control：max-age=number
4. This is the header information that appears in http1.1. It is mainly judged by the max-age value of this field. It is a relative value; the first request time of the resource and the validity period set by Cache-Control calculate a Resource expiration time, and then compare this expiration time with the current request time. If the request time is before the expiration time, the cache can be hit, otherwise it will not work;
5. Common values ​​of cache-control (just do a simple understanding):
6. no-cache: do not use local cache, need to use negotiated cache. First confirm with the server whether the returned response has been changed. If there is an Etag in the previous response, the requested amount will be verified with the server. If the resource is changed, the cache will be used.
7. no-store: Directly prohibit the browser from caching data. Every time the user requests the resource, a request will be sent to the server, and the complete resource will be downloaded each time.
8. public: Can be cached by all users, including end users and intermediate proxy servers such as CDNs.
9. private: can only be cached by the end user's browser, and is not allowed to be cached by relay cache servers such as CDNs.
10. Note: When cache-control and Expires coexist, cache-control has higher priority

---

Negotiate cached header parameters

Key point: The server determines whether the cache resource is available in the negotiation cache, so the client and the server need to communicate through some kind of identification, so that the server can judge whether the requested resource can be cached and accessed.

• Last-Modified/If-Modified-Since: Both values ​​are time strings in GMT format

1. The browser requests a resource from the server for the first time. When the server returns the resource, it adds the Last-Modified header to the response header. This header indicates the last modification time of the resource on the server.
2. When the browser requests the resource from the server again, it adds the header of If-Modified-Since to the header of the request. The value of this header is the value of Last-Modified returned in the previous request.
3. When the server receives the resource request again, it judges whether the resource has changed according to the If-Modified-Since sent by the browser and the last modification time of the resource on the server. If there is no change, it will return 304 Not Modified, but the resource content will not be returned; if If there is a change, the resource content will be returned normally. When the server returns a 304 Not Modified response, the Last-Modified header will not be added to the response header, because since the resource has not changed, the Last-Modified will not change. This is the response header when the server returns 304
4. After the browser receives a 304 response, it loads the resource from the cache
5. If the negotiated cache is not hit, when the browser loads the resource directly from the server, the Last-Modified Header will be updated when reloading, and the If-Modified-Since will enable the last-returned Last-Modified value in the next request
6. legend:
   

• Etag/If-None-Match

  1. These two values ​​are unique identification strings for each resource generated by the server, and this value will change whenever the resource changes
  2. Its judgment process is similar to Last-Modified/If-Modified-Since

• Ready-made Last-Modified What-life Etag

  1. The emergence of Etag in HTTP1.1 is mainly to solve several problems that are difficult to solve with Last-Modified
  2. Some files may be changed periodically, but their content does not change (only the modified modification time). At this time, we do not want the client to think that the file has been modified, and re-GET
  3. Some files are modified very frequently, for example, if they are modified within seconds (for example, they are modified N times within 1s), the granularity that If-Modified-Since can check is s-level, and this modification cannot be judged (or It is said that UNIX records MTIME can only be accurate to the second);
  4. Some servers cannot get the exact last modification time of a file.

---

Summary:
Using Etag can control the cache more accurately, because Etag is the unique identifier on the server side of the corresponding resource automatically generated by the server or generated by the developer.

Last-Modified and ETag can be used together. The server will first verify the ETag. If it is consistent, it will continue to compare Last-Modified, and finally decide whether to return 304.