Caching and advantages
The browser's cache can temporarily store some files, so there is no need to re-download these files when the page switches or the same page is loaded again. The server can set the header to tell the browser to store these files within a certain period of time. This will not only greatly speed up the site but also save your bandwidth.
Caching problems
However, when developers modify the site, it may bring some problems: some users may still access the files before the modification. This will cause those users to use previous functions or visit a broken site (when the page elements rendered by the server are deleted, moved, or renamed, those cached CSS and JavaScript files will operate on these elements. error)
solution
The key to solving the cache is to force the browser to download the latest file. This only needs to give those old files a new name, or modify the server header.
A relatively simple and commonly used technique is to add a query string at the end of the file to force the browser to download the new file again. As follows:
src="js/script.js"
src="js/script.js?v=2"
Expand
- The server header is set to ETag
- Service Workers 及 Cache Storage
- The speed of the website will largely affect the SEO score
- Caching and naming are hailed as two major problems in programming
- Projects using webpack have already solved this problem automatically at the framework level.
