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?

Jun 28, 2020 pm 01:51 PM
async javascript

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to implement an online reservation system using WebSocket and JavaScript How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to use insertBefore in javascript How to use insertBefore in javascript Nov 24, 2023 am 11:56 AM

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

How to get HTTP status code in JavaScript the easy way How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

See all articles