Ajax Basics Tutorial (5)-5.5 complete JavaScript compression and obfuscation

As we all know, JavaScript is an interpreted language that executes in a client browser. In other words, JavaScript is downloaded to the browser in clear text, and then the browser executes the JavaScript code as needed.

The user can read the JavaScript source code by using the browser's view source function, which displays the full HTML tag of the page, including all JavaScript blocks. Even if the JavaScript source code is placed in an external file and referenced using the SRC attribute of the script tag, the user can download and read it. Because people who view the page can get JavaScript source code, do not place proprietary or secret logic algorithms in JavaScript. This logic is best placed on the server, where it is safer.

In AJAX based applications, the size of JavaScript files can become problematic as JavaScript is used more and more. Because JavaScript is an interpreted language, it is not compiled into machine-level binaries, and binary code is a more efficient storage format for executable code. If there are too many JavaScript files, the application slows down because it needs to download the source code from the server to the browser before it can be executed on the browser. In addition, if you use a tool such as JSDoc (as described earlier) to annotate your code for this purpose, the very large JavaScript code will become larger.

As you may see, JavaScript lacks binary executable packages, which can create two problems: poor security and the need to download a large number of source code. Is there any way to avoid these problems?

The growing popularity of JavaScript has resulted in many tools that help solve these problems. The simplest compression tool will simply remove all comments and line breaks from the JavaScript source code, which can reduce the size of the downloaded source. Deleting comment lines and line breaks can reduce the size of JavaScript files by 30% or more, depending on the situation. It is important to note that all the statements in the JavaScript source code must end with semicolons correctly, and only then can the source code be compressed with this tool. If this is not done, you will receive a message of error or unexpected behavior. So before compressing the JavaScript source code, be sure to use jslint to ensure that all statements end with semicolons!

There are also a few tools that go a step further and provide fuzzy services. Blur (obfuscation) is a process that scans the source code completely, changing the original name of the field and function to a coded, meaningless name to prevent others from understanding the meaning of the source code and the internal work. This obfuscation is generally not required for languages that can be compiled into machine-level binary directives (such as C + +). Even though Java and C # can be compiled into a modern language of intermediate bytecode rather than binary directives, fuzzy tools are needed to ensure maximum security. JavaScript also requires such a tool as a fully interpreted language.

There is a free tool that can provide both compression and fuzzy services, namely Memtronic's Html/javascript cruncher-compressor (hometown.aol.de/_ht_a/memtronic/). This tool supports multiple levels of JavaScript compression. The lowest level of compression in this tool is called extrusion (crunching), and simply deletes all comments and line breaks. The documentation for this tool is said to save 20%~50% bandwidth. Using the crunch mode, you can see that the size of the JavaScript file is reduced by 30%.

The highest level of compression in this tool is called compression (compressing), is a real compression mechanism for the actual compression of JavaScript source code, and to the file to increase the automatic decompression function. The documentation for this tool says that when using this mode, bandwidth can save 40%~90%, and the compressed output has been successfully tested in the current version of IE, Netscape, Mozilla and opera browsers. Using the same JavaScript file, the "compressing" mode and the "crunch" mode were used to test and found that the "compress" mode was used to reduce the size of the file by more than 65% (see Figure 5-13).

In writing a book, the Memtronic tool's documentation says that JavaScript's fuzzy tools are not yet complete. However, you can look at the output window shown in Figure 5-13, which shows the results of a "compression" operation on a JavaScript file. This output contains a number of strange characters that are difficult to read. Although this may not be a true obfuscation, it is enough to prevent users who have bad intentions from viewing (and even stealing) your JavaScript source code.

Figure 5-13 Memtronic's html/javascript cruncher-compressor greatly reduces the size of the JavaScript source code and makes it difficult to read

Back to "Ajax Basics Tutorial-Directory"