关于chrome:了不起的Chrome浏览器Chrome-89开启Web应用的物联网时代

3 月初刚公布的 Chrome 89，带来了哪些有意思的新个性呢？

十多年来，Web 技术突飞猛进，这其中，Chrome 功绩是最大的，能够说没有之一。对于这一点，我在之前的博客中曾经阐述过了：

JavaScript 深入浅出第 5 课：Chrome 是如何胜利的？
第三方 cookie 马上就不让用了，互联网广告还怎么玩？

当初，Chrome 曾经不只是一个简略的浏览器，而是一个决定 Web 技术倒退方向的平台型产品，它的位置也就仅次于 Linux、iOS、Andirod 和 Windows 吧。

重要的是，Chrome 并没有停下翻新的脚步，始终在推动 Web 技术往前倒退。

始终以来，Chrome 每隔 6 周公布一个新版本。最近，Chrome 发表将会放慢这个公布流程，改为每 4 周公布一个新版本。

身处大前端这个畛域，理解 Chrome 的倒退能够帮忙咱们了解整个行业的发展趋势。

Chrome 最值得关注的新个性有 2 个方向：

新的能力，新的 API，比方 Web NFC 这种，能够用在理论的利用场景中，带来业务上的翻新；
平安及隐衷方面的规定批改，比方禁用第三方 Cookie，会影响到业务的稳定性；

从这篇文章开始，我将以《了不起的 Chrome 浏览器》为题，对 Chrome 的每一个版本进行具体解读，分享一些本人兴许并不成熟的思考，欢送关注 寒雁 Talk公众号。

为了防止占用过多公共资源，我先简略总结一下吧:)

Chrome 89 是哪天公布的？2021-03-02
在哪能够查看 Chrome 的版本信息？Chrome Platform Status
Chrome 89 更新了多少个个性？30 个，具体有哪些个性能够查看 Chrome Platform Status
Chrome 89 最大的亮点是什么？、Web NFC、WebHID 以及 Web Serial API，这 3 个个性使得 Web 利用能够更加便捷地与硬件进行交互，JavaScript 或成为物联网时代的最大赢家。
我感兴趣的新个性顺次有哪些？
- Top-level await
- Web NFC
- WebHID
- Web Serial API
- performance.measureUserAgentSpecificMemory()
你感兴趣的新个性顺次有哪些？这个我就不晓得了啊，欢送留言评论！

这里，必须点赞 Chrome Platform Status 这个站点，它把 Chrome 每一个版本的每一个个性都整顿得十分分明。而我做的事件，无非是做个勤奋的搬运工就好了~

30 个新个性我无奈一一介绍，那我就挑 5 个还比拟有意思的个性来聊聊吧，对其余个性感兴趣的话，能够看看 Chrome Platform Status。

作为一个 JavaScript 程序员，Async/Await 是我最喜爱的个性之一，把我从 Promise.then 的天堂中解脱进去。爱屋及乌，Top-level await 也很妙啊。

上面这个 html，在 Chrome 88 上会报错：”Uncaught SyntaxError: Unexpected reserved word”，在 Chrome 89 上则能够正确执行。这是因为 Chrome 89 的 V8 引擎降级到了 V8.9，反对了 Top-level await。

<!DOCTYPE html>
<head>
  <title>Top-level await</title>
</head>
<body>
  <script type="module">
    await Promise.resolve(alert('hello, world!'));
  </script>
</body>

以前，await 只能在 async 函数中应用，当初毋庸 async 函数也能够应用了，能够利用在数据库连贯初始化等场景，更加不便：

const connection = await dbConnector();

值得注意的是，Top-level await 只能在 ES Module 中应用。并且，应用 Top-level await 的话，会对 ES Module 的执行程序造成影响，阻塞应用了 Top-level await 的 Module 及其父节点（parent module）的执行。

Top-level await 这个提案曾在社区中引起很大的争议，起初提案批改之后，不再阻塞兄弟节点（sibling module）的执行，当初顺利进入 Stage 3，也是不容易啊。

NFC 是 Near Field Communication 的缩写，中文名为 ” 近场通信 ”，能够用在挪动领取、门禁等场景。

Chrome 89 的 Andriod 版本默认开启了 Web NFC，这为 Web 利用又拓展一大利用场景。

下图这个 Demo 还是很有意思的，手机凑近卡片就能通过 NFC 辨认卡片的色彩。

传说中不可能实现的需要：依据手机壳的色彩批改 UI 色彩，这不就实现了嘛，哈哈。

Chrome 推动 Web 技术走向各个利用场景的致力，再下一城。NFC 的应用场景大多都挺简略的，为了这个去开发原生利用仿佛有点杀鸡用牛刀，Web 技术可能是更好的抉择。在领取、门禁、票务、地铁公交等须要刷卡的场景，Web 利用都有了用武之地。

HID 的全称是 Human Interface Devices，不太好翻译，看来 Google 的同学们造词能力也很厉害。HID 其实就是各种各样的输入输出设备。很多设施因为太新、太旧、太少见或者不足规范，所以零碎很难应用，WebHID API 使得这些设施能够更不便地与 Web 利用进行交互。

其实，HID 次要指的就是游戏手柄，因为游戏手柄的标准化做的还不够好。

Demo 中有点理论价值的也就 PlayStation 和 Switch 的案例，果然还是利好游戏宅 …

大家能够感受一下，用 Switch 的 Joy-Con 手柄怎么玩 Chrome 的恐龙游戏，能够说十分魔性了 …. 断网的时候大家又多了一个锻炼身体的新姿态 …

以后，线下游戏厅外面的游戏界面都挺古老的，还停留在上个世纪，与线上游戏存在代际差距，亟待降级，如果采纳 Web 技术来开发，研发老本更低，兼容性更好，当初也能够不便地与游戏手柄进行交互了，应该是一个值得尝试的畛域。

**
串行接口（Serial port），次要用于串行式逐位数据传输，打印机、单片机等设施都是通过串行端口与计算机连贯的。

串行设施（Serial device）能够通过串行接口、模仿串行接口的 USB 接口或者蓝牙连贯计算机。Web 利用则能够通过 Web Serial API 与串行设施进行通信。

下图是 BBC micro:bit，是用于教育场景的单片机，它有一个 MicroUSB 接口，能够连贯电脑。Google Developer codelab 给的一个案例，就是应用 Web Serial API 在 micro:bit 上展现一个心形图像。

这几年少儿编程挺火的，让小朋友单纯地写代码其实挺无聊的，如果能联合相似于 BBC micro:bit 这样的硬件设施，让小朋友们看到真正的成果，哪怕是简略的 LED 灯管制，应该能够更好的激发小朋友们的趣味。而 Web 技术人造的低门槛、跨平台的个性，还挺适宜教育这个场景的。

Chrome 89 新增了 performance.measureUserAgentSpecificMemory()接口，用于测量页面的内存使用量。

如果咱们间接在控制台执行 performance.measureUserAgentSpecificMemory()，则很可能会报错：

Uncaught (in promise) DOMException: Failed to execute 'measureUserAgentSpecificMemory' on 'Performance': performance.measureUserAgentSpecificMemory requires cross-origin isolation.

这是因为 performance.measureUserAgentSpecificMemory()只能在启用了 cross-origin isolated 的页面中执行，这样做是为了平安。

名字这么长的 API 还是头一次见，还不让人用，不讲武德啊 …

为了测试，我写了个简略的 Egg 利用：

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {async index() {const { ctx} = this;
    ctx.set('Cross-Origin-Embedder-Policy', 'require-corp');
    ctx.set('Cross-Origin-Opener-Policy', 'same-origin');
    ctx.body = 'hi, egg';
  }
}

module.exports = HomeController;

Header 中返回上面的值即可：

这时在控制台就能够执行 performance.measureUserAgentSpecificMemory()了

await performance.measureUserAgentSpecificMemory();

performance.measureUserAgentSpecificMemory()是在浏览器执行垃圾回收的时候度量页面的内存使用量，

{
    "breakdown": [
        {"attribution": [],
            "bytes": 0,
            "types": []},
        {
            "attribution": [
                {
                    "scope": "Window",
                    "url": "http://127.0.0.1:7001/"
                }
            ],
            "bytes": 191222,
            "types": []},
        {"attribution": [],
            "bytes": 786305,
            "types": ["Shared"]
        }
    ],
    "bytes": 977527
}

一个 Hello World 页面用了 900KB 内存，比尔盖茨哭晕在厕所外面 …

Chrome 89 最大的亮点 Web NFC、WebHID 以及 Web Serial API 这 3 个个性，它们其实是在做同一件事件，让 Web 利用冲破页面自身，能够更加便捷地与硬件进行交互，JavaScript 无望成为物联网时代的一等公民。

本文中介绍的 Web NFC、WebHID 以及 Web Serial API 的 Demo 案例都还有点意思，不过都稍显稚嫩，不过这也意味着这方面的利用还刚刚开始，将来的设想空间很是挺大的。文章中，我聊到了它们在领取、门禁、票务、交通、游戏以及教育方面的利用场景，应该还有更多值得大家摸索的场景，想想还是挺有意思呢。

WebHID 以及 Web Serial API 有啥区别呢？对于这一点，我还没有钻研分明，感兴趣的同学能够关注一下我在 GitHub 提的 issue：What are the differences between WebHID and Web Serial API？

Web NFC、WebHID 以及 Web Serial API 都属于 Chrome 的 capabilities project，其指标在于打消 Web 利用于原生利用之间的差距，让 Web 利用能够做任何 iOS、Andriod 以及桌面利用能够做的事件。这个指标看起来有些挑战性，然而也没有什么不可能的，10 年前，你能设想 Web 利用能够倒退到明天这个水平吗？那 10 年后会怎么样呢？让咱们刮目相待吧！

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

Top-level await
Top-level await is a footgun
JavaScript 深入浅出第 5 课：Chrome 是如何胜利的？
第三方 cookie 马上就不让用了，互联网广告还怎么玩？
Chrome 89 Beta: Advanced Hardware Interactions, Web Sharing on Desktop, and More
New in Chrome 89: Web Serial, HID, NFC, PWA installability changes, and more!
Getting started with the Web Serial API
What are the differences between WebHID and Web Serial API？
2020 前端技术倒退回顾
Why you need “cross-origin isolated” for powerful features

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

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

关于chrome:了不起的Chrome浏览器Chrome-89开启Web应用的物联网时代

背景

TL;TR

具体解读

Top-level await

Web NFC

WebHID

Web Serial API

performance.measureUserAgentSpecificMemory()

总结

参考

招聘