The first time I came into contact with an enterprise's project, as a front-end junior staff, I didn't understand why the version number should be added after the imported file, so Baidu took a look, integrated a lot of information, and organized a relatively complete information.
···
First let's talk about the browser's cache
For browser cache, many programmers are very helpless. Whenever I launch a new project, I have to clear the cache, and then look at the page after the launch. If I don't delete it, then the page opened in my computer is still the same as before. When I first joined the company, I encountered this problem, so I thought it was a failure to go online, so I went to ask our operation and maintenance, after his inspection, mine was online without any problem, so he The computer on my computer is not the same as mine, and then I cleared the cache and the problem was solved. So I decided to write an article to illustrate this.
What is browser caching?
Simply put, the browser's cache is to copy a requested web resource, (html, css, js, images, icon) and other resources, and store it in the browser. The next time the same url is requested, it depends on , The cache will decide according to the caching mechanism to directly use the cache to display the web page or go to the server to re-request resources. The specific method will be described later.
Why use cache:
There are three points: (1) reduce the bandwidth consumption of the network,
Every time a page is requested, bandwidth is consumed, and too much bandwidth means money, so using caching can reduce operational costs.
(2) Reduce the pressure on the server,
The use of cache is to reduce the number of requests to the server, which indirectly reduces the pressure on the server.
(3) Reduce network delay, speed up page opening, and give users a better experience,
Because the browser does not need to go to the server to obtain resources when the page is opened, it will indirectly speed up the opening of the page.
When to use cache and when to request not to use cache:
There are many reasons, here I will only briefly mention a few:
The cache has an expiration date. If the expiration date is exceeded, the resource will be re-fetched from the server when the same page is accessed.
If the page is updated, the browser will also re-fetch resources from the server,
。。。。。
How can we avoid browser caching?
This goes back to the problem we talked about in the title. When we add a version number to the imported file, if the version number changes, the static resource will be re-fetched next time. The advantage of this is that you can control it. When to get the new version of static resources.
Of course, there are many ways to avoid the inconvenience caused by browser caching, and more methods will be updated in the future. . . Stay tuned! ! !