How to optimize your JavaScript code

Everyone who writes JS knows that there are many ways to write the same effect. The results can be the same but the steps are different. However, although you have written the effect, the performance of the page has been greatly reduced. Now In the development of scripts, improving script performance is becoming more and more important. How to optimize your JavaScript code? How can we draw the shortest straight line between two points? Today I will give you a summary of how to optimally write your own JavaScript code.

Traditional Web pages do not contain many scripts, at least they do not affect the performance of the Web page too much. However, as Web pages become more and more like applications, scripts have an increasing impact on them. As more and more applications are developed using web technologies, improving script performance becomes increasingly important. Desktop applications typically use a compiler to convert source code into the final binary. The compiler can spend time optimizing as much performance as possible when generating the final application. Web applications don't have that luxury. Because they need to run on multiple browsers, platforms, and architectures, they cannot be fully precompiled. The browser will take the script one at a time and interpret and compile it, but the final application should load as quickly and run as smoothly as a desktop application. It is expected to run on a wide variety of devices, from regular desktop computers to mobile phones.

#Browsers are pretty good at achieving this, and Opera has one of the fastest scripting engines in any browser today. However, browsers also have some limitations, which are what web developers need to pay attention to. To ensure that your web application runs as fast as possible, this might be as simple as swapping a loop, changing one merged style instead of three, or adding only scripts that will actually run.

This article will show you some changes that can improve the performance of web applications, covering ECMAScript - the core language of JavaScript, DOM and file loading.

Tips

ECMAScript

Avoid using eval or Function constructor

Rewrite eval

If you need a function, use function

Don’t use with

Don’t use try-catch-finally in functions that require performance

Isolate the use of eval and with

Try not to use global variables

Pay attention to the implicit replacement of objects

Avoid using for-in in functions that require performance

Use cumulative form to connect strings

Basic operation ratio Calling functions is faster

Pass in functions instead of strings for setTimeout() and setInterval()

DOM

Redraw and reflow

will Minimize the number of reflows

Minimum reflow

Modify the document tree

Modify invisible elements

Measure

One change Multiple styles

Smoothness for speed

Avoid retrieving a large number of nodes

Improve speed through XPath

Avoid modifications when traversing the DOM

Use variables to cache DOM values ​​in scripts

Document loading

Avoid maintaining the same reference between multiple documents

Quick history navigation

Use XMLHttpRequest

Dynamicly create