Write in front:
Why do web browsers need to have baiBrowser Caching?
We all know that when a URL is opened in the browser, it will go through: URL resolution -> DNS query -> TCP connection -> processing request -> accepting response -> rendering the page, and after a series of steps, and nothing (such as , Internet speed is too slow, sudden Internet disconnection, server error, code error, etc.) The content of the page can be displayed normally before our eyes.
Moreover, all resources loaded in the web page must establish an HTTP connection. The client (browser) and the server must go through three handshakes, four waved hands, and then go through the DOM tree rendering process. It is actually not easy (especially in The previous network environment and software and hardware technology were not very good, but now everything is better!), so in order to improve the rendering speed of the page, there is this browser cache.
The benefits of browser caching:
When we browse the web for the first time, the browser will automatically cache the loaded series of resources by default. When we open the previous web page again, we will first check whether the cache has the resources requested this time, if so Read directly from the cache (if not, request the server), so that we can access the page: reduce request time, save network traffic, improve response speed, and we will bring a better user experience.
Disadvantages caused by browser caching:
Caching is indeed beneficial for users, but as developers, especially for front-end development, you know that whenever there are new requirements for the project, after the version is updated and iterated, if the user already has a cache, what you see The page is still the cache effect that you have browsed before, and you can’t see the updated effect. This situation is more serious especially in the WeChat built-in browser (when you were in a hurry, let the customer service temporarily teach the user to clear the WeChat cache to solve this problem).
How to clear the cache of WeChat browser:
Since the WeChat browser has different browser kernels in the mobile Android environment and the IOS environment, the way to clean up the cache between different versions of WeChat and different systems is slightly different.
Manually clear the WeChat cache in the IOS environment:
There are several cleaning methods as follows (Android environment is also applicable)
- Log out of the current WeChat account first, and then log in to WeChat again;
- If it is a WeChat public account, enterprise account, etc., get attention first, and then follow again.
- After entering the page, click the "..." button in the upper right corner, and click " Refresh " in the pop-up options at the bottom of the screen .
- Click on the "I" at the bottom of the micro-channel navigation menu -> Settings -> General -> Storage -> clean the cache or clean up .
Manually clear the WeChat cache in the Android environment:
Open the X5 kernel debugging dedicated page URL provided by Tencent Browser Developer Service in WeChat : https://debugx5.qq.com , after opening it in WeChat browser, check the options to be cleared, and click the clear button. ! As shown below:
Note: Some mobile phones may prompt when opening debugx5.qq.com , "The kernel you are using is not an X5 kernel, please go to..."
After the above situation occurs, please open http://debugmm.qq.com/?forcex5=true in the WeChat browser first , and then open debugx5.qq.com ! You can open it!
In addition to the above method of clearing the cache, there is another way to clear the cache in the Android environment, which is to find the WeChat in the Android phone settings -> applications -> application management, and then clear the WeChat APP in the application management Cache, as shown below!
Other solutions to clear the WeChat browser cache:
1. Set the meta tag in the head of the HTML page to not cache (but this method is invalid in WeChat browser) :
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
</head>
2. Rename related static resources:
Finally, regarding the cache issue, I personally feel that we still have to start with development, because not all users will or are willing to clear the cache, so we can only avoid this problem from the initial starting point.
The main purpose of reloading resources is to retrieve resources from the server instead of reading the cache when loading webpage-related resources. As long as the resource is recombined, it will be loaded as a new resource and there will be no caching problem!
But if there are many file resources, it is impossible to manually change them one by one, which is too troublesome, so we generally use some construction tools such as Webpack, Gulp, FIS, Grunt, etc. to rename the file resources. Or used in popular front-end frameworks such as: Vue, React, Angurl, etc., they all have resource naming functions!
The packaged and generated file resources are shown in the following figure. Each time the packaged and generated file resources are renamed, they will be loaded as new resources after going online, so there will be no cache problem, and as long as they are not updated after development The iterative version (if you want to update the iteration, it will not affect it. The big deal is that when the user loads the file for the first time, this traffic is not a problem for the user). The user will also update the iteration for the first time. It will be cached automatically, so that the user experience and update iterations will not affect each other!
Such as: xxx.html, xxx.jpg, xxx.css, xxx.js, etc.;
