HTTP caching
What is HTTP caching?
When the browser visits a website, if it is the first visit, it needs to load various resources, such as html, js, css, img, etc. When we visit the website later, there is no need to load various resources, you can Some resources are cached through the HTTP caching strategy, so that the browser does not need to re-fetch from the server, but can be obtained directly from the cache, thereby improving the access speed of the website.
Why do you need to use HTTP caching?
In the process of entering a URL to loading a page, it generally goes through processes such as CPU calculation, page rendering, and network requests. The network request is the only uncertain factor and will be affected by environmental factors. So HTTP caching is needed to reduce network requests so that pages can be rendered quickly.
Kind of request
1. Forced caching
When a browser visits a website for the first time, it sends a request to the server, and the server sends some resources.
If the server thinks these resources should be cached, it will set Cache-Control:max-age= (in seconds) in the response header . In this way, the browser will store the resource file in the local cache. The next time the resource file is requested again, the browser will check whether the max-age has expired. If it does not expire, it will be obtained directly from the cache. Request the interface to get the resource.
If the server feels that these resources should not be cached, set Cache-Control:no-cache so that they will not be cached.
Cache-Control是通过响应头设置过来的，前端是不能做设置的，由服务器决定的。
2. Negotiate cache
If negotiated caching is used, when the browser accesses the website, the server will return the resource and resource identifier , the browser can cache the resource and resource identifier to the browser, and when the website is accessed again later, the browser will request Send it to the server together with the resource identifier, so that the server will judge whether the current local cached version is the same as the server version according to the resource identifier:
if it is the same, the server will return a 304 status code , and the browser can directly get the resource file from the cache .
If it is inconsistent, the server will return a 200 status code , and at the same time, the new resource and resource identifier will be returned to the browser, and the browser will re-cache.
资源标识有以下两种：
1、Last-Modified
上次修改时间
When the browser requests the next time, it will put the resource identifier ( if-Modified-Since ) value (that is, the Last-Modified value obtained from the server last time) in the request header and send it to the server, and the server will send the resource identifier ( Last -Modified value) to the server. -Modified ) is returned in the response header, and by comparing the two modification times to determine whether the locally cached resource files are consistent, so as to choose where to obtain the resources.
2、Etag
资源文件唯一字符串
When the browser next requests, it will put the resource identifier ( if-None-Match ) the value (that is, the Etag value obtained from the server last time) in the request header and send it to the server, and the server will put the resource identifier ( Etag ) in Returned in the response header, by comparing these two unique strings to determine whether the locally cached resource files are consistent, so as to choose where to get the resources.
Contrast: Last-Modified can only be accurate to the second , but our front-end is accurate to the millisecond level, we should use Etag first.
The above is the HTTP cache, please pay attention to the " Front-end Interview Questions " column.
I will share the common problems in my usual projects and the knowledge of the written test and interview with you on CSDN, and make progress together. Come on.