Web front-end optimization javascript for best practices

Web front-end optimizing JavaScript for best practice, this section has 6 rules, and several repetitions of CSS articles. Front-end optimization best practice, the most important or "practice", to understand this thing is very easy, the key is to "practice", to "execute", to "feedback" to obtain benefits.

1. Script to the bottom of the HTML code page (put Scripts at the Bottom)

When a script is downloading, the browser does nothing else (serial). So, throw it to the last side to handle it. For some functional scripts, there are some dilemmas that can be implemented. However, for domestic sites, there are many use of Google Analytics services to analyze the site data. To this point, it is absolutely feasible to put the proposal to the bottom of the page.

2. Make JavaScript and CSS External

See the description of the CSS article

3. Compact JavaScript and CSS (minify JavaScript and CSS)

See the description of the CSS article

4. Remove duplicate script (remove Duplicate Scripts)

For some historical legacy sites or forum-class sites, this is more common. To take over the maintenance of people before and after the change too much, everyone has their own set. This can lead to some potential trouble.

5. Reducing DOM Access (Minimize DOM access) has three guidance recommendations:

Cache elements that have already been accessed (cache references to accessed elements)

"Offline" update the nodes and add them to the tree (update nodes "offline" and then add them to the trees)

Avoid using JavaScript to output page layouts--it should be a CSS thing (avoid fixing layout with JavaScript)

6. Develop Smart Event handlers

In addition to the English explanation, here is a reminder of the problem with Java Script memory leaks.