JS website performance optimization notes

1. Remove JavaScript comments

Except for annotations, all other // or/**/Annotations can be safely deleted because they do not make sense to end users.

2.Remove blank areas in JavaScript

For example: x = x + 1; you can briefly write it as: x = x + 1 ;.

3.Code optimization

For a simple method, such as removing the implied semicolon, variable declaration or empty carriage return statements in some cases can further reduce the script code. Some simple expressions also produce good optimization, such:

X = x + 1;

Can be written:

X ++;

But be careful. Otherwise, the code is prone to errors.

4. Rename User-Defined variables and functions

For ease of reading, we all know thatsumTotalInsteads. However, considering the download speed,sumTotalThis variable is lengthy. This length is meaningless for end users, but it is a burden for browsers to download. This timesIt becomes a good choice. First, write the code that is easy to read, and then use some tools for processing for delivery. This processing method once again shows its value. Renaming all names with one or two letters will significantly improve.

5.Rewrite a built-in (built-in) object

Long USER variable names can cause JavaScript code to be too long. in addition, built-in (built-in) objects (such as Windows, Document, Navigator, and so on) are also one of the reasons. For example:

Alert (window. navigator. appName );
Alert (window. navigator. appVersion );
Alert (window. navigator. userAgent );

You can rewrite the Code as follows:

W = window; n = w. navigator; a = alert;
A (n. appName );
A (n. appVersion );
A (n. userAgent );

If these objects are frequently used, the benefits of rewriting are self-evident. In fact, these objects are often called. However, I would like to remind you that if the Window or Navigator object is used only once, this replacement will make the code longer. This technique brings about the efficiency of script execution after object renaming: In addition to the benefits of code length, this renaming will actually slightly increase the speed of script execution, because these objects will be placed in the top positions of all called objects. JavaScript game developers have been using this technique for many years, and the download and execution speed will be improved, and the memory cost for local browsers will be reduced.

6.Refactor the <script> and <style> call methods to optimize the number of requests

We often see the following code in an HTML file header:

<Script src = "/scripts/rolovers. js"> </script>
<Script src = "/scripts/validation. js"> </script>
<Script src = "/scripts/tracking. js"> </script>

In most cases, the above Code should be simplified:

<Script src = "/0/g. js"> </script>

Among them, g. js contains all functions for global use. Although it makes sense to divide the script file into three parts for maintenance, it does not make sense for code transmission. The download of a single script is much more efficient than the three separated requests, which also simplifies the length of the markup code.

7.Merge your javascript files

Minimize the number of HTTP Request requests.

8. Place the script at the bottom of the webpage.

Scripts are generally used for user interaction. Therefore, if the page is not displayed and the user does not even know what the page looks like, talking about interaction is nothing more than a conversation. Therefore, the script and CSS are the opposite. The script should be placed at the bottom of the page.