Home > Web Front-end > JS Tutorial > In addition to async being 10 times faster, what else does JavaScript bring to the table?

In addition to async being 10 times faster, what else does JavaScript bring to the table?

青灯夜游
Release: 2020-06-28 14:00:36
forward
2313 people have browsed it

Today’s JavaScript is ubiquitous. Using JavaScript in the traditional way, developers can create web applications in various web browsers; through Node.js, they can develop command line tools and server applications; and in In the desktop field, cross-platform desktop applications can be built through the Electron framework based on JavaScript and Web technologies such as HTML and CSS; React Native can be used to develop cross-platform mobile applications; in addition, JavaScript can even run on IoT devices.

Ecma TC39 manages the development of the ECMAScript ecosystem. It is the standard behind the current JavaScript language. The Google V8 team has been actively involved in JavaScript-related standardization work.

V8 is Google’s open source JavaScript engine (also a WebAssembly engine). Platforms such as Chrome, Node.js and Electron are all based on V8. At the same time, in addition to Chrome, a series of web browsers based on Chromium, such as Opera and the upcoming Microsoft Edge, are also based on V8 at the bottom.

Recommended study: "JavaScript Video Tutorial"

At Google I/O 2019 a few days ago, Mathias Bynens of the V8 team and Sathya Gunasekaran shared the latest development progress of JavaScript.

In addition to async being 10 times faster, what else does JavaScript bring to the table?
The V8 team stated that their mission is to lead the high performance of modern JavaScript and WebAssembly. It is worth noting that the sharer used "real-world" to describe performance and introduced the so-called " "real-world performance" is opposed to performance that is purely for benchmark data. Google emphasizes that what it wants to achieve is a high-performance effect that can actually be achieved in real life, rather than being so "out-of-the-world".

They gave several examples. Since Chrome 61, the V8 team has doubled raw JavaScript parsing speed, and these numbers are tested on real websites. At the same time, they have successfully removed 40% of the parsing and compilation work from the main thread, making web page startup smoother.

In addition to async being 10 times faster, what else does JavaScript bring to the table?

In addition to Chrome, the speed improvement is also clearly reflected in Node.js. Compared with Node.js 7, Node.js 12 has async speed increased by 10 Times, Promise.all is 12 times faster.

In addition to async being 10 times faster, what else does JavaScript bring to the table?

In addition to the improvement in parsing speed and runtime performance, memory usage has also been reduced. From Chrome 70 to Chrome 76, the memory consumption of running actual web applications on Android has been reduced. 20%.

In addition to async being 10 times faster, what else does JavaScript bring to the table?

Next, the speaker shared some new features of JavaScript, covering a lot of content. Here is a brief introduction to some of the more interesting features:

Use dialect colloquial display of time phrases API

This is one of the many new Intl.* APIs, and it is also a feature that has been discussed more by the audience. Intl.* refers to the internationalization feature.

When we refer to time in our daily life, we will say "last week", "last month" and "42 seconds ago". Using the new Intl.RelativeTimeFormat() function, the program can use specific The language returns these phrases instead of the boxy "one week ago," "one month ago," and "42 seconds ago."

The speaker demonstrated this feature in English and Tamil, and the effect is as follows:

In addition to async being 10 times faster, what else does JavaScript bring to the table?

In addition to async being 10 times faster, what else does JavaScript bring to the table?

Currently this feature is supported Phrase representation of seconds, minutes, hours, days, weeks, months and seasons, and support for multiple languages ​​(not sure if Chinese support is available), developers no longer need to maintain a dedicated list of relative time phrases.

globalThis

If you want to write JavaScript that is suitable for different platforms, whether it is Node.js or a web browser, you need to have corresponding code to adapt to the global " this", such as a web browser, you need to use "window" to judge, but when "window" is not available, you also need to use "self" to check. In Node, you can use "global" to judge, but if it is independent JavaScript shell environment, the situation has changed again.

In addition to async being 10 times faster, what else does JavaScript bring to the table?

Environmental factors are very complex, and various platform environments require complicated adaptation processes, which will be very painful for developers, so the V8 team has added a " globalThis" feature, which can easily access the global "this" without relying on the environment.

Currently Chrome, FireFox, Safari and Node.js all support this feature. It is also applicable to polyfill and other libraries that require global access to "this". From this point of view, this feature is a relatively big improvement.

WeakRef

Usually object reference in JavaScript means that as long as the object is referenced, it will not be GC. In weak reference, if other objects are If the object is no longer referenced, the GC mechanism will automatically reclaim the memory occupied by the object, regardless of whether the object is still in the referenced structure.

Currently, there are two weak reference methods in JavaScript: WeakMap and WeakSet. As long as an object is added to WeakMap or WeakSet, the GC can recycle the memory occupied by it when a condition is triggered.

WeakRef is a more advanced API that provides a window into the object life cycle and can solve the scenario where WeakMap only supports the object type as Key.

The speaker took cached images as an example. Map will lock the Key and Value of the image so that the image name and image data will not be GCed because it is always referenced. On the other hand, weak reference WeakMap will not work here, because the image name is a string type, and WeakMap stipulates that its Key can only be object type.

WeakRef solves this problem by directly caching the image object. The image name is used as the Key, and the WeakRef weak reference is stored in the cache as the Value. But this will bring another problem: because the image name is Key, map will still retain these image name strings. Ideally these strings would also be GCed.

In addition to async being 10 times faster, what else does JavaScript bring to the table?

The solution for WeakRef is to introduce a new API "FinalizationGroup()", register a callback function, and delete the previously mentioned "residual" from the cache when the GC is triggered. image name string".

In addition to async being 10 times faster, what else does JavaScript bring to the table?

In addition to these points, the new JavaScript language features also include:

  • class fileds can be directly in the class Initialize variables without writing them in the constructor

  • Private setter and getter

  • String .matchAll can perform multiple regular matches

  • Improve the readability of numbers, numeric seperators can use "_" as the separator when writing numbers

  • New large number type BigInt

  • Newly added some Intl.* API, that is, use For internationalized APIs, such as Intl.NumberFormat for localized formatting of number display, Intl.RelativeTimeFormat() and Intl.DateTimeFormat() for localized display of time

  • # Top-level await, no need to write async

  • New Promise functions Promise.allSettled() and Promise.any()

For specific content, please view the speech video:

https://www.youtube.com/watch?v=c0oy0vQKEZE

The above is the detailed content of In addition to async being 10 times faster, what else does JavaScript bring to the table?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:oschina.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template