Biography of Tadpoles: Summary of js, css, html compression and confusion

"Little Tadpole Biography"

Tadpole, male, low-level front-end engineer

Single for 30 years, love to solve problems with both hands

Type code with both hands during the day

Do something positive with both hands at night

My hands were finally overwhelmed, so I went to the hospital for an examination

The doctor asked: Do you have a girlfriend

The little tadpole stretched out his hands: this is

The doctor sighed and said: You need to find a real girlfriend, reduce unnecessary repetitive work, and free your hands.

Little tadpole suddenly realized

So download a certain city dating software

Made an appointment with two sisters

The first sister paper

The net name is: Shui Bingyue

Personal brief introduction: "Yi 淉芣嫒e, 僦芣婹嗐嗐e"

Legend has it that she is the ex-girlfriend of the Grand Duke of the Burial Family

Wounded by a man, I never love my heart anymore

Now I want to find an ordinary person to spend the second half of his life

Her head is a beautiful melancholic goddess

Invincible profile, the dream of thousands of young men

But when they met, Little Tadpole was stunned by her giant face of childish breasts

More than 300 catties of water ice moon, elephant legs

A face hit by a sand gun

Wearing a sailor moon jk outfit

Half exposed fat belly

Little Tadpole: Are you "Shui Bingyue"?

Shui Bingyue: Exactly

Little Tadpole: Are you a beautiful young hero?

Shui Bingyue: My little brother is so humorous

Little tadpole clicked on her profile picture and repeatedly confirmed: Auntie, don’t you please

Shui Bingyue turned on the beauty camera and adjusted it to the tenth level of beauty: Look! How beautiful, this is me, the first queen of the family buried in love, the only true god

The little tadpoles are so gray that their eyes are blurred

The little tadpole resists and calms down: Why did you leave the funeral family in the first place?

Shui Bingyue: Because the family grand duke is bald and his hair symbolizes power, my faith collapsed

Little Tadpole: So what do you plan to do next

Shui Bingyue: I want to find a man to pass on my excellent genes with him

Then look evilly at the tadpole

Little tadpole feels bad and wants to escape

Belly squirming by Shui Bingyue, si dead entangled

In panic, the little tadpole showed a piggy paige tattoo on his chest

Shui Bingyue was shocked, and the tadpole jumped out of the window to escape

The little tadpole's mentality collapsed, so finding a girlfriend was so dangerous

When giving up, the Zen master told the dream to encourage: Whenever you are in a downturn, remember that you were the number one tadpole.

The little tadpole cheered up and made an appointment with another sister

The net name is: "First Love"

When meeting, Little Tadpole was stunned by her peerless look. . .

First love carrying an lv bag and a Patek Philippe watch in hand

0.618 golden ratio figure, big wave hairstyle

Human high-quality women

Wherever he went, countless men looked sideways

Seeing this, the tadpoles quickly apply Dabao SOD honey

Oral Liuwei Dihuang Wan

Wuling red light car keys on the table

The collector's edition red star Erke men's shoes polished Zheng Liang

Turn on Super Licking Dog Mode

My first love sat down and looked at the tadpole affectionately: I was heartbroken recently, and I want to find an honest person to take the order. Are you an honest person?

Little tadpole: a national first-class honest person, a genius licking a dog in Houchang Village, and the first spare tire in Changping District, this is me

First love: I have 100 ex-boyfriends and 100 boats. Will you still love me?

Little tadpole: I will defeat them one by one, because I am the first tadpole

First love: I like to cheat, and I like to wear a green hat to my boyfriend

Little Tadpole: Baby is afraid of my cold, so P-leg puts on me a hat and gives me warmth, and loves you even more

First love: I am in a bad mood today, can you make me happy

The little tadpole performed a piece of tongue breaking a boulder

Then use 100 chest hairs, turn on multi-threading, and engrave a version of the react source code on the table

First love finally laughed: Welcome to the road of no return to love me

Little Tadpole: Please play with my feelings now, immediately, and immediately

The little tadpole completely lost his mind and was stunned by love

At this moment, a rich handsome man driving a Lamborghini passed by

First love took a look, turned around and said to the little tadpole: Let’s break up

Little tadpole: Huh?

First love: I fell in love with someone, goodbye

The little tadpole looked dumbfounded

First love got up to hook up with Gao Fushuai: I was hurt recently, are you honest?

Gao Fushuai: Please get in my car, I will show you how honest I am

Looking at the taillights of Lamborghini going away

Little tadpoles messy in the wind

Back at the company, the little tadpole washes his face with tears every day, his eyes are dead and walking corpses.

A male colleague, to help him out of the shadows

Serve the tadpoles with tea and snacks every day

Accompany the tadpoles every night to move bricks and work overtime until late at night

Discuss react source code and js advanced programming together

Hand in hand together, pair programming

The highest level of spiritual resonance in human beings often only occurs when two men meet unexpectedly.

Unconsciously, the little tadpole leaned on his shoulder

In an instant, the tadpole figured it out

Looking for a girlfriend is to seek spiritual comfort and physical satisfaction

But why does the girlfriend have to be female?

Ancestors of mankind

I like long legs because it is good for running

I like big buttocks because it's good for nurturing

I like the big one because it is good for breastfeeding

Put aside all these biological instincts, and cast into the broad embrace of men

Is the most perfect love

Is the most advanced soul fit

Little tadpole and male colleague hugged tightly

Caressing his chest hair

Enjoying the thrill of otherworldly soul

That night, the tadpole took him to find his mother

They have lived a happy life ever since

Finish

For more biographies of tadpoles, please follow github: the first tadpole

"Js, css, html compression and confusion summary"

background

Some time ago, in response to a major event, we used an old native html project before, and quickly made a h5, due to the tight time.

The result was unexpected. . . . It was plagiarized by a major company the next day. . . After adjusting some colors and changing some copywriting, I copied it directly and went online. . . Even the names of our variables have not been changed. . .

Later, we quickly compressed and obfuscate the project code to prevent subsequent iterations from being plagiarized. . .

The whole thing was angry and funny. . .

After this incident, I summarized the compression and obfuscation of js, css, html, which can increase the page loading speed while preventing the page from being plagiarized.

js confusion

js obfuscation is actually making your js code obscure and difficult to understand, achieving the effect of preventing plagiarism

The javascript-obfuscator library is commonly used in the industry

const JO = require("javascript-obfuscator");
const code = `
        function add(first, second) { return first + second; }; 
        var v = add(1,2); 
        console.log(v);
`;
const result = JO.obfuscate(code,
    {
      compact: false,
      controlFlowFlattening: true,
      controlFlowFlatteningThreshold: 1,
      numbersToExpressions: true,
      simplify: true,
      shuffleStringArray: true,
      splitStrings: true,
      stringArrayThreshold: 1,
    }
  );
console.log("混淆结果：", result.getObfuscatedCode())

This code is to obfuscate a simple addition operation code, and the final result is

If you analyze it, you will find that there is actually one more dictionary. All method variables are stored in the dictionary. When calling, first call the dictionary to restore the method name variables and then execute

js compression

Uglifyjs was the most used for compression before, and terser is now used more.

const { minify } = require("terser");
const code = `
        function add(first, second) { return first + second; }; 
        var v = add(1,2); 
        console.log(v);
`;
const result = await minify(code);
console.log("压缩结果：", result.code)

The result after compression is as follows:

function add(d,n){return d+n}var v=add(1,2);console.log(v);

All parameters have been turned into one character, all the space that can be reduced are removed, and converted into a line of code, which saves the code size to the greatest extent

css compression

CSS compression, I use clean-css. Of course, there are many excellent CSS processing plug-ins in the industry, such as PostCSS, but here I briefly introduce the usage of clean-css

    const CleanCSS = require('clean-css');
    const input = `
        a { 
            font-weight:bold; 
        }
        .vb {
            border: 1px silid red;
        }
    `;
    const options = { /* options */ };
    const output = new CleanCSS(options).minify(code);
    console.log("压缩结果：", output.styles)

The compressed result is as follows:

a{font-weight:700}.vb{border:1px silid red}

html compression

Now the most commonly used html compression plugin in the industry is html-minifier, which is very powerful, and can also compress js and css in html, and directly upload the code

We compress a piece of code with html, js, css

The code to perform compression is as follows:

const htmlMinify = require("html-minifier").minify
const result = htmlMinify(htmlCode, {
        minifyCSS: true,// 压缩css
        minifyJS: true,// 压缩js
        collapseWhitespace: true,// 删除html里的空格 达到html的压缩
        removeAttributeQuotes: true,// 尽可能删除html标签里的双引号 达到html的压缩
        removeComments: true, //删除html中的注释
        removeCommentsFromCDATA: true, //从脚本和样式删除的注释
    });
console.log("压缩结果：", result)

The compression results are as follows:

<html><head><style>a{font-weight:700}.vb{border:1px silid red}</style></head><body><div class=foreword>小蝌蚪，嘻嘻</div><script type=text/javascript>function add(d,n){return d+n}var v=add(1,2);console.log(v)</script></body></html>

By setting the corresponding configuration items minifyCSS and minifyJS, we directly compress html, js, and css together, which is very convenient

The only regret is that it seems that html-minifier does not support js obfuscation, so I took out the obfuscation of js directly.

end

The plagiarism reflects the irregularity of our team’s online process

But for the behavior of being plagiarized by other teams, we can only condemn morally and complain here.

Think of it as eating a ditch and gaining wisdom, hehe

For more technical articles, please pay attention to github: the first tadpole