Home     RSSRSS

Posts Tagged ‘Javascript’

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: , ,

Jquery Image Thumbnails Mouseover Effects

July 2, 2012 by kiranbadi1991 | Comments Off on Jquery Image Thumbnails Mouseover Effects | Filed in Browser, Development, Environment, Others

Enlarging the Image based on the mouse over/Hover event is something which lot of retail websites use quite often and its one of key VOW  features of the site.Basically the way it works is that there exists a large container which contains all images and one large image is displayed followed by 6 to 7 thumbnail images.Once we mouse over those thumbnail images, they get zoomed to fit in the large image container.

This link will give you the basic implementation which I had done recently.Also we can  can use this code with dynamic images which gets pulled from the file drive.Just replace the a href and image src with your image path and they should work for you.

Please note that there is some light box code in the demo code.For the lack of time, I am not able to fix that part in the hosting server.But if you include the proper path to the light box javascript file in your code, it should work as light box gallery as well.You will need both lightbox.js and lightbox.css for light box gallery to work.

Tags: , , , , ,

Performance Testing Web based Ajax Applications–Then Read this

June 23, 2012 by kiranbadi1991 | 2 Comments | Filed in Browser, Development, LoadRunner, Others, Performance Center, Performance Engineering, Performance Test Tools, Scripting, SilkPerformer, Testing

From past couple of days,lot of people have asked me about Ajax,Ajax protocol and how to Load Test Ajaxified Applications. So I though let me write a short code and try explain my thoughts about this. Ajax is often used in the web site to do quick and short interaction with servers for implementing some of the if then condition to implement some requirement.Ajax helps a lot in bringing some interactivity or I can say it creates VOW experience.Of course I am not the hard core front end engineer ,but yes having written couple  of lines of CSS/HTML/Javascript, I can visualize and make a sense as how to write the front end code which brings some interactivity to the site.

For the sake of this post, I have used Jquery library which has rich methods for making Ajax calls.It also has excellent methods of interacting with CSS and HTML markup elements.With Jquery we can easily write the call back function and write the response data to the DOM on the fly based on some conditions.Few drawbacks Which I noticed using  Jquery library is that it makes you lazy (If you really want to become good front end engineer, then having good gasp of Raw javascript is must) and just for implementing one or 2 functionality , I have to import 10 k lines of code.But again with Jquery benefits outweighs the risks.

Implementation of Ajax with Jquery looks something like below

$(document).ready(function(){
    $(“form”).submit(function(event){  
         event.preventDefault();
        var ae = $(“#idtxt1”).val();
        var ap= $(“#idtxt2”).val();
           alert(ae);
           alert(ap);
        var request = $.ajax({  
            url: “TestAjax.do”,
            type: “POST”,
            data: {
               email:ae,password:ap
            },
            cache: false,
            ifModifiedBoolean:false,
            beforeSend:function(){
              $(“#idspan”).val(“”);  
            },
            success:function (data){
//                $(“#idspan”).append(data);
                if(data == “Success”){ //redirect…
                      window.location = “/mysite/mypage.php”;
                } else { //report failure…
                       $(“#idspan”).append(data);
                }

            },
            error: function(data) {
               $(“span”).append(“data”);
                 
            }
        })            
    });
});

 

The granular level of details of Jquery Ajax function can be found here. So you might be thinking as why I have written this piece of code when it’s already available. This post is not about Jquery or how to use Jquery, this post is about understanding Ajax and how they are implemented and based on that coming up with proper solution for load testing Ajax based web applications.

If you look at the above code closely,you can observe that it does post request on the form submit event.As soon as user clicks on the submit button it does the call to the backend program.This is how browsers operate.Browsers bring interactivity to the site using event driven methods.This understanding is the key to know as how Ajax calls are made, every Ajax call is associated with some user driven event on the HTML Element. Events could be on Click, on Submit, on Hover,onMousein,onMouseOut,Focus in,Focus out,onKeyPressup and onKeyPressdown.These are some of the events which are associated with the HTML Elements and Javascript is used bring some interactivity to the site on occurrence of the these events.So every Ajax call has some event associated with it.Please note that there are many many events associated with each HTML element and complete reference of those can be found ECMA Javascript Guide or Web Standards document.

So continuing further, the above code makes the Ajax post call to TestAjax. do function which resides on the backend server.In above Ajax function call I am collecting value of 2 text fields name #idtxt1 and #idtxt 2 and passing those values as post body request to my backend J2ee program.Most of the Ajax calls irrespective of the library used do these things in the similar way(almost 99.99% of time),they capture the user inputs with Javascript methods and then post the data to the backend program which resides on some application servers.The program which resides on the backend servers communicates to the Ajax call whether the request has passed or succeeded.If the request succeeds , for example in above code if my backend program sends me the data as “success”, I redirect the request to mypage.php and if requests fails, I write some error text to the HTML  page within Span Element.

The browsers developers tools also helps in understanding the way Ajax often works,

      image

If you capture the network trace with Browser’s developer’s tool, the trace would look something like above, in the trace you are clearly see that Initiator of the call was  XMLHttpRequest. This is nothing but the core method which implements Ajax calls in the browsers.Since the above request was of type GET, values were appended to the url of the request and send to the backend program.In addition to this these tools bar also give lot of other information like http status code, which event initiated the request etc.However I will not suggest you to measure the response time of Ajax calls with these tools as I believe they somewhat give incomplete picture of response time.

The response data received from the server can also be viewed via browser developer’s tool and in my case it was looking some thing like below,

image

This response data(“Username not available”) is later appended to the page elements which is viewed the end users.

So coming back to original purpose of this post, I keep hearing from various Performance Engineers that existing Web Http protocol is insufficient in testing Ajax based web applications, now having implemented real time Ajax with fat datasets, I believe there isn’t much challenge to load test Ajax based applications.We just need to keep some key things in mind while working with Ajax based applications,

  • Understand the functionality of your application from technical prospective.
  • Ask developers explicitly, which functionality in the application is using Ajax call, is the Ajax call synchronous or Asynchronous.With Synchronous Calls,one cannot proceed unless he receive the data from the server for his Ajax call and with Asynchronous calls, one can work on the other parts of the page(Technically with Async Calls, browser need not wait for server response to build DOM Tree and with Sync calls, it has to wait for server response).
  • If you believe some events for your applications are not getting recorded via regular HTTP protocol, then probably you are not triggering the Ajax call at all.Remember to trigger Ajax call, you need to Trigger an event on the html element and it could be that you need to tab out of the element or bring focus in that element etc etc.Ask your developer as how to trigger a Ajax call for the business process under scope.
  • If you believe that you are not able to record Ajax call, then probably your Ajax request is cached.Ajax calls are heavily cached by browsers since they contain all JS/CSS files in them.Clear browser cache/cookies etc etc and Try again.Use Developer tools bars to debug such cases,ensure that you get 200 status for all your resources.
  • Ajax calls irrespective of libraries or technology uses regular GET/POST types which is nothing but http calls.Http calls should and must be recorded if tool claims to support HTTP Protocol.
  • If you see some unique values getting generated at the client side and these values are not seen in the server response, don’t get scared or nervous, they might be Unix style timestamp or Microsoft tick timestamp(However If you get Tick, you have solid reason to worry and it could be your pure good luck if your application is not using complete power of Tick.If it heavily uses Tick, then probably you need to go temple and prey God.You will surely require his blessing.Most of the current set of tools don’t go beyond Unix style timestamps and Tick is much more powerful timestamp format than Unix style timestamp).These values are generated by JS library in order to force browser not to cache the key JS files.However lot depends on the headers as well.
  • Thick client web based applications often uses chained JS calls to build different parts of the page, All you need to do in these cases is to ensure that you follow the right steps, trigger the events which chains many events during recording and then do your regular steps.
  • Remember for Load Testing Ajax based application still the goal would be capture the network traffic which goes out of the application to the server and stress the server for those calls.If your Ajax calls are slow, then it gives an impression that front end is taking more time,most often it is never true.Spinning wheel which keeps spinning for minute or seconds indicates server bottleneck and not client side bottlenecks.
  • Remember client side performance measurement metrics/techniques are different than Server side performance measurement/techniques.They require different skillsets and tools.Just having lot of Ajax calls do not necessarily mean that you have client side performance issues.However it does mean that you do lot of DOM Work and always browser needs to keep working or guessing so as to where and how much some space for response data.So repainting and refills of DOM happens quite often.

So finally you must be wondering if Ajax can be done with regular http protocol, then why are companies like HP coming up with new Ajax based protocol etc for Load Testing.

Answer is simple, they want to save some time for scripting and time is money in corporate world.

How much time it saves ?

Again I cannot say as I have never used these protocols myself.But I have some doubt whether they can successfully emulate the calls for all events.There are lot many ways to trigger Ajax calls.If you use Ajax protocol without understanding the fundamentals of Ajax, then I would say probably its incorrect way of doing the Job.There exists a high risk that your text checks will always succeed not matter what as most tools do not have JS Engine or HTML Parser in them, so they have limited ability to read or write to the HTML document.With Ajax most of the time error validation is done without browser refresh based on some conditions.So you have extra cautious here.

If you still believe we cannot test Ajax based application with regular http protocol, then I would like to hear from you about such cases and would appreciate your feedback with some sample test use case.

Technorati Tags: ,,

Tags: , ,