JavaScript Performance

Web performance is an objective measurement indicator, as well as the perceived and experienced load time and runtime of the user.

Web performance is the time required for website loading, interaction, and response, as well as the smoothness of content during user interaction.

Many features can affect performance, including latency, application size, number of DOM nodes, number of resource requests issued, JavaScript performance, CPU load, and more.

How to improve web performance?

Reduce loop activity

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

In the following example, we access the array's length property in each iteration:

for (let i = 0; i < arr.length;++) {

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

let size = arr.length;
for (let i = 0; i < size;++) {

Improve DOM access efficiency

Compared to other JavaScript statements, accessing HTML DOM is very slow.

If you need to access DOM elements multiple times, access them once and use them as a local variable.

Place JavaScript at the bottom of the page

Place the script at the bottom of the page content so that the browser can load the page first.

When downloading scripts, the browser will not start any other downloads, and all parsing and rendering activities may be blocked.

An alternative method is to usedefer="true". TheDeferThe script should execute after the page attributes have been specified as completed parsing, but it only applies to external scripts.

Do not use the 'with' keyword

The with keyword is considered to be 'useless' because it has some very frustrating defects.

Although with simplifies the process of handling local properties, using with increases the overhead of looking up variables in other scopes.

Keywords are not allowed in strict mode.

Minimum HTTP requests

Minimize HTTP requests to render the page by combining external files and including JavaScript directly in the HTML page.

Each unique HTTP access to the server will cause a lot of delay.

Do not use the same script twice

Repeated scripts can have a significant impact on performance. Repeated scripts will create unnecessary requests over HTTP, especially in IE browsers.

Do not use eval()

Although theeval()Functions are a good way to run arbitrary code, but each string passed to the eval function must be parsed and executed immediately. There is an overhead each time the execution reaches an eval function call.