When TypeScript exceeds JavaScript in speed tests

 
3r3-31. I am writing this post in response to this where different performance tests are compared, including the same algorithms written in TypeScript and jаvascript. As is known to many, the first when released is translated into the second. TypeScript does not have native support in browsers, it does not have its own engine. Moreover, many of the buns of this language are discarded during transpiling to get pure JS, which can be run in all browsers (if you want, even in Explorer). Good. And now look at the picture. 3r388.  
3r388.  
When TypeScript exceeds JavaScript in speed tests 3r388.  
3r388.  
What do you think happened? The code is almost the same, the only difference is that in the JS version there is no information about the types of variables. But the speed gap is fundamental. 3r388.  
3r388.  
At first I tested on 10 billion cycles and it seemed to me that the browser just hung. But no, just under Chrome, the JS version worked for 250 seconds, and transported from TS - 15 seconds. It can blow the brain and it really blew me, although I already knew about this TypeScript feature. mayorovp in comments to the original post about the tests. Indeed, I completely agree that the following types of records in TypeScript when translating into production, that is, in the JS form, will not differ in any way: 3r388.  
3r388.  
const fn = (x: number, y: number) => x + y;
const fn = (x, y) => x + y;
3r362. 3r3633. 3r388.  
I shortened that example a little to show that the information about the types is really discarded and in the final build on JS we get the same thing. And this is what we get is the secret of high performance TypeScript in tests:
 
3r388.  
console.log ("start");
for (var n = Date.now (), r = ? o = 0; o <1e9;o++)r=r+o; //вот она, наша функция sum
console.log ("end. time" + (Date.now () - n) /1e3 + "seconds") .3r363. 3r388.  
3r388.  
The call of the TypeScript transpiler function was turned into a simple summation operation right in the loop body, which caused a superior performance over the code written just in JS. Yes, this is a well-known technique - inlining functions in a loop, that is, writing their code directly instead of calling. So you can write yourself, but the code from the inlining swells during the code review
 
it becomes so hot that the monthly stock of the rod goes away in two hours, and there are still deadlines ahead! 3r388.  
3r388.  
The creators of TypeScript are thinking about optimizing the code during transpiling - at least at this stage in the development of the language, for which many thanks to them. These operations are often not obvious and, for example, 3r374. const is not equivalent to inline [/b] in C ++ (although for data, not for functions, substitution in place occurs almost always instead of referring to a variable - this is important, since the speed of accessing local and global variables is different). 3r388.  
3r388.  
For functions, substitution by calling does not depend on const - the summation function from the example in the loop will simply turn into an addition operator for different record forms, including the non-arrow form. Moreover, if you call another from one function - most likely, one of the functions will not be deployed and will be called in a loop. I propose to independently study various short algorithms in TypeScript and see what code in js they turn into as a result. Some operations are obvious, some are incomprehensible. 3r388.  
3r388.  
But these optimizations exist, and it is they who can create the superiority effect of the very same algorithms. This is the answer to the question asked by zolotyh - how can typescript work faster than jаvascript, and at the same time eat several times less memory? 3r388.  
3r388.  
Although most likely, this is not the only reason, and by no means a guarantee of the ultimate superiority of your TypeScript project as compared to that of a colleague who writes on ES6.
3r3394. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e. ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r395.
+ 0 -

Add comment