7月20日正式发布的Chrome 92,带来了哪些有意思的新特性呢?
背景十多年来,Web技术突飞猛进,其中Chrome功不可没,了解Chrome可以帮助我们理解整个行业的发展趋势。
TL;TR
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 92可以写的内容确实不多,我也不是很熟悉,需要很多时间挖掘。但是,不管怎样,我还是会坚持写下去,因为每次都能学到一些新的东西。
写博客的过程中,我会阅读大量的参考资料,并且记录阅读笔记,所以我阅读的时间是远远大于写作的时间的。如果不是为了写作,我并不会对某一个知识点进行深究,这也是写作最大的好处,通过输入倒逼输出,倒逼自己进行深度学习。
对于比较权威,内容很有启发的参考资料,我都会列到文章后面。这样既是对作者版权的尊重,也是方便自己和读者去阅读相关资料。某个知识点真正优质的内容是非常稀缺的,要找到这些资料是需要一些Google技巧的:准确变换不同的搜索关键词,不断递归地挖掘最原始、最权威的第一手资料。
参考资料Chrome 89开启Web应用的物联网时代Chrome 90将默认使用HTTPS,Web更安全了Chrome 91支持WebAssembly SIMD,加Web在AI等领域的应用Chrome 92: Web Apps as File Handlers, New JavaScript Features, and MoreV8 release v9.2at method for relative indexingcrypto.randomUUID is three times faster uuid.v4Overtaking Firefox Profiles: Vulnerabilities in Firefox for AndroidTIFU 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 NumbersSecuring JavaScript applications with the Web Cryptography APIUpdate on Web CryptographyGet Started with Display P3Improving Color on the WebPixar in a Box: Color scienceAn Introduction To WebBluetoothWebBluetooth demos for Bluetooth.rocks组织是否使用最佳实践进行分析?四位行业专家对数据分析的主要趋势进行了讨论。 ...
公司简介 图森未来(TuSimple)成立于2015年,是一家专注于L4级无人驾驶卡车技术...
COVID-19产生的大量数据正在为企业创造新的增长机会,但拥有合适的基础设施对于...
随着互联网的发展进入下半场,数据的时效性对企业的精细化运营越来越重要, 商场...
最近不少读者都留言说博客中的代码越来越反哺归真 但讨论的问题反倒越来越高大上...
.site域名 注册一年多少钱?. site域名 实际注册价格,可能会发现在不同时间注册...
本文转载自微信公众号「码农读书」,作者码农读书 。转载本文请联系码农读书公众...
百度云代理有哪些优势?百度云代理免费?最近TOP云(zuntop.com)科技小编收到不...
vue-pdf实现pdf预览、分页、下载、打印 vue-pdf-app(功能完整内嵌组件): http...
想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://...