JavaScript speed optimization

Javascript Speed Optimization

JavaScript Speed Optimization Fundamentals

1. Choose the weight to avoid light, some choice

Generally speaking, the system is all huge, not too perfectionist, first grasp the focus, understand those are our core pages, those pages for us is the most important, those pages access to the highest, core priority.

Catch the main problem and find the bottleneck. Medical treatment, optimization, before the need for careful analysis, grasp the main bottleneck point, the remedy. Optimize so many recipes, do not use all, usually a few can achieve results.

2. Simple and effective is the hard truth

The more simple things are easier to control, the less prone to error, try to avoid the system design is too large, too complex, remember, this is doing products, not in research and development. Many seemingly stupid methods tend to be more effective. New technology, the reference of the method is a certain risk, to evaluate, to be cautious.

JS Processing

1. Try putting it to the end of the page

JS loading when blocking the page, not download finished content will not come out, so try to avoid putting JS to the page head, according to experience estimates, the entire page used in the JS logic, 90% can be placed on the end of the page.

2. Lazy loading (load on Demand)

A lot of business logic is not used every time and is not to be used immediately, the first load process only those necessary, only when the necessary conditions to trigger, to load the request necessary JS. For example, permission validation passes, loading the management module. Click the Post article button to load the validation and processing functions related to the published article.

If you have written C + + will definitely touch the dynamic library and static library, this is similar, when the need to reload, the first time to open the page will certainly be much cleaner, and the business logic is separated, management and maintenance will be more convenient, after all, reduce so many coupling. All the business logic of the normal page needs to be loaded in the first request in less than 50%, and our JS is cut off by half.

3. Combine JS to reduce requests

The efficiency of requesting multiple small files is much less efficient than requesting a large file, because multiple DNS resolution, multiple connections, browser and server side also require multiple open processes, permission validation and preprocessing, and some problems with HTTP requests on packet delivery. So as far as possible to avoid loading a bunch of JS files in the page, you need to first talk about the need for the small JS merged into a large JS file unified output, the page will be stuck for a lot of time.

In order to improve the development efficiency, the merger proposal does not have to be done manually every time, resulting in large maintenance costs, after believing that the thousand XML configuration file, determine the consolidation rules and dependencies, the efficiency of automatic merging with the program is much higher, the end of the article with a configuration example, for reference only.

4. JS compression

This method is unique to the front-end, after all, traffic means speed, meaning money. is to reduce the readability of the code as a prerequisite. But the two sides of things tell us that poor readability also means security, and readability can be resolved by saving the source files before compression.

The so-called compression, is to change the long variable name into a short variable name, remove the useless space and newline characters, thereby saving the length of the JS program, but at present this processing is very mature, through the search can find a lot of related tools. Generally can compress more than 50%, depending on the program and compression tools.

5. Minimize use of third-party libraries

In my impression, a lot of frameworks are very large 20K above, although very powerful and convenient, but if not to do enterprise-class applications, try not to use, because we may only use a few of these features but loaded the entire framework.

However, many of the methods in the framework can be extracted or streamlined into a lightweight framework, such as Trimpath, which can be reduced to 4k.

6. Merging AJAX requests

Ajax requests data, if it involves requesting a variety of data, try to consider merging it.

7. Reasonable use of the cache

Caching depends on the server side, but JS is often used. One is caching in a global variable, and some very complex calculations and find operations can do so. If you are using the template class Trimpath often need to preprocess the template, the result of this preprocessing can be cached. The disadvantage of this cache is that the data is invalidated after the page is refreshed.

Another is cached in the window.name or cookie, often used to cache the results of some Ajax calls, to avoid repeatedly requesting server side, such as some user's authorization information, there is no need to always call the server side interface, cache also reduce the request, improve performance, but the cookie should be cautious Use, save in some data is relatively small, each HTTP request he is occupied uplink bandwidth.

Another kind of cache implementation is the use of flash or other third-party components, characterized by the ability to cache large data, but to adapt to the scene first, requires special platform support, but Flash is now very common.

8. Can be static output, as little as possible with JS rendering output

Page Authoring

1. Material merging

Try to combine the pictures in the page with CSS sprite cutting. This reduces the number of requests. Usually merged into 3 grew up picture, one is a fixed width high (for example, button), the other two are horizontally or vertically tiled 1-pixel small picture, used for background.

2. CSS compression processing

The same reason with JS compression, there are a lot of tools practical available.

3. Picture background cutting and tiling

Transduction is very fastidious, many areas can be cut into 1 like Suping shop, as far as possible with 1 pixels small tiling shop, try to use a larger picture set into the background.

4. Use less IFRAME and frameset

The first point frame will block the page, second, generate additional requests, third, if the interaction involved, increase the development of maintenance costs, the fourth search engine optimization is not good

5. css as far as possible on the page header

Browser only after the completion of the CSS download, will really display the page, so in order to make the page output, put CSS to the head, and the browser to the CSS processing parallel, will not be like JS will block the page.

Server processing

1. Enable gzip compression, can compress about 70%~80%.

2. Js,css, image add expiration header, let the browser can cache. Can reduce requests by more than 1/3.

3. Static pages, JS, CSS and other static files are migrated separately. For static files can be specifically optimized, such as squid reverse proxy, nginx instead of Apache to do static server. Easy to manage and maintain, easy to migrate and expand later.

4. js, CSS, pictures and other static files and the current application is placed under different domain names. No more non-essential cookies are passed, reducing transmission.

5. Image server sub-domain. Browsers only allow 2 concurrent use of the same domain name, and if the page picture is too large, it will block the page because of concurrent queuing. But the domain name also cannot too many, will consume the DNS resolution time, the recommendation 4 is good.

JS Merge configuration file Example

<?xml version= "1.0" encoding= "gb2312"?>

<root>

<include>

<list><! [cdata[qstandbottom_static]]></list>

</include>

<js>

<list><! [cdata[/lib/postjs.obj.js]]></list>

<list><! [cdata[/lib/json.obj.js]]></list>

<list><! [cdata[/qmeditor/qmeditor/qmeditor/editor.js]]></list>

<list><! [cdata[/control/subjectlist/subjectwritelib.js]]></list>

<list><! [cdata[/control/subjectlist/subjectwritevote.obj.js]]></list>

<list><! [cdata[/control/subjectlist/navifilter.obj.js]]></list>

<list><! [cdata[/control/subject/checkdomain.js]]></list>

<list><! [cdata[/control/subjectlist/subjectwritebottomglobal.js]]></list>

<list><! [cdata[/control/subjectlist/subjectwritebottom_asyncdeclare.js]]></list>

<list><! [cdata[/control/subjectlist/subjectwritereditor.js]]></list>

<list><! [cdata[/control/subjectlist/subjectwritebottom.obj.js]]></list>

<list><! [cdata[/control/subjectlist/subjectwritephoto.js]]></list>

</js>

</root>

Common analysis and Debugging tools

IE HttpWatch

Firefox Firebug

JavaScript speed optimization