JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Performance

Web performance is the objective measurement and the perceived user experience of load time and runtime.

Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions.

Many features impact performance including latency, application size, the number of DOM nodes, the number of resource requests made, JavaScript performance, CPU load, and more.

Reduce Activity in Loops

Statements or assignments that can be placed outside the loop will make the loop run faster.

In the following example we access the length property of an array each time the loop is iterated:

Run code

In the following example we access the length property outside the loop and makes the loop run faster:

Run code

Efficient DOM Access

Accessing the HTML DOM is very slow, compared to other JavaScript statements.

If you need to access a DOM element several times, access it once, and use it as a local variable.

Place JavaScript at the bottom of the page

Putting your scripts at the bottom of the page body lets the browser load the page first.

While a script is downloading, the browser will not start any other downloads, and all parsing and rendering activity might be blocked.

An alternative is to use defer="true" in the script tag. The defer attribute specifies that the script should be executed after the page has finished parsing, but it only works for external scripts.

Don’t use “With” keyword

The with keyword is considered a black-sheep because it suffers from several flaws that can be very frustrating.

Although it makes the process of working with local properties simpler, with can make looking up variables in other scopes more expensive.

The with keyword is not allowed in strict mode.

Minimize requests for HTTP

Minimize HTTP requests to render pages by combining external files and including JavaScript directly within HTML pages.

Each time a unique HTTP takes a trip to a server, the result is a large number of delays.

Don't use the same script twice

Duplicate scripts will have a significant impact on performance. Duplicate scripts will create unnecessary requests on HTTP, especially in the IE browser.

Don't use eval()

Although the eval() function is a good method to run arbitrary code, each string that is passed to the eval function has to be parsed and executed on-the-fly. This cost has to be paid every time the execution reaches an eval function call.