了不起的Chrome浏览器（4）：Chrome 92新增at和randomUUID方法，Canvas支持Display P3色域

7月20日正式发布的Chrome 92，带来了哪些有意思的新特性呢？

背景

十多年来，Web技术突飞猛进，其中Chrome功不可没，了解Chrome可以帮助我们理解整个行业的发展趋势。

因此，我将以《了不起的Chrome浏览器》为题，对Chrome的每一个版本的重要特性进行详细解读，同时分享一些自己的一些思考：

通过专注于Chrome的写作，既可以可以提高我的专业能力，也可以提高个人影响力。我的目标是在2025年出版一本关于Chrome的书，毕竟出版自己的书每一个写作者最高的追求。

我是寒雁，一个热爱写代码和写文章的程序员，欢迎关注我的微信公众号寒雁Talk。

TL;TR

• Chrome 92最大的亮点是什么？说实话，Chrome92并没有什么特别大的亮点，不过Array.prototype.at()还是挺实用的

• Chrome 92是哪天发布的？2021-07-20

• Chrome 92更新了多少个特性？14个，具体有哪些特性可以查看Chrome Platform Status

• Chrome 92将使用哪个版本的V8引擎？9.2

• 我感兴趣的新特性依次有哪些？

• Array.prototype.at()

• crypto.randomUUID()

• Canvas color management

• Web Bluetooth manufacturer data filter

详细解读

Array.prototype.at()

想必大家都写过这样的代码，使用数组长度减1来获取过数组的最后一个元素：

const A = [1,2,3,4]; 
console.log(A[A.length - 1]);

作为一个有代码洁癖的人，这样的写法冗长而奇怪。

现在好了，Chrome 92支持Array.prototype.at()了：

const A = [1,2,3,4]; 
console.log(A.at(-1));

代码少了5个字符，可读性也提高了很多，一举两得!

另外，除了Array，String与TypedArray也支持了at方法。

at方法对应的ECMAScript提案proposal-relative-indexing-method已经处于stage 3，目测最快明年将会纳入ECMAScript规范。

crypto.randomUUID()

日常开发中，我们经常会需要生成唯一ID，例如给每个用户生成唯一ID。

npm包uuid的周下载量高达4000万+，我在自己的代码里也搜到了uuid模块：

Chrome 92新增了crypto.randomUUID()方法，用于生成符合RFC 4122 version 4规范的唯一ID。

可惜的是，由于Firefox、Safari等其他浏览器没有支持，因此前端项目中将依然需要使用uuid模块。

不过，Node.js 14.17.0已经支持了crypto.randomUUID()方法，而生成唯一ID通常是在后端进行，因此目测uuid模块的使用量将会有所降低。使用官方提供的API更加安全，且性能更好。

要保证随机生成的UUID的唯一性和安全性，是一个看起来简单，但实际非常复杂的问题。图灵奖得主Donald Knuth在他的鸿篇巨制《The Art of Computer Programming》中花了一个章节来讨论随机数：

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

我们所熟悉的Math.random()其实名不副实，并不随机，它是一个伪随机数生成器（Pseudo Random Number Generator，简称PRNG），当我们指定同一个random_seed启动时，它生成的随机数序列是一样的！

// 示例代码来源：[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 v14.17.3.
Type ".help" for more information.
> Math.random()
0.5254990606499601
> Math.random()
0.963056226312738

node --random_seed=42
Welcome to Node.js v14.17.3.
Type ".help" for more information.
> Math.random()
0.5254990606499601
> Math.random()
0.963056226312738

也就是说，只要黑客获取了random_seed，就能预测Math.random()所返回的"随机序列"，是不是有点可怕？

当然，获取random_seed并不是一件简单的事情，不过并非没有可能，因为random_seed不是随机的，而是依赖于一些内部状态，比如浏览器的启动时间、某个变量的虚拟内存地址，这些内部状态是有规律可循的。2014年，Andriod版的Firefox就曾被人破解过Math.random()。

因此，在对安全性要求比较高的场景中，不要使用Math.random()。CVE中有多个安全漏洞是与Math.random()相关。

为了满足大家对于更加安全的加密API的需求，社区提供了很多解决方案，其中最出名的为CryptoJS。但是，对于加密这种CPU密集型应用，纯JavaScript的方案存在比较严重的性能问题，且不够安全。

因此，2017年，W3C发布了Web Cryptography API，提供更加安全、性能更好的加密API。其中，crypto.getRandomValues()可以用于生成更加安全的随机数，它是密码学安全伪随机数生成器（Cryptographically Secure Pseudo Random Number Generator，简称CSPRNG）。其实，CSPRNG也不能生成真正的随机数，只是它可以通过一些严格的密码学测试，可以认为是安全的。

crypto.randomUUID()是基于CSPRNG的，因此也可以认为是安全的。

crypto.randomUUID()虽然放在cypto对象中，但是它还并未被纳入Web Cryptography API，因此还不是W3C标准。

Canvas color management

目前，2D canvas仅支持陈旧的sRGB色域，但是现在的屏幕和相机早就支持更大的色域了。

色域是什么呢？它的英文名是Color Gamut或者Color Space，是设备（显示器、投影仪、打印机）可以表达的颜色范围。人眼可见的颜色范围是有限的，而设备能表达的颜色范围是人眼可见的颜色范围的子集，而不同色域标准比如sRGB和Display P3能表达的颜色范围也不一样。

Chrome 92支持在创建2D canvas时，使用Display P3色域，这将增强2D canvas的颜色还原能力。

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

Display P3的色域比sRGB的色域大25%，当我们对比两者时，会发现Display P3要比sRGB明亮很多，区别非常明显：

图片来源：Get Started with Display P3

对于图像、视频、设计、游戏、地图、外卖、电商等应用，准确还原颜色的重要性不言而喻。

大多数情况下，买家秀和卖家秀的明显差异是由于卖家过度PS导致的，但是也有可能是颜色没有得到准确还原导致的。

Web Bluetooth manufacturer data filter

早在6年前，Chrome就开始开发Web Bluetooth了，不过直到今天，Web Bluetooth也没有成为W3C标准，Safari和Firefox也没有支持Web Bluetooth，这就有点尴尬了。

Chrome以一己之力推动了众多Web技术标准的进步，但是从Web Bluetooth也可以看出，其过程还是比较艰辛的，需要时间和耐心。

不过，为了让Web可以获得原生应用一样的能力，Chrome也不会放弃Web Bluetooth。

使用Web Bluetooth，Web应用也可以连接并控制各种蓝牙设备，比如彩灯、玩具车、LED、无人机，还是很有意思的：

视频来源：WebBluetooth demos for Bluetooth.rocks

Chrome 92为Web Bluetooth新增了按照蓝牙设备的制造商来过滤蓝牙设备的能力。这样，对于一些针对特定产商的Web应用，就可以只给用户展示对应产商的蓝牙设备。

总结

本篇是《了不起的Chrome浏览器》的第4篇，坚持更新这个系列的博客还是挺难的，一方面工作太忙了，另一方面Chrome 92可以写的内容确实不多，我也不是很熟悉，需要很多时间挖掘。但是，不管怎样，我还是会坚持写下去，因为每次都能学到一些新的东西。

写博客的过程中，我会阅读大量的参考资料，并且记录阅读笔记，所以我阅读的时间是远远大于写作的时间的。如果不是为了写作，我并不会对某一个知识点进行深究，这也是写作最大的好处，通过输入倒逼输出，倒逼自己进行深度学习。

对于比较权威，内容很有启发的参考资料，我都会列到文章后面。这样既是对作者版权的尊重，也是方便自己和读者去阅读相关资料。某个知识点真正优质的内容是非常稀缺的，要找到这些资料是需要一些Google技巧的：准确变换不同的搜索关键词，不断递归地挖掘最原始、最权威的第一手资料。

另外，我写博客都不是几个小时或者几天时间写完的，长篇的博客写作时间长达一个月，所以改动会很频繁，整个写作过程语雀都会有修改记录。这样写看起来很累，但是其实是把一个大的任务拆分成了一个个小任务，反而轻松很多。另外，每一次写都会有一些新的发现、新的灵感，这对于写作也是非常有帮助的。

欢迎关注寒雁Talk公众号，关注《了不起的Chrome浏览器》系列博客，与我一起见证大前端的星辰大海！

参考资料

• Chrome 92: Web Apps as File Handlers, New JavaScript Features, and More

• V8 release v9.2

• at method for relative indexing

• crypto.randomUUID is three times faster uuid.v4

• Overtaking Firefox Profiles: Vulnerabilities in Firefox for Android

• TIFU by using Math.random()

• A Brief History of Random Numbers

• [V8 Deep Dives] Random Thoughts on Math.random()

• 《Art of Computer Programming, Volume 2: Seminumerical Algorithms, 3rd Edition》Chapter 3: Random Numbers

• Securing JavaScript applications with the Web Cryptography API

• Update on Web Cryptography

• 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

招聘

阿里巴巴业务平台事业部长期招聘P6及以上前端大佬，参与建设最前沿的阿里前端生态系统，推动行业技术发展，内推地址：[e-mail]

欢迎大家关注我的微信公众号寒雁Talk。