JS Code optimization skills of the popular version (reduce JS volume) _javascript Skills

Fine read this article, enough for you to optimize a half-day, about the JS optimization methods are mostly out of these three methods.

(Total page size is 155.k, and JS takes up 100.3K)

It's time to optimize the next JS.

About JS optimization of the article has a lot of, mostly technical very strong, like what variables, strings, types, do not introduce, do not need to introduce, I do not understand, you know also useless. Most of the webmaster are "copycat", I just need to tell JS how to put, delete there can be.

Now the site has a statistical code, sharing tools, comments list, related articles plug-ins and other tools, but to achieve a powerful function, you must use JS files, it is these JS plug-ins, and then enhance the function of the site, but also to affect the speed of the site.

The most commonly used JS optimization method

Call JS through the blog to see, the most impact on the speed of the search for the plug-in (952MS), take the Blessing of advertising (434ms). If you really want to use can be retained, appropriate according to the official textbook to do the optimization, the following Lou introduces several of the most commonly used JS optimization methods.

Method One: Put the unimportant JS at the bottom of the page

This is the simplest, but also the best optimization method, the less important JS all put to the bottom of the page on the top of the body, the implementation of asynchronous loading, that is, such as pages are loaded, and finally loaded these unimportant JS, so that does not affect the speed of the Web page.

such as low-key and gorgeous template public util.js public files, the default effect is, browsing the Web page will appear in the page "back to the top, write comments" special effects. Now the Wumii (no find plug-in JS) and jiathis (sharing tool JS) Unified integration into the Util.js file.

(not important JS are placed at the bottom of the page)

Of course, other sites also need to do this: the unimportant JS all put to the bottom of the page.

Method Two: Merge JS file

Merge JS, that is, reduce the HTTP request, less to the server request to speed up a little bit faster, and merge two original independent JS will need some technology, but this is difficult not to pour us, tell you one of the easiest way:

No matter 3,721, first a file directly pasted into the B file, merged to delete the page a file, if the Web page is running normally, OK; if some special effects fail, then restore, change C file merge. There will always be two of non-conflict JS files.

For example, I blog on the Baidu ad steward, there are 6 ad bit, the default is to make 6 HTTP requests, because it is a third party JS, one request to spend the most 234ms, and 6 requests will take 2 seconds, that is, because the ad butler to open the page will be an additional 2 seconds.

(The second JS is the 6 request into 1)

According to the official tutorial of JS merged, 6 advertising requests merged into 1 requests, significantly reduce the number of JS requests, effectively reduce page rendering blocked situation, improve the speed of advertising loading.

Method Three: To the JS file to lose weight

I do not discuss what the three-mesh operator, reduce object lookup, how to let JS concise, I use the "JS Weight loss tool." Typically, this type of tool compresses hundreds of lines of code in a JS file into one line, making the volume smaller. Recommended tool: http://javascriptcompressor.com/or software version (good fault-tolerant effect)

Because of the empty line, and so on, sometimes use this kind of tool will make JS function failure, and the simplest way is to use Dreamweaver, the compressed JS into the DW, DW will automatically prompt you there wrong, the wrong place another line, or restore back to.

Finally give a netizen's own:

When your site grows slowly over time, you will find a lot of problems, one of which is becoming bloated and bulky, so the speed of running will slow down. optimization, and try to optimize the site, it becomes very important.

These methods are easy to understand, hope for everyone useful!