Article / 文章中心

在过去的 2021 年,Chrome 的哪些变化最值得关注?

发布时间:2022-01-24 点击数:124

2008年9月2日,Chrome浏览器总算发布了,长达2年的隐秘开发没有白搭,出道即巅峰:

  • 选用多进程架构,避免某个Tab崩溃导致整个浏览器崩溃
  • 开发了全新的V8引擎,将JavaScript的履行速度提高了1个数量级
  • 规划了十分简洁的用户界面,十分重视用户体验,比方可拖拽的Tab、支撑搜索的地址栏、默许隐藏书签栏、隐身模式等

当年主管Chrome项目的Sundar Pichai,在发布Chrome时是这样说的:

We hope to collaborate with the entire community to help drive the web forward.

这种吹牛的话一般没人信任,不过Chrome真的做到了,而Pichai也由于领导Chrome项目所展现的出色的远见和才能,后来出任谷歌CEO,走向人生巅峰

Chrome不只市占率第一,而且直接以及直接推进了一系列Web技能的前进:V8、ECMASCript 2015、HTTP/2、HTTP/3、QUIC、HTTPS、WebAssembly、WebGPU。。。

并不夸大地说,了解Chrome的开展能够协助咱们了解整个前端职业的开展趋势,由于浏览器的才能便是前端职业的鸿沟地点,而主要推进浏览器前进的便是Chrome。

那么,2021年,Chrome有哪些值得重视的变化呢?



Chrome 2021


2021年,Chrome一共发布了9个版别,从Chrome 88到Chrome96:

日期 Chrome版别 亮点
2021-01-19 Chrome 88 移除Flash
2021-03-02 Chrome 89 WebNFC
2021-04-13 Chrome 90 AV1 Encoder
2021-05-25 Chrome 91 WebAssembly SIMD
2021-07-20 Chrome 92
2021-08-31 Chrome 93 Error Cause
2021-09-21 Chrome 94 WebGPU
2021-10-19 Chrome 95 WebAssembly Exception Handling
2021-11-16 Chrome 96 WebAssembly Reference Types

我是从Chrome 89开端写《了不得的Chrome浏览器》博客的,所以错过了Chrome 88。别的,Chrome 92实在没有发现什么特别大亮点,大概是其他版别太卷了。。。全体来看,Chrome在2021年的表现相当让人惊艳。

2021年,Flash停服了。Chrome也彻底告别了Flash,结束了一代人关于Flash游戏、动画、视频的记忆,比方开心农场、QQ空间。据传,此事还导致某地铁路系统呈现故障,相当为难。Flash弥补了前期Web才能的缺乏,可是自身存在严峻的安全危险,跟着Web技能的敏捷前进,Flash早就没那么重要了。Adobe在2017年就给Flash宣判了死刑,这一天仍是来了。


image.png

image.gif图片来历:Goodbye Flash, goodbye FarmVille

2021年,WebAssembly更强了。Chrome相继支撑WebAssembly  SIMD、WebAssemblyException Handling以及WebAssemblyReference  Types,这些都是十分重要的WebAssembly特性。大名鼎鼎的Photoshop总算迁移到了Web,是通过将C++编译为WebAssembly来完成的,其间WebAssembly  Exception Handling与WebAssembly SIMD发挥了重要的作用。


image.png

image.gif图片来历:Photoshop's journey to the web

2021年,QUIC协议发布了。这将有助于提高网络通信的功能、安全性以及灵活性。这是核算机网络开展的革命性里程碑,未来TCP将有可能会逐渐退出历史舞台(这个进程会应该比较长,乃至像IPv6相一起间拖很久)。作为发明者,Chrome是最早部署QUIC协议的浏览器,再一次用技能改动世界。

image.png

2021年,WebGPU要来了。Chrome   94开端了WebGPU试用,估计将于2022年上半年正式发布。WebGPU是WebGL的继承者,它们的方针相似,不过WebGPU供给了愈加底层的GPU才能。因而,WebGPU的图像渲染才能更强,功能更好,更易用,也愈加适用于数据并行核算以及机器学习。


Flash 停服了



亨利福特从前说过:

If I had asked people what they wanted, they would have said faster horses.

在马车时代,人们只会希望马车能跑得更快一点,而不会想到马车会被轿车代替。

相似的,尽管Flash也曾辉煌过很长一段时刻,可是依然仍是被时代扔掉了,2021年是它的结尾。

Flash在我国的高光时刻大概是全民偷菜?这个简单的游戏从前让企鹅赚得盆满钵满。

image.png图片来历:2021年1月1日,是Flash的葬礼日

我没玩过偷菜,可是我也曾用过QQ空间(暴雷年纪了)。那些杀马特的QQ空间,当年靠的便是Flash,把页面整的花里胡哨的。


image.png

image.gif图片来历:2021年1月1日,是Flash的葬礼日

对Flash怨念最深的莫过于乔布斯了,iPhone从一开端就不支撑Flash。乔帮主还亲身写了一篇文章Thoughts  on  Flash抨击Flash不安全、BUG多、关闭、费电、对触屏不友好,有理有据有节。从这篇文章也能看出来,乔帮主绝非不懂技能,反而技能视野还不错,对Flash存在的技能问题分析得十分到位,切中关键。与乔布斯、盖茨以及马斯克这些美国企业家相比,我国的互联网大佬其实大多都是技能出身,可是都不怎样聊技能,这大概是由于我国互联网过去的开展主要靠的是运用层以及商业模式的立异,而不是技能层面的立异

那么问题来了,是乔帮主封杀Flash导致Flash式微,仍是Flash自己缺点太多导致乔帮主不得不封杀Flash呢?我想更多是后者,人不自救,孰能救之。

当然,苹果并非没有私心,它更希望将开发者操控在苹果的生态系统中。苹果扯着HTML5的大旗封杀Flash,不过后来对Web技能远不如谷歌来的热心。

前期,Flash被用于播放视频、制造动画、展现广告等。后来,Web技能的不断前进,比方video标签、Canvas、WebGL、SVG,逐渐代替了Flash的作用,Flash也就失去了商场。

怀旧的人们大概会有些伤感,可是事实上,没有Flash之后的Web会愈加安全、愈加流通,这就愈加扎心了。。。


WebAssembly 更强了


2021年无疑是WebAssembly的大年。

在技能方面,Chrome相继支撑了WebAssembly SIMD、WebAssemblyException Handling以及WebAssemblyReference Types这3个重磅特性。

在运用方面,宇宙级图片处理东西Photoshop通过运用WebAssembly迁移到了Web,别的依据WebAssembly完成的规划东西Figma估值到达惊人的100亿美元,两者都证明了WebAssembly的巨大价值。

对WebAssembly感兴趣的同学,欢迎阅览我的博客《十年磨一剑,WebAssembly是怎样诞生的?》,了解WebAssembly的开展历史。


WebAssembly SIMD

Chrome 91默许开启了WebAssembly SIMD。

SIMD是Single Instruction Multiple Data的缩写,中文术语为“单指令多数据流”,顾名思义,便是能够运用单条指令一起处理多个数据。

SIMD是一种特殊的CPU指令,它能够完成数据层面的并行处理。如下图,当咱们需求对两个长度为4的数组做加法时,运用一般的指令,则需求履行4次一般加法指令;如果运用SIMD指令的话,则只需求履行1次向量加法即可:

image.gifimage.png

SIMD常用于视频、音频、图像、加密、动画、游戏、AI等需求处理很多数据的运用场景,能够极大地提高向量类型的数据处理功能。主流的CPU都有SIMD指令,比方x86的SSE、ARM的Neon。

WebAssembly SIMD为WebAssembly新增了一个变量类型v128及其一系列v128的运算符,这些运算符便是SIMD指令。别的,由名字可知v128类型的长度是固定的,为128比特。

SIMD的指令十分多,而且不同CPU的SIMD是不相同的,WebAssembly  SIMD只选取了各个CPU都支撑的部分最常用的SIMD指令。因而,能够将WebAssembly  SIMD了解为各个CPU的SIMD指令的子集,一起将各个CPU的SIMD指令进行了一层笼统和统一,开发者只需求学习WebAssembly  SIMD,而不需求了解底层CPU的SIMD。

image.png

现在,Emscripten仅支撑将WebAssembly SIMD指令编译为x86 SSE/AVX指令以及ARM Neon指令。

在核算机范畴,形似没有什么问题是用分层处理不了的,如果有的话,能够再分一层

现在,WebAssembly  SIMD这个提案现已进入WebAssembly提案流程的Phase 4(Standardize the  Feature),尚未彻底完成,不过离最终完成也只要1个Phase了,能够了解为基本完成了。V8(Chrome、Node.js)、Firefox以及Emscripten都现已完成了WebAssembly  SIMD。

Google Meet借助WebAssembly完成了视频的实时背景虚化以及背景代替,这样能够让参加线上会议的人把注意力集中在人而不是他地点的环境。对视频数据进行实时处理的话,对核算才能的要求十分高,运用WebAssembly SIMD使其功能提高了至少2倍。

image.png

2021年,Photoshop总算迁移到了Web,是通过将C++编译为WebAssembly来完成的,其间,WebAssembly SIMD发挥了重要的作用,将功能均匀提高了3到4倍,有些场景下乃至到达惊人的80到120倍。


WebAssembly Exception Handling

WebAssembly Exception Handling于Chrome 90开端试用,Chrome 95正式发布,为WebAssemly添加了反常处理语法,具体指令如下表所示:

Name Opcode Description
try 0x06 begins a block which can handle thrown exceptions
catch 0x07 begins the catch block of the try block
catch_all 0x19 begins the catch_all block of the try block
delegate 0x18 begins the delegate block of the try block
throw 0x08 Creates an exception defined by the tag and then throws it
rethrow 0x09 Pops the exnref on top of the stack and throws it

WebAssembly/exception-handling提案由Google的开发者负责,当前处于WebAssembly提案流程的Phase 3,而且得到了Firefox、Safari以及Edge的支撑,因而估计将会成为正式规范。

WebAssembly自诞生以来就没有反常处理语法,这是个挺大的问题。在浏览器环境下,WebAssemly的反常是通过JavaScript的try/catch来"模仿"的,这继承了Asm.js的处理方式。

依据JavaScript的WebAssembly反常处理方式如下图所示:

  • 左侧为WebAssembly伪代码,右侧为JavaScript胶水代码;
  • 依据右侧的JavaScript函数invoke_vi可知,WebAssembly模块的调用放在了JavaScript的try/catch句子中;
  • 依据右侧的JavaScript函数___cxa_throw可知,WebAssmebly的throw句子实际上是运用JavaScript的throw句子来模仿;
  • WebAssembly和JavaScript代码互相来回调用,这样生成的代码量添加了很多,一起降低了履行功能;

image.png

依据开端的测验成果,依据WebAssembly原生的反常处理方式,代码量降低了30%左右,一起功能提高了30%左右,这个成果能够说十分理想了,用更少的代码完成了更好的功能,用更少的代码完成了更好的功能。从原理上来讲,这个成果并不让人意外。不过,由于现在测验数据还十分少,因而WebAssembly Exception Handling的实在作用还有待于进一步验证。

Photoshop移到了Web的进程中,WebAssembly Exception Handling也十分重要,由于C++中的反常处理代码挺常见的。Photoshop也参与了WebAssembly Exception Handling规范的拟定进程。


WebAssembly Reference Types

Chrome 96正式发布了WebAssembly Reference Types,Reference Types即引用类型,用externref关键词表示。

之前,WebAssembly仅支撑32位及64位的整数和浮点数,这样使得处理复杂数据比方String和Object时十分费事。

以字符串为例,如果咱们需求从JavaScript传入一个字符串给WebAssembly函数运用,则需求这样处理:

  • 将字符串转换为整数(运用TextEncoder即可)
  • 将整数写入WebAssembly的内存空间(WebAssembly的内存空间是一个线性的数组空间)
  • 将整数数组的地址传给WebAssembly函数

尽管这些步骤由编译东西比方wasm-bindgen来处理,咱们不需求操心,可是这样做会生成很多胶水代码,损耗了编译和履行功能。

支撑Reference Types之后,WebAssembly也能够愉快地处理整数及浮点数之外的数据类型了

WebAssembly/reference-types提案现已被纳入WebAssembly规范,Firefox和Safari之前现已支撑了。WebAssembly  Reference Types使得其他WebAssembly提案成为可能,例如GC(Garbage collection)、Interface  Types以及type Imports等。

WebAssembly/reference-types提案的负责人是Andreas   Rossberg,他是Google前职工,参与了WebAssembly开端的规划,现在是WebAssembly中心规范的编辑。除了Reference  Types,Andreas Rossberg还负责了WebAssembly的很多其他十分重要的提案,比方GC(Garbage  collection)、Type Imports、Tail call等。


QUIC 协议发布了


2021年,QUIC协议成为IETF的RFC,它是新一代传输层网络协议,是HTTP/3协议的根底:

image.png

由上图可知,QUIC协议相当于一起承担了TCP、TLS以及HTTP/2的责任:

  • 供给相似于TCP的牢靠通信,处理丢包、拥塞等网络反常情况;
  • 依据TLS/1.3进行加密,保证通信的安全性,一起避免中心节点搅扰导致协议死板;
  • 供给相似于HTTP/2的多路复用才能,在网络传输层添加了流的概念,处理了TCP协议的头部阻塞问题;

TCP是一个巨大的网络协议,可是它有很多问题,其最大的问题是TCP协议现已死板了,基本没法改了。QUIC最大亮点不在于处理了TCP头部阻塞的问题或者供给1-RTT乃至0-RTT的衔接时长,而是一系列保障可部署性、更快地迭代、避免协议死板的规划,比方依据UDP、加密、脱离操作系统内核等。

QUIC协议的规划思维有点像React 17,在架构规划上简化未来的更新,保障长时刻开展。

对QUIC协议兴趣的同学,推荐看看QUIC 101视频以及The QUIC Transport Protocol: Design and Internet-Scale Deployment论文,讲得挺好的,我就赘述了。

总归,QUIC是一个斗胆、激进、奇妙的网络协议。正如一切其他改动世界的技能(比方WWW)相同,QUIC也是站在伟人的膀子上,吸取了数十年TCP协议的各种经验和教训。

QUIC协议在本年5月成为IETF的RFC,这是核算机网络开展的革命性里程碑,未来TCP将有可能会逐渐退出历史舞台(这个进程会应该比较长,乃至像IPv6相一起间拖很久)。也便是说,面试者们今后就不用了解3次握手和4次挥手了?

QUIC现已成为正式规范了,那HTTP/3成为正式规范也就指日可下了。


WebGPU 要来了


2021年,Chrome 94新增了试用特性WebGPU,供给了运用GPU的Web API,能够用于图像渲染(比方3D渲染)以及进行数据并行核算(比方机器学习)。

WebGPU关于Web来说无疑是一个革命性的特性,核算机职业本质上是通过摩尔定律(摩尔为CPU厂商Intlel的创始人之一)以及黄氏定律(黄氏即黄仁勋,GPU厂商英伟达的创始人,别号核弹教父)所推进的,芯片核算才能的提高为咱们带来历次核算机职业革命:个人电脑、互联网、移动互联网。当GPU的核算才能越来越强,越来越重要时,Web却不能很好地运用,这显然是不合理的。

WebGPU这个特性所对应的是WebGPU和WebGPU  Shading Language这2个提案,由Google、Mozilla以及Apple的工程师负责。WebGPU和WebGPU  Shading Language提案都是由W3C的GPU for the  Web工作组起草的,该工作组成立于2017,通过4年的尽力,WebGPU总算开端试用了,也是不容易啊!WebGPU提案定义了Web中运用GPU的API,WebGPU  Shading  Language(WGSL)提案定义了GPU代码的编程言语。WebGPU得到了4大浏览器巨子(Safari,Firefox、Edge)的支撑,因而WebGPU成为正式的W3C规范仅仅时刻问题。

WebGPU于Chrome 94开端试用,估计将于Chrome 102正式发布,时刻大概是下一年5月份。如此重要的特性,可能咱们还没来得及学会怎样运用,只试用8个月时刻就正式发布的话,似乎有点太仓促了。

WebGPU是WebGL的继承者,它们的方针相似,不过WebGPU供给了愈加底层的GPU才能。因而,WebGPU的图像渲染才能更强,功能更好,更易用,也愈加适用于数据并行核算以及机器学习。

依据Safari的测验成果,WebGPU的功能在各种设备上都远高于WebGL:


image.png

image.gif图片来历:WebGPU and WSL in Safari

前端机器学习库TensorFlow.js也测验了一下WebGPU,成果发现WebGPU的功能更好,可是差距与WebGL并不是特别明显,有待进一步研究:


image.png

image.gif图片来历:Fast client-side ML with TensorFlow.js

如下图,WebGPU是依据各种GPU API(例如DirectX 12、Metal、Vulkan)完成的。



image.png图片来历:Access modern GPU features with WebGPU

WebGPU供给的是底层API,十分强大,一起也十分复杂。运用WebGPU完成向量乘法的代码长达200行,目测社区将会呈现第三方库封装WebGPU,供给更简单的运用方式用于不同的运用场景。

依据测验,运用WebGPU进行向量乘法核算时,跟着向量长度添加,其功能远优于运用CPU:

image.png


图片来历:Get started with GPU Compute on the web


Chrome 番外篇


2021年,Chrome之外的前端娱乐圈也相当精彩,仍是有很其他值得重视的变化,我这里聊一些我比较重视的事情。

Chrome中心开发者之一Alex  Russell(本年换岗去Edge了)写了一篇十分详尽的檄文Progress Delayed Is Progress  Denied,责备Safari及其浏览器引擎Webkit严峻落后,App  Store要求一切浏览器在iOS端必须运用Webkit引擎的政策严峻制约了Web技能的开展,导致很多Web新技能无法即时运用到iOS端。出于保护App  Store的商业利益,Apple不太可能主导抛弃对iOS端Web技能的操控,竞争对手只能付诸法律手段。游戏厂商Epic  Game正在和Apple打官司,企图绕开App  Store,允许第三方付出,这事尽管和Webkit没啥联系,可是也算是在应战苹果关于iOS端的操控吧。是的,Web技能能否在移动端得到突破性的开展,取决于苹果是否放开对iOS端浏览器引擎的限制,这事得靠打官司,代码写得再好也没有,得靠律师的口才。谷歌大概率不会为了Chrome和苹果打官司,由于安卓面对同样的独占指控,那不是搬起石头砸自己的脚吗?所以这事现在是无解的。Chrome有时会不管Safari是否支撑就发布一些浏览器特性,也是不得已而为之吧,如果等Safari那黄花菜都凉了。

前端范畴的明星公司Vercel于11月取得1.5亿美元融资,估值25亿美元,前端结构居然这么值钱了?Vercel的愿景是"make  the Web. Faster."  这个愿景仍是很赞,幻想空间也很大。事实上,它们做的的确也不错,通过运用Rust将构建速度提高了5倍,让人印象深入,值得重视。另一个值得重视的公司是Figma,融资2亿美元,估值100亿美元。Figma不仅仅把Sketch搬到了Web,而是改动了规划办法以及规划流程,一起建立了规划师社区。Figma的商业模式仍是十分清晰,有对标的巨子Adobe,国内也有对标的公司比方蓝湖、稿定规划、即时规划等,前途无量。跟着Web技能的不断前进,大前端的商业价值越来越大,这关于从事这个职业的人无疑是有利的

Rust在Web生态系统中的运用也值得重视。Rust由Mozilla开发,而且常用于WebAssembly场景,算是血统十分纯粹的"前端言语"。明星项目Deno和Next.js都在用Rust,乃至Chrome也在试验用Rust开发。不过,Rust的学习曲线比较陡峭,现在仅运用于前端根底设施的开发,未来大概也会是这样,对这一块感兴趣的同学能够卷起来了!


总结


通过这一年的调查,我深入地体会到Chrome依然在饯别开端的理想:drive the web forward,添加浏览器的才能,提高浏览器的速度,拓展浏览器的运用场景,的确十分了不得!因而,咱们有理由信任,Chrome会越来越好,Web会越来越好。

当然,这个系列的博客,我仍是会继续写下去,继续分享自己关于Chrome的思考,欢迎重视。

才疏学浅,我所写的内容不免有错误之处,欢迎批评指正,感兴趣的同学能够微信沟通:KiwenLau


参考资料



  • 十年磨一剑,WebAssembly是怎样诞生的?
  • Chrome是怎样成功的?
  • 从 WebGL 到 WebGPU ,网页图形的全新时代
  • Google Chrome announcement
  • A fresh take on the browser
  • Inside Chrome: The Secret Project to Crush IE and Remake the Web
  • Adobe Flash is Dead: Here's What That Means
  • 2021年1月1日,是Flash的葬礼日
  • Thoughts on Flash
  • What makes Flash so insecure and what are the alternatives?
  • Fast, parallel applications with WebAssembly SIMD
  • Harnessing Your Hardware with SIMD
  • Zoom on Web: getting connected with advanced web technology
  • Supercharging the TensorFlow.js WebAssembly backend with SIMD and multi-threading
  • Background Features in Google Meet, Powered by Web ML
  • 15x Faster TypedArrays: Vector Addition in WebAssembly
  • WebAssembly Exception Handling: A Toolchain's Perspective
  • emscripten:C++ exceptions support
  • Strings in WebAssembly (Wasm)
  • Making WebAssembly better for Rust & for all languages
  • WebAssembly Reference Types in Wasmtime
  • WebAssembly Reference Types Implemented in wasmtime, Lets Wasm Modules Handle Complex Types
  • Photoshop's journey to the web
  • 浅入浅出WebGPU
  • Access modern GPU features with WebGPU
  • Fast client-side ML with TensorFlow.js
  • Get started with GPU Compute on the web
  • The QUIC Transport Protocol: Design and Internet-Scale Deployment
  • QUIC 101
  • QUIC is now RFC 9000
  • Rust and C++ interoperability
  • 《浪潮之巅(第四版)》第18章:应战者 - Google公司