Popular version of JS code optimization techniques (reducing js volume)

After reading this article in detail, you can optimize it for a long time. Most of the JS optimization methods cannot be separated from these three methods.

(The total page size is 155.k, and JS accounts for 100.3 K)

It's time to optimize JS.

There are already many articles on JS optimization, most of which are highly technical, such as any variables, strings, and types. I don't want to introduce them anymore, it's useless if you know it. Most webmasters use "tailism". I only need to tell JS how to put it and delete it.

Today's websites are equipped with tools such as statistical code, sharing tools, comment lists, and related article plug-ins. To implement powerful functions, you must use JS files, which are exactly the JS plug-ins, in addition, the website function is enhanced, and the website speed is also affected.

The most common JS Optimization Method

According to the blog's JS call, the currently most influential speed is the UNMIN plug-in (952 ms), and the lucky AD (434 ms ). If you want to use it, you can retain it and optimize it according to official teaching materials. Lu songsong will introduce several of the most common JS optimization methods.

Method 1: place unimportant JS at the bottom of the page

This is the simplest and best-performing optimization method. It puts unimportant JavaScript code on the bottom body of the page to implement asynchronous loading, that is, when all webpages are loaded, finally, loading these unimportant JS files will not affect the webpage speed.

For example, the Public util. js public file in a low-profile and gorgeous template has the default effect of "Back to Top, write comments" on the webpage. Now, wumii and jiathis are integrated into the util. JS file.

(The unimportant JavaScript code is placed at the bottom of the page)

Of course, other websites also need to do this: Put unimportant JavaScript code at the bottom of the page.

Method 2: Merge JS files

Merge JS, that is, to reduce HTTP requests, and speed up a little if there is less than one request to the server. Merging Two originally independent JS requires some technology, but this is hard for us, the simplest method is as follows:

Regardless of the effect, paste file A directly to file B, and then delete file A from the merged file. If the webpage runs normally, OK. If some special effects are invalid, restore the file, merge C files. There will always be two non-conflicting JS files.

For example, Baidu advertising manager on my blog has 6 advertising spaces. By default, it requires 6 HTTP requests. Because it is a third-party JS, one request takes up to 234 ms, it takes 2 seconds for 6 requests, that is to say, because the advertiser adds 2 seconds to open the webpage.

(JS in the second paragraph converts 6 requests to 1)

After JS is merged according to the official tutorial, the ad requests of the six ad spaces are merged into one request, which greatly reduces the number of js requests, effectively reduces page rendering blocking, and increases the ad loading speed.

Method 3: Weight Loss for JS files

We will not discuss any three-object operators, reduce object searches, and make JavaScript concise. We will use the "JS weight loss tool ". Usually, these tools compress hundreds of lines of code in a JS file into one line to reduce the size. Recommended tools: http://javascriptcompressor.com/or software version (good fault tolerance)

Due to blank lines and other problems, sometimes using such tools will invalidate the JS function, and the simplest way is to use Dreamweaver to put the compressed JS into DW, DW will automatically prompt you for errors, place the error in another line or restore it back.

Finally, let's talk to another netizen:

When your site grows slowly over time, you will find many problems, one of which is growing bloated, so the running speed will slow down. It is very important to optimize the site.

These methods are easy to understand and hope to be useful to everyone!