How to make the front-end interface automatically clear the cache of js and css files

In the process of web project development, we often reference css and js files. Caching problems often occur after updating the files (the code is obviously changed, but there is no change when accessed on the browser). In this case, we usually Adopt the following two solutions:

1. Manually clear the browser cache

2. Add the version number (such as layout.css?v=1)

My personal opinion 2 is faster, because clearing the browser cache still has to wait for the browser to respond. But it is troublesome to change the version number every time, so you need to find a way to automatically add the version number.

The following are the methods I collected:

Method 1: You can automatically add the version number to html through js

<script type="text/javascript"> 
document.write("<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;/css/layout.css?v="+new Date().getTime()+"&#39;>");  
</script>

Method 2: If it is a jsp page, you can use java code to generate a timestamp (if it is a jsp page, you can also use method 1, but this method is more convenient)

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

Method 3: Use other Method to add the version number, such as automatic configuration with node.js, etc.

ps: The purpose of clearing the cache is to see the update of the page in time. When we put the page online (that is, deploy it to the formal environment, no Will make changes again), it is recommended to fix the version number, because the cached page access is faster, and change the fixed version number when it needs to be updated.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to solve the gaps in the pictures in H5

What aspects need to be paid attention to in the page structure of html5

How to use localStorage and sessionStorage

The above is the detailed content of How to make the front-end interface automatically clear the cache of js and css files. For more information, please follow other related articles on the PHP Chinese website!