Tips for JavaScript Performance Optimization

AvaScript is now the most popular language. It can do many things-website interfaces, server terminals, games, operating systems, robots, and many more. But to be honest, even if JavaScript is so crazy, it is already the most popular language. It can do a lot of things-website interfaces, servers, games, operating systems, robots, and so on.

But to be honest, even if it is so crazy, its performance has not reached its limit. Yes, it is improving, but before it catch up with local applications in various aspects, you have to use some tricks to optimize its performance when creating a HYBIRD hybrid application.

Firefox has the fastest JavaScript parser SpiderMonkey,

There are various ways to make JavaScript faster, one of which is asm. js. asm. javaScript is a subset of JavaScript generated by Emscripten. It optimizes the JavaScript code compiled by C/C ++ and the compiled code is ugly, this is why you cannot write the optimized code yourself, but it runs very fast. I suggest you read this article

Let's take an example!

Well, our goal is to write JavaScript code faster. Here are some tips to make your code run faster, as well as better memory efficiency. Please note that I am not strictly discussing DOM and Web applications, it is about JavaScript, DOM is only a part.

As you can see, I want to add a jsperf test case for the first one, using Firefox38 and Chrome39 tests.

#1 do not convert data types

JavaScript is a dynamic type, but do not use this function if you want to increase the speed. Make sure that the types of the variables are consistent. This applies to arrays. Although the optimization is mainly performed by browsers, try not to mix arrays of different types. This is one of the reasons why the C/C ++ code compiled into JavaScript uses static types.

{  var x = '2';  var y = 5;  x = 2;  x + y;}

Test Cases

In addition, the string and number types are converted to each other.

For example, you must convert a string to a number. Is parseInt and parseFloat the best way? Let's take a look.

ParseFloat ("100") + "100" // integer parseInt ("100", 10) "100" | 0 "100"> 0 "100" <0 // applicable only to positive numbers "100"> 0

ParseInt test ~ ParseFloat Test

The bitwise operation of Firefox is optimized, and the running code is about 99% faster than parseInt and +. Chrome obviously has no preference for bitwise operators. They are 62% slower than parseInt functions.

ParseFloat ratio + operator is faster in both browsers (Firefox 28%, Chrome 39%.

So if you are writing Node/Chrome or Firefox applications? In my opinion, it is correct to use the parseInt function.

#2 do not re-construct the object

Reorganizing objects is not cheap. Avoid it:

Do not use the delete Operator

The delete operation is much slower than assigning a null attribute. The allocation of null is faster than 99% in two browsers, but it cannot modify the structure of the object, but can be deleted.

Edit: I think this is a bit misleading. This does not mean that you should not use the delete operator. The delete operator has its own usage and can prevent memory leakage of objects.

Delete vs null

Do not add attributes later

Try not to add attributes later. It is best to define the object architecture from the very beginning. This is 100% faster in Firefox and 89% faster in Chrome.

Dynamic attributes VS pre-defined structure

#3 String concatenation

String concatenation is a very expensive operation, but what method should I use? Of course it is not Array. prototype. join.

The + = Operator seems to be much faster than the + operator. String. prototype. concat and Array. prototype. join are both faster in both browsers. Array. prototype. join is the slowest and meets market expectations.

String connection test

#4 use regular expressions correctly

Regexp.prototype.exe c is unnecessary, isn't it?

However, there are performance differences between RegExp. prototype. test and String. prototype. search. Let's see which method is faster:

Regular Expression Method

RegExp.prototype.exe c is much faster than String. prototype. match, but they are not exactly the same. Their differences are beyond the scope of this article. Read this question and answer.

RegEx. prototype. test is faster, probably because it does not return matching indexes. String. prototype. search should only be used to find the desired matching index.

However, you should not use a regular expression to find the location of another String. You can use the String. prototype. indexOf method.

String. prototype. search VS String. prototype. indexOf

Another interesting benchmark is String. prototype. indexOf VS RegExp. prototype. test, I personally expect the latter to be faster. This is happening in Firefox, but not in Chrome. RegExp. prototype. test is 32% faster in Firefox, while String. prototype. indexOf is 33% faster in Chrome. In this case, select your preferred method.

#5 restrict the scope (scope) of declaration/transfer Variables)

If you call a function, the browser must do some so-called range lookup. The expensive level of the function depends on the range to be searched. Do not use global/high-range variables as far as possible, and pass them to functions. Smaller range search and less sacrifice speed.

This test tells us that transferring and using variables from a local range is faster than searching for variables from a higher declared range, either Chrome or Firefox.

Internal VS high VS global

#6 you don't need to use jQuery for everything

Most developers use jQuery for some simple tasks. I mean in some cases, you do not need to use jQuery. Do you think $. val () is always necessary? Take this example:

$('input').keyup(function() {    if($(this).val() === 'blah') { ... }});

This is one of the most important reasons to learn how to use JavaScript to modify the DOM, so that you can write more efficient code.

Using pure JavaScript100 % to complete the same function 100% is faster, which is a JSPerf Benchmark Test

$('input').keyup(function() {  if(this.value === 'blah') { ... }});