Talk about JavaScript code obfuscation

Overview:

• Case: Cesium packaging process, related technical points and approximate process

• Principle: The Meaning of code optimization: compression Optimization obfuscation

• Optimization: How to improve the cesium packaging process

Keywords: Cesium gulp uglifyjs

Number of words: 2330 | Reading time: 7min+

1 Cesium Packaging process

If not mistaken, cesium has made an adjustment to the code-building tool from the beginning of 2016, changing from grunt to gulp. As an amateur, I don't speculate on the difference between the two. Personally, gulp and Ant's ideas are very similar, through the pipeline connection, are based on the flow of building style, and gulp more like JS coding style, bring a kind of intimacy.

Gulp. Task (' Task1 ', [' task0 '], function () {

return Fun_task1();

});

The task statement is the most common in gulp, and if you understand the sentence, you will understand the script. The meaning of this sentence is that in order to execute the TASK1, Task0 must be executed first, and Task1 's specific work is in the Fun_task1 method. That's what you've been talking about. Stream-based build style. With this sentence, type: Gulp task1 in the command line, enter to execute the instruction.

After installing the node, environment variables, and installing the NPM package, you can use the Gulp Packaging tool, which is recommended for CNPM. When the environment is set up, type Gulp minify on the command line to start packing. The complete process is build->generatestubs->minify.

Cesium Packaging process

Build: Prepare the work, create the build folder, convert the GLSL file to JS form, the most important is the Createcesiumjs method, traverse all JS script in source, record all object to source/ Cesium.js; others are examples, unit test related modules.

Generatestubs: For unit testing, slightly.

Minify; First Combinejavascript mainly did two things, packaging cesium and workers scripts, which is the final result of packaging. Gulp according to different instructions, such as minify under Uglify2 optimization, and combine corresponding parameter is none, the generation path is cesiumunminified.

In addition, the attentive person will find that Combinecesium's implementation has such a sentence path.relative (' Source ', require.resolve (' almond ')), which is a small optimization, Almond is a Requirejs package, so the final cesium.js contains the ' almond script, which incorporates the main method of Requirejs.

As above is the main process of packaging cesium, simply say there are 3+1 classes of instructions:

• Clean

  • Empty file

• Minify

  • Packaging & Compression

• Combine

  • Package only, do not compress

• Jscoverage

  • Unit test coverage, not known

2 Code optimization

There is a general understanding of the process, below, we have a detailed understanding of what the uglify2 process has done to optimize the code, Word, compression, optimization, confusion.

Uglify2 has three main parameters:-o,-c,-m,-o parameter required, specify output file,-C compression,-m obfuscation variable name. The following file comparisons are combine, (Uglifyjs-o), (Uglifyjs–c-m-O), respectively, in K:

Compression comparison of Uglify2

Under one roof, why is the gap so big? Let's briefly talk about the process of 1~2,2~3 from green to blue and winning Bluetooth.

The process is actually very simple, is to do three things, remove the comments, remove the extra space (line break), remove unnecessary semicolons (;). On these three things, the file is a little more than half a minute, in other words you write the code is usually more than half is nonsense, at this time, the AI programmer next to you may muttered "you human good stupid ~".

The combined application of the small details is:

• Remove some functions that are not actually called (Dead code);

• Merge scattered variable declarations, such as Var A; var b; Change to Var, a, A;

• Simplification of logical functions, such as if (a) B (); else C () becomes a? B (): C ();

• The simplification of variable names, such as Var strobject, becomes Var s;

• ......

There are a lot of these tips, specifically to see the different compression tool considerations, but some of the compression of efficient tools is not stable, may break the syntax or semantics, so there is no need for a few KB to take too much risk, the current more mature tools are mainly three Uglify2,google Closure and Yuicompressor, the specific merits of their own to understand, I was in accordance with their own understanding given the order. The final effect is as follows:

Cesium script effects

Such code can only use the unit "Tuo" to describe the human can not be directly read, the browser can read it? This is a good question! Here is the approximate flow of the V8 engine for JS parsing:

V8 Engine Parsing JS script

The following is the time spent in my native Chrome parsing cesium.js script (the difference between when the script finishes downloading and parsing the browser), in milliseconds, because only one test is possible, and there may be errors, but basically the expected value:

JS Script parsing Time comparison

First, because it is a native test, the script is downloaded very quickly, whether it is the largest 8M or the smallest 2.4M, so we do not discuss (but consider in practice) the time it takes to download the script.

Second, for example, more than one source, which is the source of the situation, this time the water is relatively large, because it is fragmented files, can be downloaded on demand, but because the file is trivial, performance is not high.

The conclusion is that this JS script optimization strategy has little effect on the browser, the browser can see the optimized code, may be stunned for a while God, but quickly overcome.

3 Combat

Know the general principles of Code optimization, review the purpose of code optimization (compression, optimization, confusion), and match the results to meet expectations. Well, one, the size of the script is small, the second, the code efficiency is optimized, its third, others can not understand. It seems that the work has already been done and the script is perfect.

The effect after format

Grandpa Mao said, fighting with people is a pleasure. Indeed, the goal of the first two points has been achieved, but the 3rd, much worse. As above, and just the script is the same file, I just use Chrome debugging tool format only. This is the gap between ideal and reality.

As can be seen, the Cesium default packaging tool in the compression and optimization are not a problem, but in the confusion is not sufficient, of course, cesium itself is open source, there is no need to engage in these. Objectively speaking, JS script is plaintext, so anti-compilation is only a matter of time and ability, so it may be possible to take a different attitude to look at this problem, increase the cost of anti-compilation, when the cost is greater than the cost of purchase.

Sorry, the following content because of external factors, inconvenient in this said, I finished writing and then deleted, deeply apologize. If interested, may wish to leave a message in the public, of course, if you recognize the technology of the Super map, Welcome to join the Hyper-map development WebGL team.

Beneath this mask, there are more than flesh. Beneath this mask, there is a idea. and ideas are bulletproof.

Talk about JavaScript code obfuscation