Navigate Up
Sign In
Supporters of Developer
Web

Cache Busting Using CssRegistration & ScriptLink in SharePoint 2010

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.

You may also be interested in: SharePoint Fest Denver 2013

 

Editor's note: Contributor Thomas Daly is a SharePoint Solutions Developer for B&R Business Solutions. Follow him @_tomdaly_

What is cache busting?

Cache busting is way to ensure that the browser will download a new version of your file. This is easily accomplished using a simple technique of appending a ? with some unique characters at the end.

ex:


<link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" />

The browser sees this as a different file and will then download and cache this new file. Each time the browser see’s a different string it will download the file and cache it. Some methods use a revision number, a date, random number, or a signature as a query string parameter. Taking a look at the example above you will see a version number is specified at the end of the .css file to do the cache busting.

SharePoint 2010 uses a technique which involves computing a MD5 hash signature of the file and appending a ?rev={MD5HASH} to the link. This technique works very well because the computed hash won’t change unless you change something in the file. Also the computed MD5 hash will be unique to ensure that the file will appear new to the browser. For all you super technical people, yes MD5 is not guaranteed to be unique, there is a very very small chance of the hash being the same. This technique of the computed MD5 hash signature is used for both CssRegistration and ScriptLink in SharePoint 2010. If you are interested in more detail then reflect into Microsoft.SharePoint.dll –> Microsoft.SharePoint.Utilities –> SPUtility –> MakeBrowserCacheSafeLayoutsUrl

Cache busting for CssLink

When using CssRegistration the files need to be relative to the Layouts folder, more specifically LAYOUTS\1033\STYLES\{CssFile}.

2013-02-20-CacheBusting-01.png

2013-02-20-CacheBusting-02.png

If you do not keep the files in the LAYOUTS\1033\STYLES then you will receive an error

2013-02-20-CacheBusting-03.png

Below is the rendered html output of the CssRegistration tag above

2013-02-20-CacheBusting-04.png

You can see that “/_layouts/1033/styles/” is prepended to the ‘Name’ property provided in the CssRegistration tag and your .css file is successfully cache safe.

Cache busting for ScriptLink

When using ScriptLink the files need to be relative to the Layouts folder. Unlike the CssRegistration, ScriptLink has a property called ‘Localizable’. In the asp tag below I specify Localizable=”False”

If you don’t specify Localizable=”False” then you need to put the files relative to the Layouts\1033 folder.

2013-02-20-CacheBusting-05.png

 2013-02-20-CacheBusting-06.png

Below is the rendered html output of the ScriptLink tag above

2013-02-20-CacheBusting-07.png

You can see that the “/_layouts/” is prepended to the ‘Name’ property provided in the ScriptLink tag and your .js file is successfully cache safe.

What if I am deploying files to the Style Library?

In the scenario where you are deploy CSS to the Site Collection style library then there is no automated way of using the SharePoint cache busting from the CssLink, however you can take a look at Chris O’Brien’s posting – Avoiding bugs from cached JavaScript and CSS files in SharePoint. In this posting he has a solution in which he creates a new class inheriting from CssLink and adds his own mechanism of cache busting. He also mentions that there is no equivalent way to do the same for JavaScript files stored in the content db.

Summary

SharePoint 2010 provides an easy way to do cache busting on CSS and JS files stored in the LAYOUTS folder.

If you store your files in the ‘Style Library’ or content DB then you have to revert to manual methods or get creative with your own solutions.

Categories: Branding; dev; CSS; Javascript and jQuery; 2010

Comments

ahmed

UK

Taking a look at the example above you will see a version number essay writing services is specified at the end of the .css file to do the cache busting.

Posted 20-Jun-2013 by ahmed
Joe Bennot

Joe

Thank you for this fantastic and needful read. I was very encouraged to find this site. Thanks a lot.

Posted 16-Jul-2013 by Joe Bennot
Guess watches

lnya sendiri dalam menyelesaikan

e end of the .css file to do the cache busguess watches rose gold

Posted 24-Jul-2013 by Guess watches
shy

a

Thanks for your great post best essay.com also thanks for that your giving us great information. Please keep posting.

Posted 29-Jul-2013 by shy
super

super

Looking at this case in point over you will observe a new edition variety write a dissertation is specific right at the end on the. css report to do this cache removal.

Posted 17-Aug-2013 by super
essay writing services

Good work

As there are huge amounts of posts on the web, I considered yours fascinating and generally watched. That might flavor things up.

Posted 10-Oct-2013 by essay writing services
microneedle skin roller

reply

The blog is in reality the great on this worthy subject. I match in together with your Conclusions and looking forward to your coming updates.Cache busting is the ultimate point of scrutiny and power power point presentations. Thanks for sharing!!

Posted 28-Feb-2014 by microneedle skin roller

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: