Let's write fast Javascript,js performance optimization Tips

JavaScript is now the most popular language, it can do a lot of things-web interface, server side, games, operating systems, robots and so many many. However, to be honest, even if it is so wildly popular, its performance has not reached its limit.  Yes, it's improving, but until it catches up with local apps in every way, you have to use some tricks to optimize its performance when doing a hybird hybrid application. Firefox has the fastest JavaScript parser SpiderMonkey, with a variety of efforts to make JavaScript faster, one of which is asm.js. Asm.js is a subset of JavaScript that is produced by Emscripten, which makes a lot of optimizations for the JavaScript code of the C/s + + Yi, which is hard to see after the compiled code, which is why you can't write your own optimized code, but it runs very fast.  I suggest you read this article and don't pull it off for an example! Well, our goal is to write faster JavaScript code, here are some tips to get your code running faster, and better memory efficiency. Note that I'm not strictly talking about DOM and Web applications, it's about JavaScript, and Dom is just part of it.  Seeing is believing, I'm going to add the Jsperf test case for the first one, using the Firefox38 and Chrome39 tests. No type conversion JavaScript is a dynamic type, but do not use this feature if you want to increase speed. Try to keep the types of variables consistent. This also applies to arrays, although most are optimized by the browser, but try not to mix different types of arrays. This is one of the reasons why C + + code compiled into JavaScript uses static types.

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

Test Case In addition: the conversion of strings to numeric types Let's say you have to convert a string to a number, parseint and parsefloat the best way? Let's take a look.

parsefloat ("+")+ "+"//  integral type parseint ("+", "Ten") "0" | "+" << 0//  for positive numbers only "+" >>> 0

parseint Test ~ parsefloat Test Firefox is optimized for bit operation, with code running about 99% faster than parseint and + operations. Chrome obviously has no preference for bitwise operators, and they are 62% slower than the parseint function. The parsefloat + operator is fast on both browsers (Firefox 28%,chrome 39%). So, if you're writing node/chrome or Firefox apps?  I think the general use of the parseint function is correct. # # Don't re-construct the object reorganization object is not cheap and should avoid it: do not use the delete operatorA delete operation is much slower than assigning a null property. Allocating NULL in two browsers is fast 99%, but it cannot modify the structure of an object, but delete can. Editor: I think this is a bit misleading, which doesn't mean you shouldn't use the delete operator, which has its own usage, which prevents the object from leaking memory. Delete vs null do not add properties later  Try not to add attributes at a later time, preferably from the outset to define the object's schema. This is 100% faster in Firefox and 89% faster in Chrome.   Dynamic Properties vs. pre-defined structure    #3 string linking   string linking is a very expensive operation, but what method should be used? Of course not Array.prototype.join. The  += operators seem to be much faster than the + +, and they are quicker on both browsers than String.prototype.concat and Array.prototype.join. Array.prototype.join is the slowest, in line with market expectations.   String connection test   #4 Correct use of regular expressions   using RegExp.prototype.exec is not necessary, is it?   However, there is a performance difference between RegExp.prototype.test and String.prototype.search, let's take a look at the method of how to:  regular expressions faster   RegExp.prototype.exec is a lot faster than String.prototype.match, but they are not exactly the same thing, their differences beyond the scope of this article, see this question and answer.   regex.prototype.test is faster, possibly because it does not return a matching index. The String.prototype.search should only be used to locate the desired matching index.   However, you should not use regular expressions 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 fast, which is what happens in Firefox, but in Chrome, that's not the case. RegExp.prototype.test is 32% faster in Firefox and 33% faster in Chrome String.prototype.indexOf. In this case, you choose the way you like it.   #5 Limit declaration/Pass Variable Scope (scope)   If you call a function, the browserSome so-called range lookups must be done, and it's expensive depending on how many ranges it's looking for. Try not to follow the spicy global/high range of variables, try to make local range variables, and pass them to the function. Less range lookup, less sacrificing speed.   This test tells us that it is faster to pass and use variables from a local scope than to look for variables from a higher range of claims, both in Chrome and Firefox.   Internal range vs high-range vs global   #6 You don't need all the stuff with jquery  most developers use jquery to do some simple tasks, I mean on some occasions you don't need to use jquery, you think with $. is Val () 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 you can write more efficient code. Complete the same function with pure javascript100% 100% faster, this is the Jsperf benchmark

$ (' input '). KeyUp (function() {  if(this. Value = = = ' blah ') {...}});

Reprinted from: http://ourjs.com/detail/54d9a6f2232227083e00002c

Original address:medium.com

Let's write fast Javascript,js performance optimization Tips