Difficulty: Easy

preface

We often need to do performance optimization when developing front-end Web pages. Most of the optimization schemes are focused on the network layer, such as increasing CDN cache, merging network requests, code compression, Prefetch and Preload of resources, etc. However, it seems that the MB code in front of front-end pages is not enough. Especially when virtual-DOM framework is popular nowadays, a React framework package is 100+KB, not to mention complex and lengthy business code! Web page seconds open is the ultimate goal of every front-end person, when all the network level, structure level optimization are about the same, the rest is the optimization of the code! And this is hand-to-hand combat! It takes a lot of energy!

Today I want to compare ES5 and ES6 in terms of code output size.

ES5 vs ES6

Function inheritance

Function inheritance uses ES6 syntax to write about 75% less code than ES5. Of course, if the inheritance method is abstracted and reused, ES5 will also have dozens more lines of code in absolute value than ES6. In actual programming, this will be handed over to the framework or Babel, but we need to know.

Object to merge

Object merging reduces the number of lines of code by almost 50%!

This binding

Clear in JS, this binding is a not easy thing, we experience the closure time, bind era (the actual closure), arrow function era, in the latest syntax, although very abstract, but my understanding is the arrow function essence is to bind again the syntax of the simplified method, but this is not the focus, this paper We know that function calls are very frequent in JS, and although we can only see a few bytes reduced from the above example, when it comes to our business code, the amount of code reduced by this simplification can be quite significant.

An asynchronous function

In ES6, the advent of async/await greatly simplifies the amount of code for asynchronous programming. Here, we just convert it to Promise writing. In actual use (deploying to ES5 environment), we also need to load Promise polyfill, saving at least 4KB in bytes.

There are many more examples of ES6 vs ES5 code comparisons. Here are just some examples. See Github for examples.

In essence, one of the big drivers of the JS language is that code needs to be written more and more compact, because it relies on network transmission by nature, and in the Internet world, every byte is money!

further

ES6 brings great convenience to front-end programmer programming, but the final victory is to be able to run ES6 on the user terminal. Here I recommend two bloggers’ experiment summary on ES6 deployment, which is very good and worth learning from:

  1. The front-end production environment deploys ES6 code
  2. Deploying ES2015+ Code in Production Today

The recommended article is quite long, I use the experimental data here to show the power of ES6, so that you have an intuitive feeling, the following is for the same site js file size and execution time comparison:

version The file size The execution time
compile The compression Gzip compression Measured value The average
ES2015+ 80K 21K 184ms, 164ms, 166ms 172ms
ES5 175K 43K 389ms, 351ms, 360ms 367ms

From the above comparison, it is easy to see that ES6 is significantly superior to ES5 in both code transfer size and execution time.

conclusion

ES6 is not only the syntactic sugar of ES5, but also the ultimate solution of front-end performance optimization, saving the space of code can make the program run faster, saving the time of program monkeys/ladies can talk about life and ideals!

ES6, worth having!

reference

Kangax. Making. IO/compat – tabl…

Myst729. Making. IO/posts / 2018 /…

Philipwalton.com/articles/de…