Home     RSSRSS

Archives: Browser

Javascript URL’s and Caching

January 1, 2013 by kiranbadi1991 | 2 Comments | Filed in Browser, Development, LoadRunner, Performance Engineering, SilkPerformer

In this post, I wanted to share some tips and also clear some misunderstanding which I have seen in lot many performance Engineer’s with regard to JavaScript URL’s which we often see during the Load testing of the Rich Client or web based Application which heavily uses JavaScript for rendering and manipulating the User interface.

I am sure lot many of us has seen url’s like below during their load testing efforts,

/mysite/js/myjsfile.js?1357011161255

The above url contains the unix style timestamp appended towards the end.There are quite a few reasons as why we append the timestamp the JavaScript,foremost reason being that we do not want to cache the JavaScript.Since these scripts are often interacting with DOM and building DOM Elements on fly based on the user interaction, it is a good thing in certain situations that we do not cache these type of javascripts.If browser caches these scripts, there exists some risks that we might see some browsers quirks happening at the UI.

Secondly, most of the JavaScript libraries which provides and implement XMLHTTP Requests implicitly uses these timestamp features.I know DOJO Library and Jquery extensively uses these timestamps while making Ajax calls so as to prevent the caching on the user’s browser.

One can easily implement these timestamps in their load testing scripts.I know both SilkPerformer and LoadRunner has built in Functions which supports creating and replacing the unix style timestamps.I suggest where ever you see these types of URL, just use those functions ,rather than commenting out those URL’s.If you are commenting out those URL’s, I feel you are building the scripts incorrectly and downloading at least 15% less bytes when compare to size of the entire page.

Also when you comment out these types of URL’s, you are doing less calls and thereby reducing the load on the servers.We need keep in mind that users never comment out anything and for these types of URL’s whenever they are present,browser will always be forced to make the call to fetch these JavaScript URL’s.There might be some performance impact on the application but again its choice between providing functionality and achieving performance.

However if you are developing Rich Client Web based application, then I suggest you to append your JavaScript files with timestamp in at least your development environment.It saves lot of time in debugging various client side issues and relieves you from clearing your cache every time you compile and build your code base.We need to keep in mind that browsers almost always caches JavaScript and css files and updated files are not available to application unless we clear all browser history and close and reopen all browser windows.Quite a painful process specially when we are implementing multi page functionality.

Tags: , ,

Dealing with Browser’s back Button with Headers and Javascript History Object

August 28, 2012 by kiranbadi1991 | Comments Off on Dealing with Browser’s back Button with Headers and Javascript History Object | Filed in Browser, Development, Environment, Others, Testing

Quite often while coding application which has lot of forms in it, there comes a requirement where in developers needs to deal with back button functionality of the browser.Disabling the back button with Javascript is one of the options used by many sites to deal with duplicate submission of forms.

Browsers maintain information about pages visited in the browser’s history and Javascript can be used to manipulate the history using windows.history object.

Some of the methods which we can use to know more about history are.

window.history.back();
This works exactly as back button of the browser.Goes 1 page back.
window.history.forward();
This works as exactly as forward button of the browser.Goes 1 page forward.
The number of pages in the history stack of the browser can be determined reading its length property,
window.history.length
We can go back and forth in the history  identified by using current position of the page,
 
window.history.go(-1);
window.history.go(1);
go function is used to load relevant pages from the history. go(-1) loads the 1 page backwards from the current page and go(1) moves the browser 1 page ahead from the current page.
 
HTML 5 History object also provides good way to deal with History management of the browsers, some of the functions in HTML 5 are as below,(Reference: Opera Dev Library)
  • window.history.length: Returns the number of entries in the joint session history.
  • window.history.state: Returns the current state object.
  • window.history.go(n): Goes backwards or forwards by the specified number of steps in the joint session history. If the value you specify is zero, it will reload the current page. If it would cause the target position to be outside the available range of the session history, then nothing happens.
  • window.history.back(): Goes backwards by one step in the joint session history. If there is no previous page to go to, it does nothing.
  • window.history.forward(): Goes forwards by one step in the joint session history. If there is no next page to go to, it does nothing.
  • window.history.pushState(data, title [, url]): Pushes the data specified in the arguments onto the session history, with the given title and URL (the URL is optional).
  • window.history.replaceState(data, title [, url]): Updates the current entry in the session history, with the given data, title and URL (the URL is optional)

History object of HTML5 gives us the tool to push/replace the url in the browser’s history and its this feature which I believe is somewhat in secure in nature.Maybe we can have some warning message whenever some scripts wants to read or write the history of the user’s browser exactly the way geolocation api’s work.

Anyways coming back to our topic, we can also use the javascript to control the behavior of the back button,one of the ways quite often used is

function disablebackbutton()
    {window.history.forward()}
disablebackbutton();
window.onload=disablebackbutton;
window.onpageshow=function(evt){if(evt.persisted)disablebackbutton()}
window.onunload=function(){void(0)}
This is most ugly way of dealing back button problem.Just disable it on onload and onpageshow events.

Another clean way of dealing with back button issue is tell browsers not the cache or store any information of the page in its history and this can achieved by setting appropriate headers.With Servlets and JSP , this can done  by

    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Expires", "0");
    response.setDateHeader("Expires", -1);

These headers can be added to any page which requires that it should not be cached or reused in any way.I did go via header’s approach did resolve the back button issue.Now whenever I use back button I get Page expired message and for some pages form values are not pulled out from cache.

I would suggest going via header’s approach as this can be done at server side and has very limited or low dependency of the clients and most browsers honors those headers.

Technorati Tags: ,,,
 
 
 
 
 

Tags: , , ,

Maps– Show Location via Google Maps and Yahoo Maps

July 6, 2012 by kiranbadi1991 | 1 Comment | Filed in Browser, Development, Others

In case if you are ever in need of showing location in Google maps or Yahoo Maps based on some address, try this demo. In this demo, I have given around 5 input fields and then generating the query string on fly and then sending it to Google and Yahoo Maps servers for locational Address display.Technically this process is called as geocoding.

However please note that accuracy of addresses depends on accuracy of data given in the field and data accuracy at Google and Yahoo Maps.Basic thumb rule over here is that we give as correct information as much as possible and then test it.If it displays our home address incorrectly, then we can say  that reliability of these maps is somewhat is limited.

As usual you can use the code by doing view source of the demo page, it uses the query string parameter to pass the user input and query string is build using jquery library.

Tags: , ,