CODEWITHSUNDEEP
javascripthtmlcsssrc
banjomarx
banjomarx

Reputation: 19

How does "?v=" in HTML linking work?

I have been developing a website for testing new stuff, and I need to figure out the "?v=" thing. But I have no clue how it works, so can someone explain this to me please haha? Like how to, and how it works.

So what would this look like and how would the file names on the server vary for this:

<script src="assets/js/moticulous.js"></script>
<link rel="stylesheet" href="assets/js/platforms.css"/>

as opposed to this:

<script src="assets/js/moticulous.js?v=1"></script>
<link rel="stylesheet" href="assets/js/platforms.css?v=1"/>

Upvotes: 1

Views: 334

Answers (3)

hecate
hecate

Reputation: 632

The dummy HTTP GET string is passed to prevent caching as some browsers cache the .js and .css files. It is usually done to prevent the older version of the file from loading by the browsers via browser cache when a change is made to the .css or .js file. Adding the timestamp value to the name (as <filename>?<timestamp>) is more popular than adding the version as it forces the browser to download the files every time the page is viewed as no two request times have the same timestamp.

Upvotes: 0

serverSentinel
serverSentinel

Reputation: 994

That is a technique used to control caching of script, css and image files.

The browser will download the script file with the ?v=1 parameter (example"http://example.com/path/to/script.js?v=1") and cache it to the visitors disk. The next time the browser visits the page, if the URL is still "http://example.com/path/to/script.js?v=1" then the cached version will be loaded.

If you change the ?v=1 to ?v=2 then the cached version is no longer valid as the full URL is no longer the same as what the browser has cached. This results in a new file being downloaded, and cached. This forces recent changes to every visitor regardless of cache settings set at the server config or browser.

This technique is often used with a version number (likely why its a v=) to force a new download of the js when the software version gets updated.

In your backend code, you would replace the =1 part with whatever the current software version is to make this cache control dynamic. Alternately, you could increment the version number whenever the asset changes but that's less dynamic or more work to make it so.

Upvotes: 0

Rohit
Rohit

Reputation: 1812

This can be added to prevent Caching of js/css/image files. By adding ?anything=123 You force browser/client to download the updated version of js/css/image file from the server.

Read more on: https://css-tricks.com/can-we-prevent-css-caching/

Upvotes: 3

Related Questions