了不起的Chrome浏览器(4):Chrome 92新增at和randomUUID方法,Canvas支持Display P3色域

avatar
大前端 @阿里巴巴

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

背景

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

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

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

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

TL;TR

详细解读

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模块: uuid.jpeg

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明亮很多,区别非常明显: sRGB_vs_Display P3jpg.jpg 图片来源: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浏览器》系列博客,与我一起见证大前端的星辰大海!

参考资料

招聘

阿里巴巴业务平台事业部长期招聘P6及以上前端大佬,参与建设最前沿的阿里前端生态系统,推动行业技术发展,内推地址:hanyan.lk@alibaba-inc.com

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