Optimize Website Design (10): Minimize JavaScript and CSS

Preface

The optimization of website design is a big topic. There are some general principles and some suggestions for different development platforms. This research has never been stopped, and I have shared this topic on different occasions.

As a general principle, Yahoo's team of engineers once provided 35 best practices. For this list, seeBest practices for speeding up your web siteHttp://developer.yahoo.com/performance/rules.html, while they also released a corresponding test tool yslow http://developer.yahoo.com/yslow/

I strongly recommend that all website developers learn these best practices and apply them based on their actual projects. In the next period of time, I will combine the ASP. NET development platform and use a seriesArticleTo help you better understand and use these principles.

Preparations

Prepare the following development environment and tools to follow me for subsequent learning.

1. Google Chrome or Firefox, and install the yslow extension component. Please note that this component is provided by Yahoo, but there is no version for IE currently.
   1. Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. Https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. You should have some knowledge about the developer tools of these browsers. You can call up this tool by pressing F12.
2. VISAUL studio 2010 SP1 or later, Visual Studio 2012 is recommended
   1. Http://www.microsoft.com/visualstudio/eng/downloads
3. You need to have a good understanding of the basic development process and core technologies of ASP. NET. This series of articles is difficult to popularize basic knowledge.

Topics to be discussed in this article

In this article, I will discuss the tenth principle: Minify JavaScript and CSS (minimizing JavaScript and CSS ).

Before I started, I wrote the tenth article unconsciously. I think this series is very necessary. Although Yahoo's best practices, I have seen it many years ago and have basically followed these principles. However, I have observed that many of my friends still do not understand this, or even know these principles, however, there may also be some confusions in the application process (there may also be "contradictions" between these principles "). Therefore, I feel that I have used some time, combined with my practical experience, to explain and interpret the ideas. I have mentioned many ideas in this article. More importantly, I will explain why I did this, why don't you do that? I hope everyone can know what it is and why. Finally, I will provide corresponding tools and examples for practice.

To put it bluntly, the principle of "minimizing JavaScript and CSS" focuses on reducing the size of these two files as much as possible to speed up download.

1. Remove unnecessary format characters, blank spaces, and comments. This operation can be understood asFormatThe operation result is to remove the format of the original file.
2. Fuzzy (obfuscation) processing of the javascrip scriptSource code.

To understand this behavior, we can look at two files

This may be the two most commonly used script files. In fact, they are the same script file. As agreed, script files with Min characters are usually called "compressed versions". Note that, this is different from the concept of "optimizing Website Design (iv): Enable compression for resources" mentioned in this article. Their volume shows that the "compression" ratio can be up to 65%, which can save a lot of network traffic and valuable download time.

How is this "compression" achieved? You can view the two files.

The original file, which is usually called a "well-formatted" script file, contains 8756 lines with rich comments and line breaks. This format is easy to read and understand, it can also provide smart sensing support for development tools (such as Visual Studio. Let's look at the files after "compression.

This file contains only six lines. If you delete the comments at the top of the file, there are actually only three lines.CodeAnd we can see that the code has been processed, because the method names and parameter names are processed as short as possible. Obviously, such code is not suitable for humans to read, but for computers, specifically the Javascript execution engine of the browser, there is no problem. If you are interested in understanding the Mappings of these names, refer to another file (jquery-2.0.0.min.map)

 

It seems that you understand the benefits of doing so, and you know how to do it. Even so, it is impossible for us to do such a thing manually. This challenge is too high. We usually use some tools, such as the two tools mentioned in the article.

1. Jsmin: this tool is well known and can be used to minimize JavaScript processing.

1. Yui Compressor: You can not only compress JavaScript, but also compress CSS. Unfortunately, it is a Java tool and may have some restrictions on its use. But you can use an online version through another address: http://refresh-sf.com/yui/

It is worth mentioning that the syntax validity of the script file must be ensured before Javascript is minimized (especially fuzzy processing, we strongly recommend that you copy this file as a backup because these operations are usually irreversible.

To check the syntax validity of the script, you can use another tool, jslint.

This tool has a plug-in for Visual Studio. you can install it through the Extension Manager.

 

In addition to minimizing JavaScript and CSS, we may also minimize HTML markup text (mainly formatting ), you can use the following tool: absolute HTML Compressor