Another small optimizations in JavaScript

Fri Nov 11 2016 20:01:48 GMT+0100 (Central European Standard Time), Peter Širka

Another micro optimizations in JavaScript

In this blog post we look into the micro optimizations of JavaScript code. These optimizations can improve performance in some specific cases.

Sorting of arrays

In some cases it's better to sort an array of strings only by first 3 characters. I use the optimization bellow in Total.js framework:

// We will sort first 3 chars only
var maxlength = 3;

array.sort(function(valueA, valueB) {
    return valueA.substring(0, maxlength).removeDiacritics().localeCompare(valueB.substring(0, maxlength).removeDiacritics());
});

Sorting of UTF8 characters is much faster by using the above method because we can't sort UTF8 chars (e.g. Slovak characters ľščťžýáíé) in JavaScript easily and a better solution is to remove diacritics from the string and sort it afterwards (of course, sorting can be strict, but wherever possible using this will improve performance). Total.js framework implements quicksort algorithm which is faster than built-in Array.sort() - I haven't had any problems with it so far.

Null and Undefined

I often use bellow if statement:
if (value !== undefined && value !== null)

var str = '';
var num = 0;
var obj_null = null;
var obj_undefined;

console.log(str == null); // false
console.log(num == null); // false
console.log(obj_null == null); // true
console.log(obj_undefined == null); // true

it can be replaced with simpler version:
if (value != null)

Regullar expressions

If you only use string.match() for verification whether the string contains some value or not then it's better to use regexp.test(string) than string.match() from performance point of view:

var str = 'aldkjaldj 9034390';

var regexp = /[0-9]+/;
if (regexp.test(str))
   console.log('OK');

// instead of
if (str.match(regexp))
   console.log('OK');

Be careful when you use regexp.test() and global modificator /g:

var reg = /\w+/g;

console.log(reg.test('aaa bbb')); // true
console.log(reg.test('aaa bbb')); // true
console.log(reg.test('aaa bbb')); // false
console.log(reg.test('aaa bbb')); // true
var reg = /\w+/;

console.log(reg.test('aaa bbb')); // true
console.log(reg.test('aaa bbb')); // true
console.log(reg.test('aaa bbb')); // true
console.log(reg.test('aaa bbb')); // true

Unfortunately it happened to me and it was very difficult to find the bug, that's why i mentioned it. So be careful about it. I have one tip for Regular Expressions, cache them and you will increase a performance:

var str = '  aaa  ';

// BAD
for (var i = 0; i < 100000; i++) {
    var a = str.match(/[a-z0-9]+/);
}

// GOOD
var reg = /[a-z0-9]+/;
for (var i = 0; i < 100000; i++) {
    var a = str.match(reg);
}

Order in comparisons

The order in comparisons is important and can increase performance of your applications, example:

var obj = {};

obj.age = 30;
obj.date = new Date();

// BAD
if (obj.date < new Date() && obj.age > 30) {
}

// GOOD
if (obj.age > 30 && obj.date < new Date()) {
}

My recommendation for comparisons:
If it's possible start with simple data types boolean, interger, string in your conditions then proceed with easiest comparisons to the most cpu intensive comparisons.


Tags

Follow us

Latest blogs
Flow v6 is here!
Thu Mar 07 2019 11:53:54 GMT+0100 (Central European Standard Time)
A critical security fix
Wed Feb 13 2019 22:15:39 GMT+0100 (Central European Standard Time)
New release: Total.js v3.2
Wed Feb 13 2019 22:14:39 GMT+0100 (Central European Standard Time)
Total.js Wiki v2
Fri Jan 04 2019 22:15:01 GMT+0100 (Central European Standard Time)
Total Year 2018
Thu Jan 03 2019 21:14:00 GMT+0100 (Central European Standard Time)

Latest comments
Nice tip
Mauro Junior
Thu Sep 20 2018 21:41:02 GMT+0200 (Central European Summer Time)
Not only for Total.js. You can communicate with different websocket servers.
Peter Širka
Mon Apr 23 2018 20:08:20 GMT+0200 (Central European Summer Time)
Marko: you need to create a buffer with this codepage and write byte-to-byte string. I recommend ...
Peter Širka
Mon Apr 23 2018 20:06:21 GMT+0200 (Central European Summer Time)
Is WEBSOCKETCLIENT only for internal ws connections between totaljs apps?
Stelios Stephanua
Fri Mar 16 2018 06:04:22 GMT+0100 (Central European Standard Time)
Total.js is amazing! ;)
Leonardo Hessel
Tue Dec 19 2017 19:51:15 GMT+0100 (Central European Standard Time)

Pixabay


Read more

Flow v6 is here!

News: We have released a new version of Flow. This version brings great new features and UI improvements.

Thu Mar 07 2019 11:53:54 GMT+0100 (Central European Standard Time)
A critical security fix

News: We were notified about the critical security bug in Total.js framework. Read a prevention.

Wed Feb 13 2019 22:15:39 GMT+0100 (Central European Standard Time)
New release: Total.js v3.2

News: This new release brings a critical security fix and small new improvements. Update Total.js now.

Wed Feb 13 2019 22:14:39 GMT+0100 (Central European Standard Time)
Total.js Wiki v2

Products: I have released a new version of Total.js Wiki. New version brings new improvements.

Fri Jan 04 2019 22:15:01 GMT+0100 (Central European Standard Time)
Total Year 2018

Business: Last year was perfect for Total.js platform. Total.js platform grows up and it has great results.

Thu Jan 03 2019 21:14:00 GMT+0100 (Central European Standard Time)
Total.js Code Editor v1

Products: Try our real-time collaboration tool for Total Developers. Code Editor offers great features for development.

Fri Dec 07 2018 22:55:13 GMT+0100 (Central European Standard Time)