JS site performance optimization notes

1. Remove JavaScript and comment

All // or /* */ comments except comments can be safely removed because they have no meaning for the end user.

2. removes the blank area in JavaScript

For example: x = x + 1;   can be briefly written as: x=x+1;  .

3. code optimization

Simple methods such as removing the implied (implied) semicolon, variable declarations or blank carriage returns in some cases can go a step further to reduce the script code. 1 some short expressions can also produce good optimizations, such as:

x=x+1;

It can be written as:

x++;

Be careful, though, or the code could easily go wrong.

4. Rename user-defined variables and functions

For ease of reading, we all know that you should use variables like sumTotal in your script instead of s. However, the sumTotal variable becomes verbose considering the speed of the download. This length is meaningless for the end user, but a burden for browser downloads. This time s becomes a better choice. Write easy to read code first, and then use some tools to handle it for delivery. This treatment here again shows the value. Renaming all names with one or two letters will bring about a significant improvement.

5. overwrites the built-in (built-in) object

Long user variable names cause the JavaScript code to be too long. In addition, built-in (built-in) objects (such as Window, Document, Navigator, and so on) are another reason. Such as:

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

This can be rewritten as the following short code:

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

If these objects are used frequently, the benefit of rewriting is obvious. In fact, these objects are often called. However, I would caution that if the Window or Navigator objects are used only once, this substitution can actually make the code longer. This technique brings up the issue of script execution efficiency after an object is renamed: in addition to the benefits of code length, this rewriting of the name will actually speed up the script execution slightly by 1 point, because the objects will be placed at the front of all the called objects. JavaScript game developers have been using this technique for years, both in terms of faster downloads and execution, and in terms of reducing the memory cost to the local browser.

6. refactoring < script > and < style > Call mode to optimize the number of requests

We often see this markup code in the header of an HTML file:

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

In most cases, the above code should be simplified to:

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

g.js contains all the functions for global use. While splitting the script file into three parts makes sense for maintenance, it doesn't make sense for code transfer. A single script download is much more efficient than three separate requests, and it also simplifies the length of the markup code.

7. merge your javascript file

Reduce the number of Request requests for HTTP as much as possible.

8. Place the script at the bottom of the page

Script 1 is generally used for user interaction. So if the page isn't out yet and the user doesn't even know what the page looks like, then talking about interaction is bullshit. So, the script is the opposite of CSS and should be at the bottom of the page.