Experience in optimizing JavaScript and CSS

JavaScriptAnd CSS optimization are also very important to improve the performance of web sites.

Before going deep into JavaScript code and talking about every optimization function, let's take a general look at what we can do. These are of course important changes to the performance of our website. Below are several guidelines for improving the impact of JavaScript on website performance:

1. Merge the. js File

2. scale down the script

3. Place the script at the bottom of the page

4. Remove Replication

Merge. JsFile

According to the most basic principle, your goal should be to make your JavaScripts generate as few requests as possible. Ideally, this also means that you should have only one. js file. This task is to put all. js script files in one file.

Although in most cases, the method of a file is recommended. However, sometimes you can use two script files to benefit from the middle: one is the functions required when the page is downloaded, and the other is the functions required after the page is installed. Another scenario is that when multiple pages on your site use a feature script, the two files may be desirable. Shared scripts should be stored in one file. The specific scripts required for different pages should be placed in the second file.

Scale down or blur the script

Now that you have merged your scripts, you can narrow them down or blur them. This means to delete unnecessary things, such as comments. Obfuscation is a further step. It mainly involves renaming, rescheduling functions and variables so that their names are shorter, although the scripts are obscure to read. Obfuscation is usually used to keep JavaScript source code confidential. However, your scripts can be obtained online and cannot be 100% confidential. For more information about downgrading and blurring, see Douglas Crockford's article on this topic ..

Generally, if you have performed gzip on JavaScript, you have made great improvements in the file size. by downgrading and blurring the script, you will also receive minor benefits. On average, gzip compression can save 75-80% while gzip and scale-down can save 80-90%. In addition, when you scale down or blur your code, you may introduce bugs. If you don't worry about someone stealing your code, you can forget to blur it. You only need to merge and scale it down. The latter is even just a merge script (but you should always gzip them ).

JSMin is a good tool for downsized JavaScript. Packer is a free online tool.

In the process of developing a website, modifying the code to merge and scale down should be an additional and separate step. In the development process, you should use multiple. as long as you feel comfortable with the js file, when your website is ready to be activated, You will replace the merged and reduced versions with the original ones. You can develop a tool to accomplish this. Below, I have introduced an example in which the applet will complete this function. It is a command line script that uses the PHP port of JSMin.
<? Php
Include jsmin. php;
Array_shift ($ argv );

Foreach ($ argv AS $ file ){
Echo/*, $ file ,*/;
Echo JSMin: minify (file_get_contents ($ file), "\ n ";
}
?>

It's very simple, isn't it? You can save it as compress. php and run it in the following way:
$ Php compress. php source1.js source2.js source3.js> result. js

This will contract source1.js, source2.js, and source3.js and combine them into a result. js file.

This script is useful when you merge and scale into a step in the site development process. In addition, there is a more lazy way. You can read Ed Eliot blogs and SitePoint blogs to find more ways.

Many third-party JavaScript libraries provide versions that are not compressed or compressed. You can download and use the code that has been reduced. Next, you only need to process your own code. Sometimes you need to remember the license for a third-party JavaScript library. Even if you merge and reduce all your scripts, you should keep the copyright description next to your code.

Place the script at the bottom of the page

The third rule of thumb about JavaScript optimization is to place the script at the bottom of the page as close as possible to the </body> label. Because of the nature of the script (they can change anything on the page), when the browser encounters a <script> tag, it will impede the entire download. Once you know that a script is downloaded and analyzed, other downloads will start.

Putting the script at the bottom is a way to avoid negative blocking effect. In addition, the reason why the <script> label is used as few as possible is that the browser does not encounter this label, and he needs to start the JavaScript analysis engine. This is a huge overhead. Ideally, a page is analyzed only once.

Remove duplicate scripts

Another principle of JavaScript optimization is to avoid including the same script twice. This seems a strange suggestion, but it does exist: for example, if a large website uses more servers, these servers include JavaScript files, it is entirely possible that two of them contain the same JavaScript. Repeated scripts can cause the browser analysis engine to start twice, sometimes (some IE versions) or even request files twice. When you use a third-party JavaScript library, repeated Scripts may cause problems.