How to learn Web front-end development skills? How to understand browser cache? Web cache refers to a copy of a Web resource (such as HTML pages, pictures, JS, data, etc.) existing between the Web server and the client (browser). An excellent caching strategy can shorten the distance of web page request resources and reduce delay, and because the cache file can be reused, it can also reduce bandwidth and reduce network load. Next, Qian Feng editor will give you a brief introduction.
What does web caching do?
1. Reduce network bandwidth consumption. Regardless of website operators or users, bandwidth represents money, and excessive bandwidth consumption will only make network operators cheaper. When the web cache copy is used, only minimal network traffic will be generated, which can effectively reduce operating costs.
2. Reduce server pressure. After setting the validity period of network resources, users can reuse the local cache to reduce requests to the source server and indirectly reduce the pressure on the server. At the same time, crawler robots of search engines can also reduce the frequency of crawling according to the expiration mechanism, and can effectively reduce the pressure on the server.
3. Reduce network delay and speed up page opening speed. Bandwidth is very important for personal website operators, and for large Internet companies, it may sometimes not really care because of the large amount of money. Does Web caching still work? The answer is yes. For end users, the use of caching can significantly speed up the page opening speed and achieve a better experience.
Browser-side caching rules
For browser-side caching, these rules are defined in the HTTP protocol header and the Meta tag of the HTML page. They respectively stipulate from two dimensions of freshness and check value whether the browser directly uses the copy in the cache, or whether it needs to go to the source server to obtain the updated version.
1) Freshness (expiration mechanism): that is, the validity period of the cached copy. A cached copy must meet any of the following conditions, the browser will consider it to be valid and new enough, and directly obtain a copy from the cache and render:
Contains complete expiration time control header information (HTTP protocol header), and is still within the validity period;
The browser has already used this cached copy and has checked the freshness in one session.
2)校验值(验证机制)：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag)，它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。
哪些请求不能被缓存?
1)HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0等告诉浏览器不用缓存的请求;
2)需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的;
3)经过HTTPS安全加密的请求(有人也经过测试发现，ie其实在头部加入Cache-Control：max-age信息，firefox在头部加入Cache-Control:Public之后，能够对HTTPS的资源进行缓存，参考《HTTPS的七个误解》);
4)POST请求无法被缓存;
5)HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存。
缓存使用流程
1)本地缓存阶段：先在本地查找该资源，如果有发现该资源，而且该资源还没有过期，就使用这一个资源，完全不会发送http请求到服务器;
2)协商缓存阶段：如果在本地缓存找到对应的资源，但是不知道该资源是否过期或者已经过期，则发一个http请求到服务器，然后服务器判断这个请求，如果请求的资源在服务器上没有改动过，则返回304，让浏览器使用本地找到的那个资源;
3)缓存失败阶段：当服务器发现请求的资源已经修改过，或者这是一个新的请求(在本来没有找到资源)，服务器则返回该资源的数据，并且返回200， 当然这个是指找到资源的情况下，如果服务器上没有这个资源，则返回404。
如果你想了解更多Web浏览器缓存的知识，或者想要快速掌握Web前端工程师所需技能，你可以选择专业学习一下，尽快入门Web前端行业，为自己搭建一个职场高起点！