July 27, 2021

Tips to avoid common mistakes in Writing JavaScript

Tips to avoid common mistakes in Writing JavaScript

Tips to avoid common mistakes in Writing JavaScript

     JavaScript scripts are the ideal way to add special effects and extra bits and bobs to your pages without having to resort to plug-ins or full-on applets. There are a myriad of uses for this most versatile of scripting languages. Basics of JavaScript programming, starting with basic variables and progressing to strings, statements and loops.
How you write your JavaScript code can have a big impact on your app’s performance.

There are few common mistakes on how to architect your app for performance in JavaScript :

Avoid unnecessary DOM interactions:

In the Metro style app using JavaScript platform, the DOM and the JavaScript engine are separate components. Any JavaScript operation that involves communication between these components is relatively expensive when compared to operations that can be carried out purely within the JavaScript runtime. So it’s important to avoid unnecessary interactions between these components. For example, getting or setting properties of DOM elements can be fairly expensive.
Use DOM objects only to store info that directly affects how the DOM lays out or draws elements.

Optimize property access:

In JavaScript there are no classes and objects are simply property bags (or dictionaries). You can add new properties to individual objects on the fly. You can even remove properties from existing objects. This flexibility used to come at a significant price in performance. Because objects can have any number of properties in any order, every property value retrieval required an expensive dictionary lookup. Modern JavaScript engines greatly speed up property access for certain common programming patterns by using an internal inferred type system that assigns a type (or map) to objects of the same property makeup.

Don’t delete properties:

It might seem useful to add temporary properties to objects and delete them later after you don’t need them anymore. But this is a bad practice because it can greatly degrade performance.

Structure objects correctly:

Add properties to object instances, but add methods to the object prototype. Methods added to instances as inner functions of the constructor become closures that capture the activation context of the constructor. Consequently, a new closure object must be allocated for every such method, every time a new object is constructed. This pattern is often used as an encapsulation mechanism to implement private properties and methods,

Use integer arithmetic where possible:

In JavaScript, all numeric values are of type Number, and all arithmetic operations must follow floating point semantics. This distinction doesn’t have much impact if your code doesn’t do much arithmetic. On the other hand, if your code is dominated by arithmetic operations, unexpected floating point math can substantially hamper its performance. Because integer arithmetic is far more common in most programs, modern JavaScript engines do their best to optimize for integer operations.

Avoid floating point value boxing:

The previous section mentioned the problem of floating point value boxing: any time a floating point number is assigned to a property of an object or an element of an array, it must first be boxed (allocated on the heap). If your program performs a lot of floating point math, boxing can be costly. You can’t avoid boxing when working with object properties, but when operating on arrays, you can use typed arrays to avoid boxing.

Move anonymous functions to global scope :

It’s common to use anonymous functions to bind event handlers to DOM events, complete asynchronous work (via promises or other asynchronous completion patterns), or process array items using the Array for each method. When using anonymous functions, it’s good to be aware of the cost associated with closures.

Much like methods defined on object instances (earlier in this document), anonymous functions are closures that capture the activation context of the enclosing function. A new closure object must be allocated every time the enclosing function is called. Consequently, if the enclosing function is called often (as in the next example) and the anonymous function is relatively small, the overhead of allocating a closure object can be significant.

For Java Online Training please visit http://www.revanthtechnologies.com