0

I have way too many pages in the application that basically load the same set of xml and js files for client side interaction and validation. So, I have about dozen lines like this one <script type="text/javascript" src="JS/CreateMR.js"></script> or like this one <xml id="DefaultDataIslands" src="../XMLData/DataIslands.xml">.

These same files are included in every page and as such browser sends request to read them every time. It takes about 900ms just to load these files.

I am trying to find a way to load them on just the login page, and then use that temp file as source. Is it possible to do so? If yes, how and where should I start?

P.S. A link to a tutorial will work too, as I have currently no knowledge about that.

Edit:

I can't cache the whole page, because the pages are generated at runtime based on the different possible view modes. I can only cache the js and xml file. Caching everything might be a problem.

Anyway, I am reading through the articles suggested to figure out how to do it. So, I may not be able to accept any answer right away, while I finish reading and try to implement it in one page.

Edit: Turns out caching is already enabled, it is just that my server is acting crazy. Check the screenshot below.

With Cache With cache (304 response)

Without cache Without cache (200 response)

As you see, with cache, it is actually taking more time to process some of the requests. I have no idea what that problem is, but I guess I should go to the server stack exchange to figure this out.

As for the actual problem, turns out I don't have to do anything to enable caching of xml and js files. Had no idea browsers automatically cache js files without using specific tag.

jitendragarg
  • 945
  • 1
  • 14
  • 54

3 Answers3

2

Totally possible and in fact recommended.

Browsers cache content that have been sent down with appropriate HTTP caching headers and will not request it again until the cache has expired. This will make your pages faster and more responsive and your server's load much lighter.

Here is a good read to get you started.

Here is ASP.NET MVC caching guide. It focuses on caching content returned from controllers.

Here is a read about caching static content on IIS with ASP.NET MVC.

Saeed Jahed
  • 821
  • 5
  • 8
  • Ok, I read the first document. No idea how to implement it in ASP. I am looking for tutorial on that. Let's see if I can find one. As for output caching, we already have that enabled in our application, but it doesn't cache xml files for some reason. I can't cache db results though, as it is a production app where data changes about 10 times per minute. That's why even indexing and view doesn't help much. – jitendragarg May 16 '16 at 03:41
  • @jitendragarg, your static JS and XML files should be sending down caching headers by default (unless they're being dynamically generated by a controller or ASP.NET aspx page). You can verify this by inspecting the response headers in your browser. Look for the `cache-control` and `expires` headers. – Saeed Jahed May 16 '16 at 03:47
  • Weird. It is actually doing that. All JS files and XML files are returning 304 server code. But, the time taken is same, even if I delete IE's cache. 900ms or so for every xml request whether it is 304 or 200. :/ Anyway, thanks for the help. Guess, I don't have to do anything special for js and xml file. – jitendragarg May 16 '16 at 04:32
  • I have another issue when I add caching on common controls like datepicker, as they didn't have caching enabled. Now `this.datepicker` line throws null exception. I kept the caching limit as 20 minutes, same as my session time limit, so cache shouldn't expire. – jitendragarg May 16 '16 at 04:40
2

Basically, you want to use browser caching mechanism to cache the src files after the first request.

  1. If you're using F12 tools in your browser to debug network requests, make sure you have disable cache option unchecked. Otherwise, it forces browser to ignore cached files.
  2. Make sure your server sends and respects cache headers - it should return HTTP status 304 Unmodified after first request to a static file.
  3. Take a look at Asp.Net Bundling and minification - if you have for example multiple js source files, you could bundle them into one file that will be cached on the first request. Additionally, if you use external js libraries, you could download them from a CDN instead of your server - this will both offload your server and enable user browser to use cached script version (meaning - if some other page that user has visited also used the same script, browser should already have it cached).
qbik
  • 5,502
  • 2
  • 27
  • 33
  • I checked, it is by default returning proper status code. Only thing is it is taking same 900ms time no matter what the status is. Not something I can resolve on code side, for sure. Time to ask server admin to check the problem. – jitendragarg May 16 '16 at 04:35
0

The browser has to ask the server if the file has been modified or not since it put it to the cache, therefore the http statuscode 304. Read more from https://httpstatuses.com/304.

As this is asp.net please make sure you are first running it with 

<compilation debug="false"/>

as enabling debugging has some side effects which include.

"All client-javascript libraries and static images that are deployed via
 WebResources.axd will be continually downloaded by clients on each page
 view request and not cached locally within the browser."

More read from https://blogs.msdn.microsoft.com/prashant_upadhyay/2011/07/14/why-debugfalse-in-asp-net-applications-in-production-environment/

Janne Matikainen
  • 5,061
  • 15
  • 21
  • Debug mode is false, and the files are getting proper status. Check the screenshots. Only thing is, it is taking more time in some cases, than without cache. I guess it is just the server hardware that is causing 50ms of round trip time. – jitendragarg May 16 '16 at 05:39