JS website performance optimization notes

Source: Internet
Author: User
Tags website performance

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.

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.