Javascript | @Cybrilla

Javascript jQuery Organisation ProgrammingTips

jQuery Best Practices- Performance

August 18, 2016 Published by: Abhishek Verma

Despite being one of the most popular JavaScript libraries today jQuery has its shortcomings too.

If used carelessly, it can lead to performance issues. This post will list some of the best practices in using jQuery that will help us avoid them.

Limit DOM Interaction
There is a cost when manipulating the DOM tree using jquery. So try to limit interaction with the DOM. Lets take a look at the below code:

var fruits = ["mango", "banana", "guava", "strawberries", "watermelon", "apple", "grapes",
              "oranges"],
var list = $("ul.fruitsList");
$.each(fruits, function(index, value) {
  list.append("<li id=" + index + ">" + value + "</li>");
});

var fruits = ["mango", "banana", "guava", "strawberries", "watermelon", "apple", "grapes",

"oranges"],

var list = $("ul.fruitsList");

$.each(fruits, function(index, value) {

list.append("<li id=" + index + ">" + value + "</li>");

});

Well, no points for guessing whats wrong here. This piece of code works just fine, since the fruits array is of 8 items only. But suppose we had a list of 1000 items, it would really mess up the speed of the website because we are repeatedly appending elements to the DOM, inside a loop.
Instead of doing this, we can build up a html first and then append it to the DOM.

// Dynamically building an unordered list from an array
var fruits = ["mango", "banana", "guava", "strawberries", "watermelon", "apple", "grapes",
              "oranges"],
var list = $("ul.fruitsList");
var futureItems = "";
$.each(fruits, function(index, value) {
  futureItems += "<li id=" + index + ">" + value + "</li>";
});
list.append(futureItems);

// Dynamically building an unordered list from an array

var fruits = ["mango", "banana", "guava", "strawberries", "watermelon", "apple", "grapes",

"oranges"],

var list = $("ul.fruitsList");

var futureItems = "";

$.each(fruits, function(index, value) {

futureItems += "<li id=" + index + ">" + value + "</li>";

});

list.append(futureItems);

Handling Events on Selectors
Though jQuery can select elements very quickly, it is not necessary to search for the same elements many times.

// Selecting the same element multiple times here.
$('.lump-sum-dist').keyup(this.calculateLumpSumSplit).bind(this);
$('.lump-sum-dist').change(this.validateLumpsumAmount);
$('.lump-sum-dist').keyup(this.calculateLumpSumTotal);
$('.lump-sum-dist').keypress(window.cred.util.isNumber);

// Selecting the same element multiple times here.

$('.lump-sum-dist').keyup(this.calculateLumpSumSplit).bind(this);

$('.lump-sum-dist').change(this.validateLumpsumAmount);

$('.lump-sum-dist').keyup(this.calculateLumpSumTotal);

$('.lump-sum-dist').keypress(window.cred.util.isNumber);

// better way
var contextElem = $('.lump-sum-dist');
contextElem.keyup(this.calculateLumpSumSplit).bind(this);
contextElem.change(this.validateLumpsumAmount);
contextElem.keyup(this.calculateLumpSumTotal);
contextElem.keypress(window.cred.util.isNumber);

// better way

var contextElem = $('.lump-sum-dist');

contextElem.keyup(this.calculateLumpSumSplit).bind(this);

contextElem.change(this.validateLumpsumAmount);

contextElem.keyup(this.calculateLumpSumTotal);

contextElem.keypress(window.cred.util.isNumber);

Optimize Selectors
With the first approach, jQuery queries the DOM using document.querySelectorAll(). With the second, jQuery uses document.getElementById(), which is faster, although the speed improvement may be diminished by the subsequent call to .find().

JavaScript

// Fast: $( "#container div.hello" ); // Super-fast: $( "#container" ).find( "div.hello" );

1
2
3
4

// Fast:
$( "#container div.hello" );
// Super-fast:
$( "#container" ).find( "div.hello" );

Specificity:
Be specific on the right-hand side of your selector, and less specific on the left.

JavaScript

// Unoptimized: $( "div.data .hello" ); // Optimized: $( ".data td.hello" );

1
2
3
4

// Unoptimized:
$( "div.data .hello" );
// Optimized:
$( ".data td.hello" );
Detach Elements to Work with Them
The DOM is slow; you want to avoid manipulating it as much as possible. jQuery introduced detach() in version 1.4 to help address this issue, allowing you to remove an element from the DOM while you work with it.

detach and reattach elements
JavaScript

var table = $( "#myTable" ); var parent = table.parent(); table.detach(); // ... add lots and lots of rows to table parent.append( table );

1
2
3
4
5

var table = $( "#myTable" );
var parent = table.parent();
table.detach();
// ... add lots and lots of rows to table
parent.append( table );

Use Stylesheets for Changing CSS
If you’re changing the CSS of more than 20 elements using .css(), consider adding a style tag to the page instead for a nearly 60% increase in speed.

// Fine for up to 20 elements, slow after that:
$( "a.login" ).css( "color", "#0769ad" );
// Much faster (though, best would be, if we write the css in a separate css file):
$( "<style type=\"text/css\">a.login { color: #0769ad }</style>")
    .appendTo( "head" );

// Fine for up to 20 elements, slow after that:

$( "a.login" ).css( "color", "#0769ad" );

// Much faster (though, best would be, if we write the css in a separate css file):

$( "<style type=\"text/css\">a.login { color: #0769ad }</style>")

.appendTo( "head" );

Avoid $( window ).load()
The $( document ).ready() is fired when a page’s own DOM is loaded, but not external assets like images and stylesheets while $( window ).load() is fired when everything a page is made up of, including its own content and its sub-resources are loaded.

So, if you’re writing a script that relies on a page’s sub-resources, like changing the background color of a div that’s styled by an external stylesheet, only then use $( window ).load() else it’s better to stick to $( document ).ready().

Javascript ProgrammingTips

Execute a function within a Directive from outside in AngularJS

January 6, 2016 Published by: Mahesh M

We were working on two problem statements at different points in time of a project and we interestingly found similar solution for both.

Problem A: We have a form, one of the input fields (defined as a directive) has a clear button. This clears the text in the input field, the data in the ng-model as well as the data held in the variable that gets submitted finally via the form. Now, we have a universal clear button that also needs to clear all the 3 data points.

Problem B: We have a section that has been defined as a directive which can be expanded/collapsed using a toggle button. The expand/collapse is handled by the directive. The initial state of the directive, whether it should be expanded or collapsed, is actually dependent on a value obtained from an API call.

In both cases the common thing that one can notice is that there is an external trigger that needs to be passed on into the directive. In Angular 1.4 there is no direct way to do this. Directives do support two way binding, and passing initial values. But neither would solve the exact requirement in both problems.

The solution that we came up with was passing a control object to the directive. The controller defined a control object, a key of which will be pointing to a function. This object was passed on to the directive, and directive initialised the control object’s key (control object which is two-way bound) with a function that gives access to the variables/functions inside the directive. Being two-way bound, this function is now available in the controller. This can be passed on to anywhere (factory, as it was in case of solution for problem B) or used locally.

Sample code:

$scope.control-object = MyFactory.control-object;

1	$scope.control-object = MyFactory.control-object;

<mydirective control="control-object">

1	<mydirective control="control-object">

app.directive("mydirective", function () {
    return {
        restrict: 'E',
        scope: {
            controlObject: '='
        },
        controller:function($scope){
            //Initialise control object with init function
            $scope.controlObject.initFun = function(initValue) {
                    $scope.initValue = initValue;
            };
        }
     }
});

app.directive("mydirective", function () {

return {

restrict: 'E',

scope: {

controlObject: '='

controller:function($scope){

//Initialise control object with init function

$scope.controlObject.initFun = function(initValue) {

$scope.initValue = initValue;

};

}

});

app.factory('MyFactory', function () {

    function MyFactory() {
        var self = this;

        self.control-object = {initFun: null};
       
        //Promise called in context of the directive
        SomeHttpService.get(url,params).then(function(response){
             self.control-object.initFun(response.data);
        });
   }

    return new MyFactory();
});

app.factory('MyFactory', function () {

function MyFactory() {

var self = this;

self.control-object = {initFun: null};

//Promise called in context of the directive

SomeHttpService.get(url,params).then(function(response){

self.control-object.initFun(response.data);

});

}

return new MyFactory();

});

Javascript jQuery jQuery Plugin

Disable sorting of a column when using Datatables

September 29, 2015 Published by: Mohnish Jadwani

Hello,

For a while now, along with other team members I’ve been working on building a payroll software for one of our clients. This is a multitenant application and each tenant can use this software to process the salaries of their employees in addition to certain other functionalities that use employee information.

One such functionality of the application has got to do with the generation of reports and as an application end user(this could probably be a company HR person for example) one might want to generate a report containing certain data of only a selected list of employees. The next question could be, how could one easily filter or sort a table list full of employees to get only a selected list of employees that match certain critera? Turns out there is a jQuery plug-in called [Datatables](http://www.datatables.net/) which converts an HTML table into one which provides a sorting functionality along with an additional set of functionalities like searching and pagination, all, out of the box.

Since there is a need to select only a particular number of employees(based on what was discussed above) for a report that needs to be generated, we’d be selecting the employees using a checkbox that comes as part of each employee record as shown in the screenshot below. The only problem is that datables by default provides sorting for all columns and we didn’t want this to be there for the checkbox column as this is meaningless and could easily confuse an end user.

Datatables with a sorting option on the first column

It took me a while for me to figure out how to disable the sorting on a specific column when using data tables hence I thought I’d share some code on this could be accomplished. The below configuration settings that are passed to datatables, disable the up and down arrow options as shown in the screenshot below for the first column from when the employee data is first loaded on a page. This code was last tested using Datatables 1.10.8 .

order: [],
columnDefs: [ { orderable: false, targets: [0]}]

1 2	order: [], columnDefs: [ { orderable: false, targets: [0]}]

Datatables without a sorting option on the first column

Below is how one could pass these options to a datatable. Here example represents the table id that one would specify as part of the HTML table tag.

$('#example').dataTable( {
order: [],
columnDefs: [ { orderable: false, targets: [0] } ]
});

$('#example').dataTable( {

order: [],

columnDefs: [ { orderable: false, targets: [0] } ]

});

Here targets[0] represents the first column of the datatable.

Credits

1. Thanks to this discussion within the Datatables forum for some initial leads into the issue.

@Cybrilla

Ordinary people, Extraordinary dreams

Category Archives: Javascript

jQuery Best Practices- Performance

Execute a function within a Directive from outside in AngularJS

Disable sorting of a column when using Datatables