When a browser requests the server to get a static file, the browser will download this file, and then it will cache them to improve & optimize performance. Doing this caching helps the browser not to download files on every request and use cached files. This caching is one of the most important things to do when optimizing websites which ultimately saves a lot of data for end uses/visitors. Optimizing the website performance includes setting up the long expiration dates for the static resources such as images, stylesheet & javascript. Doing that server tells the browser to cache your file for that time.
However, this leads to a one-issue what happens if developers are changing any of the static files?
So it’s sure the browser is not going to know that developer has changed some files because the browser will look for the cached file only as the file URL is not going to change. the technique to solve this problem is called cache bursting. One way to solve this problem is link needs to point to a different URL so the browser will download it again.
Fingerprinting-
Forcing the browser to download the file again is called fingerprinting. This technique is about adding parameters to the URL of a static file It could be random or value derived from the file logic. This way browser is tricked into seeing this new URL as different from another URL and due to a change in URL we tell the browser to cache the file with a new URL.
we usually add a parameter with the date of the file’s last modification which is converted to a number of ticks (a 64-bit integer) now once the timestamp is included in the URL browser will consider it as a new file and then request that from the server instead of cache.
Implementation .NET MVC / .NET Core-
1) Removing caching entirely –
This is usually done by appending the different randomly generated query string parameters. For example, something like a timestamp.
<script src=”~/jquery.js?dt=@(DateTime.Now.Ticks)”></script>This will add a timestamp as a query string and every time browser will download files from the server instead of cache. Definitely, this is going to solve our problem but it is very inefficient as it’s going to download files from the server on every request.
Adding a timestamp to file
Timestamp change in every request
2) Modify timestamp only when the file is updated
It now includes a timestamp, which is automatically updated every time the file is modified. Since the browser considers the whole URL (including query string parameters) of the file, it will not be considered the same as the earlier one.
For this approach, you need to deploy your application on an IIS server and make use of URL rewriting which basically avoids the refreshing of the static file every time on the server.
For this approach use the below steps,
i) Add an extension method for URL with a timestamp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Caching;
using System.Web.Hosting;
using System.IO;
namespace CacheBurstingMVC
{
public class CacheUrlExtension
{
public static string Extend(string relativePath)
{
if (HttpRuntime.Cache[relativePath] == null)
{
string absolutePath = HostingEnvironment.MapPath(“~” +
relativePath);
DateTime date = File.GetLastWriteTime(absolutePath);
int index = relativePath.LastIndexOf(‘/’);
string result = relativePath.Insert(index, “/v-” +
date.Ticks);
HttpRuntime.Cache.Insert(relativePath, result, new
CacheDependency(absolutePath));
}
return HttpRuntime.Cache[relativePath] as string;
}
}
}ii) Use the extension method for static files.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width” />
<title></title>
<link rel=”stylesheet” href=@CacheBurstingMVC.CacheUrlExtension.Extend(“/Content/styles.css”)/>
</head>
<body>
<div>Home</div>
</body>
</html>iii) Adding URL rewrite on IIS server
<system.webServer>
<rewrite>
<rules>
<rule name=”fingerprint”>
<match url=”([\S]+)(/v-[0–9]+/)([\S]+)([\S]+)” />
<action type=”Rewrite” url=”{R:1}/{R:3}” />
</rule>
</rules>
</rewrite>
</system.webServer>Test Results-
After deploying to IIS first load
Version Information
Changing style file and deploying again
Version Information
3) Versioned approach
In this approach, you are going to append the version number after the static file and according to that version number, it will download the new file from the server if the version is changed otherwise it will get the file from the cache.
<script src=”~/jquery.js?v=@(AppVersionNumber)”></script>Source: Medium-Vaibhav Bhapkar
The Tech Platform
Comments