Popular version of JS code optimization skills (reduce js size)_javascript skills

After reading this article carefully, you will be able to optimize for most of the day. Most of the JS optimization methods cannot be separated from these three methods.

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

It’s time to optimize JS

There are already many articles about JS optimization, most of which are very technical, such as variables, strings, and types. I won’t introduce them. There is no need to introduce them. I don’t understand them either. It’s useless if you know them. Most webmasters are "using it". I just need to tell JS how to put it and delete it there.

Today’s websites are equipped with statistical codes, sharing tools, comment lists, related article plug-ins and other tools. To achieve powerful functions, JS files must be used. It is these JS plug-ins that enhance the functions of the website. , also affects the website speed.

The most commonly used JS optimization methods

Judging from the blog’s call to JS, the ones that currently have the greatest impact on speed are Wumi plug-ins (952ms) and Nafoneng Ads (434ms). If you really want to use it, you can keep it and optimize it appropriately according to the official textbook. Below, Lu Songsong introduces some of the most commonly used JS optimization methods.

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

This is the simplest and most effective optimization method. Put all unimportant JS at the bottom of the page above the body to achieve asynchronous loading, that is, wait for the web page to be loaded, and finally load these unimportant JS files. JS, so it will not affect the speed of the web page.

For example, the default effect of the util.js public file in the low-key and gorgeous templates is that when browsing the webpage, the special effect of "return to the top and write a comment" will appear on the webpage. Now wumii (Wumi plug-in JS) and jiathis (sharing tool JS) are integrated into the util.js file.

(The unimportant JS has been placed at the bottom of the page)

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

Method 2: Merge JS files

Merge JS, which means reducing HTTP requests and making fewer requests to the server to speed up the process. Merging two originally independent JS requires some skills, but this is not a problem for us. Let us tell you the simplest method. :

No matter what, first paste the A file directly into the B file. After merging, delete the A file in the web page. If the web page runs normally, it is OK; if some special effects fail, then restore it and replace the C file. merge. There will always be two JS files that do not conflict.

For example, the Baidu Ad Manager on my blog has 6 ad slots. By default, 6 HTTP requests are required. Because it is a third-party JS, a request takes 234ms at the fastest, and 6 requests will take 2 seconds, that is to say, it will take an extra 2 seconds to open the web page because of this advertising manager.

(The second piece of JS turns 6 requests into 1)

After merging JS according to the official tutorial, the ad requests for 6 ad slots are merged into one request, which greatly reduces the number of js requests, effectively reduces the blocking of page rendering, and improves the ad loading speed.

Method 3: Lose weight for JS files

We won’t discuss the ternary operator, reducing object searches, or how to make JS concise. We will use the “JS Weight Loss Tool”. Usually such tools will compress hundreds of lines of code in a JS file into one line, making the size smaller. Recommended tools: http://javascriptcompressor.com/ or Software version (good fault tolerance effect)

Because of problems such as blank lines, sometimes using such tools will invalidate the JS function. The easiest way is to use Dreamweaver and put the compressed JS into DW. DW will automatically prompt you that there is an error. Just start a new line where the error occurred, or restore it.

Finally, let me give a netizen’s personal experience:

When your site grows slowly over time, you will find many problems, one of which is that it becomes more and more bloated, so the running speed will also slow down. Optimization, trying your best to optimize the site, has become very important.

These methods are easy to understand and I hope they are useful to everyone!