Sunday, September 21, 2014

Increase Performance of Jquery

Follow the below to improve the client side scripting performance

1. Latest version of Jquery core Library

2. ID and element selectors are the fastest, since they are native DOM operations
$('#elementId')

3. Class selectors are slower than Id Selectors
$('.elementClass')

4. Pseudo Selector - powerful but slowest since it will call for all applicable selectors - $(':visible, :hidden');

5. Attribute Selector - slowest - $('[attribute=value]');

6. $parent.find('.child').show() - fastest

7. Use Jquery only in the needed place.
eg:
javascript: this.id;  (short and effective way )
jquery: $(this).attr('id');    (js equalent is this.getAttribute('id'))

8. chaining
$('#elementId').removeClass('white').addClass('red').show();
(chaining is fastest followed by cached separate calls)

9. caching will decrease repeat selections

10. native JS for loop is better than $.each()
Posted by at No comments:
Labels:

Friday, September 19, 2014

Online JS Debuggers


The following links are useful to test your js code with output before integrate in your application.

http://jsfiddle.net/
http://jsbin.com/
http://www.jslint.com/
https://www.debuggex.com/
Posted by at No comments:
Labels:

JQUERY - To avoid skip the JS methods and process seqeuntially

In some cases the js sub function or load content will be skipped due to async behaviour of running script.

The following sample will address those problems. The script  show the alert message. See the first message comes inbetween the ajaxsetup and another is outside the ajaxsetup.

This is helpful to do the work sequentially with out skip.

Step 1:
 call the jquery CDN link or give your local downloaded path of jquery file in the following script tag: Here i used CDN link

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>


Step:2

$( document ).ready(function() { // It run once the page DOM is ready
                  $.ajaxSetup({async: false});
                  userDefinedFunction();
                 $.ajaxSetup({async: true});
                 alert('outside ajaxsetup');
 });

function userDefinedFunction()
{
  alert('inbetween ajaxsetup');
}


Step: 3
call it in HTML page to see the output. Here is the complete code
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script type="text/javascript">

$( document ).ready(function() { // It run once the page Document Object Model (DOM) is ready for JavaScript code to execute

 $.ajaxSetup({async: false});
    userDefinedFunction();
$.ajaxSetup({async: true});

alert('outside ajaxsetup');

 });


function userDefinedFunction()
{
  alert('inbetween ajaxsetup');
}

</script>
</head>
<body>
Sample ajax setup example
</body>
</html>




Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)