What interesting new features does Chrome 92, which was officially released on July 20, bring?

background

Chrome has been instrumental in the evolution of Web technology for more than a decade, and understanding Chrome can help us understand trends across the industry.

So I’m going to take a look at the important features of each version of Chrome and share some thoughts of my own under the title “Awesome Chrome” :

  • The Great Chrome browser (1) : Chrome 89 starts the Internet of Things for Web applications
  • Great Chrome browser (2) : Chrome 90 will use HTTPS by default, making the Web more secure
  • Great Chrome browser (3) : Chrome 91 supports The WebAssembly SIMD, accelerating the use of the Web in areas like AI

By focusing on writing Chrome, I can improve both my professional skills and personal influence. My goal is to publish a book about Chrome in 2025. After all, publishing your own book is the highest aspiration of any writer.

I am Hanyan, a programmer who loves writing code and articles. Welcome to follow my wechat official account, Hanyan Talk.

TL; TR

  • What’s the best thing about Chrome 92? To be honest, There’s nothing particularly exciting about Chrome92, but array.prototype.at () is useful, right
  • When was Chrome 92 released? 2021-07-20
  • How many features have been updated in Chrome 92? For details, see Chrome Platform Status
  • Which version of V8 engine will Chrome 92 use? 9.2
  • What, in turn, are the new features I’m interested in?
    • Array.prototype.at()
    • crypto.randomUUID()
    • Canvas color management
    • Web Bluetooth manufacturer data filter

Detailed interpretation

Array.prototype.at()

You’ve all written code that uses the length of an array minus 1 to get the last element of an array:

const A = [1.2.3.4]; 
console.log(A[A.length - 1]);
Copy the code

As a neat code freak, this is a long and strange way to write.

Chrome 92 now supports array.prototype.at () :

const A = [1.2.3.4]; 
console.log(A.at(-1));
Copy the code

The code is 5 characters less and the readability is much better. Kill two birds with one stone!

In addition to Array, String and TypedArray also support at methods.

The ECMAScript proposal for the at method, proposal-relative-indexing-method, is already at Stage 3 and will be included in the ECMAScript specification as early as next year.

crypto.randomUUID()

In daily development, we often need to generate unique ids, such as unique IDS for each user.

NPM packageuuidMore than 40 million downloads a week. I also found the UUID module in my code:

Chrome 92 has added the crypto. RandomUUID () method to generate unique ids that conform to THE RFC 4122 Version 4 specification.

Unfortunately, you will still need to use the UUID module in your front-end projects because Firefox, Safari, and other browsers do not support it.

However, Node.js 14.17.0 already supports the crypto.randomuuid () method, and the generation of unique ids is usually done on the back end, so the use of the visual UUID module will be reduced. Using the official API is more secure and performs better.

Ensuring the uniqueness and security of randomly generated UUIds is a seemingly simple but very complex problem. In his magnificent book The Art of Computer Programming, Turing Award winner Donald Knuth devoted a chapter to random numbers:

It is not easy to invent a foolproof source of random numbers.

The familiar math.random () doesn’t live up to its name. It’s a Pseudo random Number Generator (PRNG for short) that generates the same sequence of random numbers when we specify the same random_seed to start!

// Example code source: [V8 Deep Dives] Random Thoughts on Math. Random (), https://dev.to/puzpuzpuz/v8-deep-dives-random-thoughts-on-math-random-2ci4
node --random_seed=42
Welcome to Node.js v1417.3..
Type ".help" for more information.
> Math.random()
0.5254990606499601
> Math.random()
0.963056226312738

node --random_seed=42
Welcome to Node.js v1417.3..
Type ".help" for more information.
> Math.random()
0.5254990606499601
> Math.random()
0.963056226312738
Copy the code

That said, once the hacker gets random_seed, he can predict the “random sequence” returned by Math.random(). Isn’t that a little scary?

Of course, getting a random_seed isn’t easy, but it’s not impossible, because random_seed isn’t random, it depends on internal states, such as the browser startup time, or the virtual memory address of a variable, that are predictable. Math.random() was cracked for Firefox for Android in 2014.

Therefore, don’t use math.random () in security-intensive scenarios. Multiple security holes in CVE are related to math.random ().

To meet the demand for a more secure encryption API, the community has provided a number of solutions, the most famous of which is CryptoJS. However, for cpu-intensive applications such as encryption, the pure JavaScript solution has serious performance problems and is not secure enough.

Therefore, in 2017, the W3C released the Web Cryptography API to provide a more secure and better performing encryption API. Among them, crypto.getrandomvalues () can be used to generate more Secure Random numbers. It is a Cryptographically Secure Pseudo Random Number Generator, CSPRNG for short. In fact, CSPRNG does not generate truly random numbers, but it can pass some rigorous cryptographic tests and can be considered safe.

Crypto.randomuuid () is based on CSPRNG and can therefore be considered safe.

While crypto. RandomUUID () is in the CYPto object, it is not yet included in the Web Cryptography API and therefore is not a W3C standard.

Canvas color management

Currently, 2D Canvas only supports the old sRGB color gamut, but today’s screens and cameras have long supported a larger color gamut.

What is the gamut? Known in English as Color Gamut or Color Space, it is the range of colors that devices (monitors, projectors, printers) can express. The range of colors visible to the human eye is limited, and the range of colors that can be expressed by the device is a subset of the range of colors visible to the human eye. Different color gamut standards such as sRGB and Display P3 can also express different color ranges.

Chrome 92 supports the use of Display P3 gamut when creating 2D canvas, which will enhance the color restoration capability of 2D canvas.

canvas.getContext('2d', { colorSpace: "display-p3"});Copy the code

The color gamut of Display P3 is 25% larger than that of sRGB. When we compare the two, we can see that Display P3 is much brighter than sRGB. The difference is very clear:Photo credit:Get Started with Display P3

For graphics, video, design, games, maps, food, etc., color accuracy is important.

Some seemingly unrelated to the color of the application, if our application can not accurately restore the color of the object, will also affect the business. In most cases, the apparent difference between the buyer show and the seller show is due to the seller’s excessive photoshop, but it can also be due to the color not being accurately restored.

Web Bluetooth manufacturer data filter

Chrome started working on Web Bluetooth six years ago, but to this day, Web Bluetooth is not a W3C standard, and Safari and Firefox don’t support Web Bluetooth, which is a little embarrassing.

Chrome has single-handedly pushed forward a number of Web technology standards, but as you can see from Web Bluetooth, the process is hard and takes time and patience.

However, in order for the Web to have the same capabilities as native apps, Chrome won’t abandon Web Bluetooth.

Using Web Bluetooth, Web applications can also connect and control various Bluetooth devices such as colored lights, toy cars, leds, and drones. It’s interesting:

Video source: WebBluetooth demos for Bluetooth. Rocks

Chrome 92 adds the ability to filter Bluetooth devices by their manufacturer to Web Bluetooth. In this way, for Web applications that are specific to a particular vendor, you can show the user only the bluetooth devices from that vendor.

conclusion

This is the fourth post in the awesome Chrome series, and it’s been hard to keep up with the updates. On the one hand, I’m busy with work, and on the other hand, Chrome 92 doesn’t have a lot of content to write, and I’m not familiar with it, so it takes a lot of time to dig. But I keep writing anyway, because I learn something new every time.

When I’m blogging, I read a lot of references and take notes, so I spend more time reading than writing. If it is not for writing, I will not dig into a certain knowledge point, which is also the biggest benefit of writing. Input forces output, forcing myself to conduct deep learning.

For more authoritative and informative references, I will list them at the end of this article. This is not only to respect the author’s copyright, but also to facilitate themselves and readers to read relevant materials. Truly good content in a given topic is rare, and finding it requires a few Google tricks: accurately changing different search terms and recursively mining the original, most authoritative source.

In addition, I don’t write blogs in hours or days. I write long blogs in a month, so there are frequent changes and a record of changes throughout the writing process. This may seem exhausting, but it’s much easier to break down a large task into smaller tasks. In addition, every time I write, I will have some new discoveries and new inspirations, which is also very helpful for writing.

Welcome to pay attention to the public number of Hanyan Talk, pay attention to the “great Chrome browser” series of blogs, with me to witness the big front of the stars of the sea!

The resources

  • The Great Chrome browser (1) : Chrome 89 starts the Internet of Things for Web applications
  • Great Chrome browser (2) : Chrome 90 will use HTTPS by default, making the Web more secure
  • Great Chrome (3) : Chrome 91 supports WebAssembly SIMD, plusWeb applications in AI and other fields
  • Chrome 92: Web Apps as File Handlers, New JavaScript Features, and More
  • [V8 release v9.2] (blog.chromium.org/2021/06/chr…).
  • [at method for relative indexing] (blog.chromium.org/2021/06/chr…).
  • [crypto randomUUID is three times faster – uuid. V4] (blog.chromium.org/2021/06/chr…).
  • [Overtaking Firefox Profiles: Vulnerabilities in Firefox for Android] (blog.chromium.org/2021/06/chr…).
  • [TIFU by using Math. The random ()] (blog.chromium.org/2021/06/chr…).
  • [A Brief History of the Random Numbers] (blog.chromium.org/2021/06/chr…).
  • [[V8 Deep Dives] Random Thoughts on Math. The Random ()] (blog.chromium.org/2021/06/chr…).
  • Art of Computer Programming, Volume 2: Seminumerical Algorithms, 3rd Edition Chapter 3: Random Numbers
  • [Securing JavaScript applications have the Web Cryptography API] (blog.chromium.org/2021/06/chr…).
  • [Update on Web Cryptography] (blog.chromium.org/2021/06/chr…).
  • Get Started with Display P3
  • Improving Color on the Web
  • Pixar in a Box: Color science
  • An Introduction To WebBluetooth
  • WebBluetooth demos for Bluetooth.rocks

recruitment

Alibaba business Platform Division is recruiting P6 and above front-end leaders for a long time to participate in the construction of the most cutting-edge Ali front-end ecosystem and promote the development of industry technology

Welcome to follow my wechat official account, HanyanTalk.