了不起的Chrome浏览器(6):Chrome 94开始WebGPU试用,Web的图像渲染及机器学能力更强了
9月21日正式发布的Chrome 94,带来了哪些有意思的新特性呢?
背景
十多年来,Web技术突飞猛进,其中Chrome功不可没,了解Chrome可以帮助我们理解前端行业的发展趋势。
因此,我将以《了不起的Chrome浏览器》为题,对Chrome的每一个版本的重要特性进行详细解读,同时分享一些自己的一些思考:
- 了不起的Chrome浏览器(1):Chrome 89开启Web应用的物联网时代
- 了不起的Chrome浏览器(2):Chrome 90将默认使用HTTPS,Web更安全了
- 了不起的Chrome浏览器(3):Chrome 91支持WebAssembly SIMD,加速Web在AI等领域的应用
- 了不起的Chrome浏览器(4):Chrome 92新增at和randomUUID方法,Canvas支持Display P3色域
- 了不起的Chrome浏览器(5):Chrome 93支持Error Cause,我国首个ECMAScript提案可以用了
通过专注于Chrome的写作,既可以可以提高我的专业能力,也可以提高个人影响力。我的长期目标是在2025年出版一本关于Chrome的书,毕竟出版自己的书每一个写作者最高的追求。
我是寒雁,一个热爱写代码和写文章的程序员,欢迎关注我的微信公众号寒雁Talk。
TL;TR
- Chrome 94最大的亮点是什么?全村最靓的仔无疑是WebGPU,它为Web应用提供了直接使用GPU的能力,可以用于加速3D渲染以及数据并行计算,为Web应用在游戏以及人工智能领域打开了另外一扇窗。WebGPU得到了各个主流浏览器的支持,因此成为W3C标准只是时间问题。不过,Chrome 94只是开始试用(origin trial),正式发布要等到Chrome 98,时间大概是明年2月份。
- Chrome 94是哪天发布的?2021-09-21
- Chrome 94更新了多少个特性?13个,具体有哪些特性可以查看Chrome Platform Status
- Chrome 94将使用哪个版本的V8引擎?v9.4
- 我感兴趣的正式特性有哪些?
- WebCodecs
- Scheduling APIs: Prioritized scheduler.postTask
- Idle Detection API
- JS Self-Profiling API
- Canvas color management,这个特性我在《了不起的Chrome浏览器(4):Chrome 92新增at和randomUUID方法,Canvas支持Display P3色域》博客中介绍了,不过是我搞错了,它并不是Chrome 92的特性
- 我感兴趣的试用(origin trial)特性有哪些?
- WebGPU
- 103 Early Hints for Navigation
详细解读
WebGPU
Chrome 94新增了试用特性WebGPU,提供了使用GPU的Web API,可以用于图像渲染(比如3D渲染)以及进行数据并行计算(比如机器学习)。
WebGPU于Chrome 94开始试用,预计将于Chrome 98正式发布,时间大概是明年2月份。如此重要的特性,可能大家还没来得及学会怎么使用,只试用3个月时间就正式发布,似乎有点太仓促了。
WebGPU是WebGL的继承者,它们的目标类似,不过WebGPU提供了更加底层的GPU能力。因此,WebGPU的图像渲染能力更强,性能更好,更易用,也更加适用于数据并行计算以及机器学习。
根据Safari的测试结果,WebGPU的性能在各种设备上都远高于WebGL:
图片来源:WebGPU and WSL in Safari
前端机器学习库TensorFlow.js也测试了一下WebGPU,结果发现WebGPU的性能更好,但是差距与WebGL并不是特别明显,有待进一步研究:
图片来源:Fast client-side ML with TensorFlow.js
如下图,WebGPU是基于各种GPU API(例如DirectX 12、Metal、Vulkan)实现的。
图片来源:Access modern GPU features with WebGPU
WebGPU提供的是底层API,非常强大,同时也非常复杂。使用WebGPU实现向量乘法的代码长达200行,目测社区将会出现第三方库封装WebGPU,提供更简单的使用方式用于不同的应用场景。
根据测试,使用WebGPU进行向量乘法计算时,随着向量长度增加,其性能远优于使用CPU:
图片来源:Get started with GPU Compute on the web
WebCodecs
Chrome 94正式发布了WebCodecs,使得我们可以直接使用Chrome所提供的图像、音频以及视频的编码/解码能力。
Codec为coder和decoder合成词,即编解码器,它可以是硬件,也可以是软件,用于编码以及解码特定的数据格式,比如MP3/AAC/VP9/H264等。
浏览器器支持各种格式的图片、音频以及视频,但是之前我们并不能直接调用相应的编解码器。WebCodecs就是为了解决这个问题,让Web开发者可以直接使用各种编解码器。
Scheduling APIs: Prioritized scheduler.postTask
Chrome 94正式发布了Scheduling APIs: Prioritized scheduler.postTask特性:
- 新增了scheduler.postTask方法,支持根据优先级调度任务,并支持指定延时调度任务;
- 定义了3个任务优先级,从高到低依次为:user-blocking、user-visible、background;
- 新增了TaskController,支持动态修改任务优先级以及取消任务;
当我们用Lighthouse检测页面时,其中一个检测项为"Minimize main-thread work",它将主线程的工作分为了下图所示的7个分类,可知主线程所承担的任务异常繁重:
用一个最极端的例子来举例,如果JavaScript代码陷入死循环,则页面将基本上完全卡顿,无法响应用户操作。感兴趣的话,可以在控制台执行以下代码:
while (true) {console.log("hello, Chrome!");
}
Aribnb的工程师使用Scheduling APIs实现了图片预下载:
- 当用户滑动到第2个搜索结果时,提前下载了第2张图片;
- 当用户滑动到第2个搜索结果的第2张图片时,依次提前下载了第3、4、5张照片;
- 我们可以在Network控制台中看到4个图片下载请求,根据瀑布图(Waterfall),4个请求是按照时间顺序依次请求的;
图片来源:Building a Faster Web Experience with the postTask
Scheduler
Idle Detection API
Chrome 94正式发布了Idle Detection API,用于检查用户是否活跃,其判断依据是用户是否使用键盘、鼠标、触摸屏等。
个人也反对这个特性Idle Detection API(虽然我的反对没啥用啊哈哈),它涉嫌侵犯了用户隐私,可以用于追踪用户的日常行为习惯,可能会用于比较变态的场景。
为了保护用户的隐私和安全,调用Idle Detection API需要得到用户的授权:
// 获取Idle Detection API授权
const state = await IdleDetector.requestPermission();
if (state !== "granted") {// Need to request permission first.return console.log("Idle detection permission not granted.");
}
Google工程师提供了一个非常直观的Demo应用Ephemeral Canvas,我们可以用它画图,当我们60秒内不操作电脑时,所画的图形会自动被擦除掉。
JS Self-Profiling API
Chrome 94正式发布了JS Self-Profiling API,用于获取JavaScript执行时的性能数据。
JS Self-Profiling API为WICG提案,由Facebook的工程师负责,于Chrome 78开始试用,Chrome 94正式发布。
Canvas color management
Chrome 94支持在创建2D canvas时,使用Display P3色域,这将增强2D canvas的颜色还原能力。
canvas.getContext('2d', { colorSpace: "display-p3"} );
之前,2D canvas仅支持陈旧的sRGB色域,但是现在的屏幕和相机早就支持更大的色域了。
Display P3的色域比sRGB的色域大25%,当我们对比两者时,会发现Display P3要比sRGB明亮很多,区别非常明显:
图片来源:Get Started with Display P3
对于图像、视频、设计、游戏、地图、美食等应用,颜色准确性的重要性不言而喻。
一些貌似与颜色无关的应用,如果我们的应用不能准确还原物体的颜色,也是会影响业务的。大多数情况下,买家秀和卖家秀的明显差异是由于卖家过度PS导致的,但是也有可能是颜色没有得到准确还原导致的。
103 Early Hints for Navigation
Chrome 94新增了试用特性103 Early Hints for Navigation。
图片来源:Towards ever faster websites with early hints and
priority hints
图片来源:Towards ever faster websites with early hints and
priority hints
图片来源:Towards ever faster websites with early hints and
priority hints
显然,第3种情况下,整体的响应时间要快很多,对网络的利用率也提高了。我们不妨看一下第3种情况下,具体的请求过程。
GET / HTTP/1.1
Host: example.com
服务端返回103,Header中包含preload信息,这时浏览器就可以发起style.css以及script.js请求了:
HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload; as=style
Link: </script.js>; rel=preload; as=script
服务端返回200,Header中包含preload信息,并且html文本中也包含所需要的css以及js文件(这不是废话吗?)。
HTTP/1.1 200 OK
Date: Fri, 26 May 2017 10:02:11 GMT
Content-Length: 1234
Content-Type: text/html; charset=utf-8
Link: </style.css>; rel=preload; as=style
Link: </script.js>; rel=preload; as=script<!doctype html>
[... rest of the response body is omitted from the example ...]
总结
从Chrome 94开始,Chrome将加快其更新频率,由每6周更新一个版本改为每4周更新一个版本。对于一个全球拥有26亿用户的产品,加快发布频率可以为用户提供更好体验,同时也会为研发团队带来巨大的挑战。Chrome能够一直保持稳定的迭代频率,同时提供保持透明,提供丰富的文档,这为Chrome生态系统内的开发者提供了便利,这一点非常值得我们学习。
本篇是《了不起的Chrome浏览器》的第6篇,创造了个人写专题系列博客的记录,之前的《JavaScript深入浅出》系列只写了5篇。Chrome加快更新频率之后,我也必须调整自己的写作计划,与Chrome的版本迭代保持同步。
细心的同学可能会发现,我这篇博客有一些细微的不同点,以后我也会坚持这样做:
- 开始介绍每一个Chrome特性所对应的标准提案,最顶级的技术公司掌握技术标准,了解这些提案也非常有必要。这些提案来自不同的标准化组织,比如W3C、WICG、IETF,目前来看,Chrome掌握了各种Web技术标准的主导权,这事有利有弊;
- 开始介绍Safari、Firefox、Edge以及其他大公司对于各个提案的态度以及背后的商业原因,技术可以推动商业进步,商业可以影响技术发展,两者是无法分开的,如果只了解技术,而不理解背后的商业逻辑,也是不够的;
- 开始对Chrome的某些做法表达负面看法,正如我这个系列博客的标题,整体上我对Chrome是持正面态度,因为它确实彻底改变了前端生态系统,改变了我所在的行业,影响了我个人的职业发展,但是,这并不意味着我对Chrome所做的所有事情都是支持的,我会要求自己更加客观一点;
- 开始介绍试用(origin trial)特性,Chrome的每个版本都会发布一些试用特性,而这些试用特性往往比正式特性更重要,不容错过,这样也可以让大家第一时间了解Web技术的最新发展趋势;
本文介绍7个特性,其中6个特性都涉及到新的Web技术标准,可见Chrome是真的致力于Make Web Gread Again(MWGA),Google程序员为了OKR也是挺拼的。相比之下,Firefox和Safari看起来要佛系很多,这与各个公司的商业模式以及投入程度有关。不过,Chrome在掌握Web技术的主导权之后,有点为所欲为了,有些特性不顾同行的反对,推进速度也有点太快了,这就不太妙了。Web与其他平台不一样的地方在于,它是开放的,是属于所有人的,也有向后兼容的问题,因此Web技术标准不能一家说了算,也不能太随意,否则对Web技术的长远发展并不利。可惜的是,现在Web技术标准和国内的程序员没有什么太大关系,我们无从置喙,只能当吃瓜群众。。。等哪天国产浏览器拥有更大的话语权再说吧。
还有一点,对于每一个特性,我都花了大量时间阅读各种资料来理解其原理,然后根据个人理解来写的,很多特性我也没有时间去写代码测试,因此我的说法难免有错误的地方,欢迎各位大佬批评指正。感兴趣的同学可以添加我的个人微信交流:KiwenLau。
欢迎关注寒雁Talk公众号,关注《了不起的Chrome浏览器》系列博客,与我一起见证大前端的星辰大海!
参考资料
- 了不起的Chrome浏览器(1):Chrome 89开启Web应用的物联网时代
- 了不起的Chrome浏览器(2):Chrome 90将默认使用HTTPS,Web更安全了
- 了不起的Chrome浏览器(3):Chrome 91支持WebAssembly SIMD,加Web在AI等领域的应用
- 了不起的Chrome浏览器(4):Chrome 92新增at和randomUUID方法,Canvas支持Display P3色域
- 了不起的Chrome浏览器(5):Chrome 93支持Error Cause,我国首个ECMAScript提案可以用了
- Chrome 94 Beta: WebCodecs, WebGPU, Scheduling, and More
- New in Chrome 94: Color management for canvas, WebCodecs, WebGPU, and more!
- V8 release v9.4
- Intent to Ship: Scheduling APIs: Prioritized scheduler.postTask
- Building a Faster Web Experience with the postTask Scheduler
- Zoom on Web: getting connected with advanced web technology
- Intent to Ship: WebCodecs
- Chrome 93 Breaking Changes for Web Meeting/Video SDK
- Benefits of using ImageDecoder when rendering using WebCanvas in Docs
- Intent to Ship: VirtualKeyboard API
- Full control with the VirtualKeyboard API
- HTTP/2 Push is Being Removed, let us discuss
- Intent to Remove: HTTP/2 and gQUIC server push
- Detect inactive users with the Idle Detection API
- Get Started with Display P3
- Improving Color on the Web
- Pixar in a Box: Color science
- Access modern GPU features with WebGPU
- Fast client-side ML with TensorFlow.js
- Get started with GPU Compute on the web
- RFC 8297: 103 Early Hints
- Towards ever faster websites with early hints and priority hints
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了40亿+错误事件,付费客户有阳光保险、达令家、核桃编程、荔枝FM、微脉等众多品牌企业。
了不起的Chrome浏览器(6):Chrome 94开始WebGPU试用,Web的图像渲染及机器学能力更强了相关推荐
- Chrome浏览器(Chrome极速浏览器)快捷键
谷歌浏览器神器(告别鼠标):想摆脱鼠标吗,从这开始(vimium快捷键) 窗口 Ctrl+N 打开新窗口 Ctrl+Shift+N 在隐身模式下打开新窗口 Ctrl+O,然后选择文件 在谷歌浏览器中打 ...
- 怎么在Chrome浏览器安装chrome应用商店外的第三方扩展程序?
转载自品略图书馆 http://www.pinlue.com/article/2020/03/2813/0310060784512.html 近日 Google 的 Chrome 浏览器宣布从最新的 ...
- Chrome浏览器及Chrome内核浏览器下载时使用p2p提速
下载时使用p2p提速 Chrome版本:102.0.5005.115 地址栏输入:chrome://flags/#enable-parallel-downloading 设置为 Enabled 重启浏 ...
- 最新版chrome浏览器安装Chrome插件时出现“CRX-HEADER-INVALID“解决方法
今天在介绍Natasha插件的时候还是按照以前的chrome插件离线安装方法安装插件,却遇到了"CRX-INVALID-HEAD"问题,现已解决,故整理成文分享给大家. Chrom ...
- Chrome浏览器插件Postman用法简介-Http请求模拟工具
在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,拿到接口后肯定都得提前测试一下,这样的话就非常需要有一个比较给力的Http请求模拟工具,现在流行的这种工具也挺多的,像火狐浏览器插件 ...
- Chrome浏览器扩展开发系列之一:初识Google Chrome扩展
1. Google Chrome扩展简介 Google Chrome扩展是一种软件,以增强Chrome浏览器的功能. Google Chrome扩展使用HTML.JavaScript.CS ...
- 李彦宏:百度今年全员涨薪,比去年还多;谷歌暂停Chrome浏览器更新;Eclipse 4.15发布 | 极客头条...
整理 | 郭芮 头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦 ...
- Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
- 百度云网盘不限速下载之Google Chrome浏览器+SwitchyOmega插件
众所周知,百度云的用户量越来越多啦,那么随之而来的问题也来了,刚开始用户量不是特别多的时候下载速度是100多kb/s,然而,现在呢???10几Kb/s!!!慢如蜗牛的速度啊. pandownload已 ...
最新文章
- oracle decode 01427,(oracle)在DECODE中的SELECT(返回多行)
- 90后售楼人员的肺腑之言:再便宜你也不能买的房子(转)
- 图解Linux命令实例
- [PSA]-PSA Certified简介
- 怎么查询交通银行卡的支付卡号?
- python ctypes模块安装_ctypes模块扩展python
- ITK:向索引添加偏移量
- 5G 背面:物联网的变局!
- CSS-返回顶部代码
- Anaconda下载及安装(图文)
- 用ffmpeg将mp3转为wav
- 简述多媒体计算机的特点,多媒体课件的特点和作用
- 访问一个网页的全过程详解
- 用夜神安卓模拟器做Android开发
- Mysql-如何建表更符合业务
- Go语言if条件判断
- 递推数列【清华大学】
- Android使用drawBitmapMesh方法实现旗帜飞扬,舞动的图片效果
- 比尔盖茨、扎克伯格,造就最牛辍学生的哈佛究竟牛在哪里?
- Mysql基于binlog日志恢复数据
热门文章
- 图形化解决Ubuntu18.04、16.04无线网卡设置静态IP且能上网。笔记本ssh连接工控机,工控机利用有线网口接激光雷达等传感器、利用无线网口上网下载安装更新功能包
- CSUSTOJ 我爱吃烧烤 (状压dp)
- 微信小程序使用 setInterval 制作计时器后台延迟问题
- 一个完整小巧的Redux全家桶项目
- 小梅哥Xilinx FPGA学习笔记1——二选一多路器
- 数组三元数c语言程序,递增三元数组——第九届蓝桥杯C语言B组(省赛)第六题...
- 小猫爪:S32K3学习笔记04-S32K3之LCU
- 错误: Unknown class XXX in Interface Builder file
- Linux技巧--删除某列
- navicat8.0版本注册码,已试可用