盛况回顾 | 谷歌 Web 开发者大会的重要发布

Posted 2021-04-27 谷歌开发者

在几个月密集的准备后，本月初我们完成了有史以来的第一次线上谷歌 Web 开发者大会，给全球 Web 开发者带来完美的线上体验和大量的技术干货。

• 谷歌 Web 开发者大会

  https://web.dev/live

今天我们通过 bilibili 和腾讯视频发布内嵌中文字幕的所有演讲视频，希望可以为中国开发者们带来机会再次与 Web 技术接轨。

• bilibili 播放列表
  https://www.bilibili.com/medialist/play/ml1018067858/
• 腾讯视频播放列表
  http://v.qq.com/vplus/78ffb35ddcf6577ad6e00555d6a4fbaa?page=cover
  
  

此外，谷歌大中华区 Web 生态咨询团队也将定期带来 Chrome/Web 技术的更新，帮助开发者得到更及时的发布和反馈，期待本次的内容对广大的 Web 开发社区带来价值。

接下来让我们一起了解一下在三天的谷歌 Web 开发者大会中分享的一些新闻和更新。

Web Vitals

Chrome 团队 ，以提供统一的文档、指标和工具，帮助开发者在 web 上提供优秀的用户体验。Google Search 团队最近也宣布，他们将把 web 体验纳入排名标准，并将以 Core Web Vitals   (核心网页指标) 作为基础。

• Web Vitals

  https://web.dev/vitals

• Core Web Vitals

  https://web.dev/vitals/#core-web-vitals

2020 年 Core Web Vitals 的三大核心是: 页面内容的加载、交互性和视觉稳定性，并通过以下指标来呈现:

• 最大内容绘制 (Largest Contentful Paint)   评估页面主要内容可能已完成加载时的感知加载速度，并在页面加载时间轴上标记时间点；
  https://web.dev/lcp/
• 首次输入延迟 (First Input Delay)  评估用户首次尝试与网页交互时的网页响应速度，并量化用户感知体验；
  https://web.dev/fid/
• 累积布局偏移 (Cumulative Layout Shift)  评估可见页面内容的视觉稳定性，并量化内容的意外布局偏移量。
  https://web.dev/cls/

在谷歌 Web 开发者大会上，我们分享了如何 优化核心 Web 指标 (Core Web Vitals)  的最佳实践，以及如何 使用 Chrome DevTools 解读核心 Web 指标 。我们还分享了很多其他与性能表现相关的演讲，您可以观看视频了解详细内容:

交易担保 哔哩哔哩 优化核心 Web 指标 (Core Web Vitals) Mini Program

△ 优化核心 Web 指标 (Core Web Vitals)

交易担保 哔哩哔哩 使用 Chrome DevTools 解读核心 Web 指标 Mini Program

△ 使用 Chrome DevTools 解读核心 Web 指标

tooling.report

为 web 这样一个宽泛的平台进行开发相当具有挑战性。构建工具通常位于您的 web 开发项目的核心，在帮助开发者完成工作和管理产品生命周期中承担着关键角色。

我们都知道繁冗的构建配置文件是什么样子，所以，为了帮助 web 开发者和工具作者克服 web 的复杂性，我们为大家带来了 tooling.report。这个网站可以帮助您为下一个项目选择合适的构建工具，还可以帮您判断从一个工具迁移到另一个工具是否值得，或者弄清楚如何将最佳实践纳入工具配置和代码库中。

• tooling.report

  https://web.dev/introducing-tooling-report

我们设计了一套测试，来确定哪些构建工具可以让您遵循 web 开发的最佳实践。我们与构建工具的作者们合作，确保我们有正确地使用这些工具，并公平地给出评价结果。

tooling.report 的初始版本涵盖了目前最流行的构建工具，包括 webpack v4、Rollup v2、Parcel v2 和 Browserify with Gulp。我们在构建 tooling.report 时也保留了将来添加更多构建工具的能力，并能借助社区力量进行更多的测试。

如果我们遗漏了应该测试的最佳实践，请在 GitHub 向我们提交需求。如果您愿意编写测试或添加我们没有包含在初始集合中的新工具，欢迎您来这里做出贡献！

• 提交测试需求
  https://github.com/GoogleChromeLabs/tooling.report/issues/new
• 贡献指南
  https://github.com/GoogleChromeLabs/tooling.report/blob/dev/CONTRIBUTING.md

请大家进一步阅读 t ooling.report 的介绍文档 ，或观看 演讲视频 ：

• 用 tooling.report 选择项目的最佳构建工具

  https://web.dev/introducing-tooling-report/

交易担保 哔哩哔哩 构建更好的工具 Mini Program

△ 构建更好的工具

Web 上的隐私和安全

Chrome 相信开放 web 的价值，这样的 web 应该能够尊重用户的隐私，维护关键的用例，让 web 能为每一个人所用。

2019 年，Chrome 提出了对 cookie 标准的更新，将 cookie 默认限制在第一方上下文中，并要求涉及第三方 (也称作 "跨站") 上下文的 cookie 必须明确做出标记。这为防止跨站请求伪造 (Cross-Site Request Forgery) 攻击提供了一道防线。目前，Chrome、Firefox、Edge 等浏览器都采纳了这一建议。

• 提升 web 的隐私和安全保护
  https://blog.chromium.org/2019/05/improving-privacy-and-security-on-web.html

之前，鉴于 COVID-19 的疫情局势，Chrome 决定 暂时撤销 这些变更，但很遗憾的是，在人们最脆弱的危机期间，这类攻击的数量却依然有所增加。所以，随着 Chrome 84 稳定版的发布 (2020 年 7 月中旬)，这些变化将重新开始在版本 80 及以上的所有 Chrome 中 部署 。想要了解更多详情，请查看 SameSite cookie 指南 以及 演讲视频 :

• 临时撤销 SameSite cookie 变更

  https://blog.chromium.org/2020/04/temporarily-rolling-back-samesite.html

• SameSite 更新

  https://www.chromium.org/updates/same-site?pli=1#20200528

• SameSite cookie 指南

  https://web.dev/samesite-cookies-explained/

交易担保 哔哩哔哩 关于 Cookie 的注意问题——聊聊 SameSite Mini Program

△ 关于 Cookie 的注意问题——聊聊 SameSite 

此外，Chrome 正在引入一套标准提案 (名为 )，支持通过 web 平台变现的用例，但执行方式需要更加尊重用户隐私。Chrome 正在积极收集对这些提案的反馈，并在 W3C 的公开论坛中参与讨论，包括隐私沙箱计划和来自各方的其他提案。您可以观看演讲视频了解更多关于这一计划的信息：

交易担保 哔哩哔哩 Open Web 的安全和隐私保护 Mini Program

△ Open Web 的安全和隐私保护

最后，让我们看看用户安全方面的问题。Spectre 是一个漏洞，即在一个浏览器进程中运行的恶意代码可能会读取与该进程相关的任何数据，即使它的来源并不相同。浏览器对此的缓解措施之一是站点隔离，即把每个站点放到一个单独的进程中。您可以观看视频，了解更多新的跨源 Opener 和 Embedder 策略 (COOP 和 COEP) 的内容。

• Spectre
  https://meltdownattack.com/

交易担保 哔哩哔哩 防止信息泄漏及应用 COOP 和 COEP Mini Program

△ 防止信息泄漏及应用 COOP 和 COEP

让 web 具备更强大的功能

Chrome 希望您能自由地创建最高质量的 web 应用，在不同设备上尽最大可能触达用户。借助 PWA 的可安装性和可靠性，以及能力拓展项目 (Project Fugu)，Chrome 得以通过三个关键任务来缩小原生应用和 web 之间的差距，帮助您构建和提供出色的体验。

• 能力拓展项目
  https://web.dev/fugu-status/

首先，Chrome 团队一直在努力让 web 开发者和用户 对安装体验有更多的控制权 ，比如 在 omnibox 中加入安装提示 等。尽管 web 无处不在，但对于一些企业来说，让自己的应用出现在商店中仍然相当重要。为了提供帮助，Chrome 推出了 Bubblewrap ，它身兼代码库和 CLI 双重职能，让您的 PWA 能够轻松进入 Play Store。事实上， PWABuilder.com 现在就在底层使用了 Bubblewrap。只需点击几下鼠标，您就可以生成一个 APK，并将您的 PWA 上传到 Play Store，前提是您符合 相关标准 。

• 提供可安装体验

  https://web.dev/customize-install/

• 安装提示

  https://web.dev/install-criteria/

• 更多安装支持

  https://web.dev/promote-install/#browser-promotion

• Bubblewrap

  https://github.com/GoogleChromeLabs/bubblewrap

• 针对 PWA 的新质量评估标准

  https://blog.chromium.org/2020/06/changes-to-quality-criteria-for-pwas.html

其次，Chrome 提供了与操作系统更紧密的集成，比如可以通过调用系统级的分享服务与 Web Share API  来分享照片、歌曲等内容，也可以 在安装的其他应用分享内容时进行接收 。您可以一直给用户提供最新的内容，也可以通过 应用徽标  (app badging) 巧妙地告知他们有新的事情发生。另外，现在用户可以更轻松地通过 应用快捷方式  (App Shortcuts) 快速启动一个动作，该功能将在 Chrome 84 (2020 年 7 月中旬) 中提供。

• Web Share API

  https://web.dev/web-share/

• 接收其他应用分享的内容

  https://web.dev/web-share-target/

• 应用徽标

  https://web.dev/badging-api/

• 应用快捷方式

  https://web.dev/app-shortcuts/

最后，Chrome 一直在开发新的功能，以实现之前不可能实现的新场景，比如可以 读 写用户本地文件 的编辑器，或者获取本地安装的字体列表，以便用户在设计中使用它们。

• Native File System API: 轻松访问本地文件

  https://web.dev/native-file-system/

在谷歌 Web 开发者大会期间，我们谈到了很多其他的功能和特性，这些功能和特性可以让您提供与本地应用相同的体验。您可以观看 第二天的演讲视频 ：

交易担保 哔哩哔哩 谷歌 Web 开发者大会视频回顾-第二天 Mini Program

△ 第二天演讲视频

Chrome DevTools 和 Lighthouse 6.0 的新进展

Chrome Devtools: 新的 Issues 标签页、色觉障碍模拟器和 Web Vitals 支持

Chrome DevTools 最强大的功能之一，就是发现 web 上的问题并告知开发者。当我们进入 web 的全新发展阶段并时，这一点尤为重要。为了减少 Console 中的通知堆积和杂乱现象，Chrome DevTools 推出了 Issues 标签页，该页面主要呈现三类关键问题: Cookie 问题、混合内容问题和 COEP 问题。请观看视频，了解如何用 Chrome 开发者工具的 Issues tab 发现并解决问题。

• Issue 标签页
  https://developers.google.cn/web/tools/chrome-devtools/issues
• Cookie 问题
  https://web.dev/samesite-cookies-explained
• 混合内容问题
  https://developers.google.cn/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
• COEP 问题
  https://web.dev/coop-coep/

交易担保 哔哩哔哩 用 Chrome 开发者工具的 Issues tab 发现并解决问题 Mini Program

△ 用 Chrome 开发者工具的 Issues tab 发现并解决问题 

此外，随着 Core Web Vitals 成为 web 开发者使用和评判质量的最关键指标之一，DevTools 希望确保开发者能够轻松了解他们的页面在这些指标上的表现。因此，这三个指标现在都被放置在了 Chrome DevTools 的 Performance (性能) 面板中。

• Core Web Vitals
  https://web.dev/vitals/#core-web-vitals

最后，随着越来越多的开发者关注无障碍体验，DevTools 还推出了 色觉障碍模拟器 ，允许开发者模拟视觉模糊和其他类型的视觉障碍。您可以观看视频了解 Chrome 开发者工具的产品进展 :

• 色觉障碍模拟器

  https://twitter.com/mathias/status/1237393102635012101?

交易担保 哔哩哔哩 Chrome 开发者工具的产品进展 Mini Program

△ Chrome 开发者工具的产品进展

Lighthouse 6.0: 新的指标、Core Web Vitals 实验室测量、更新的性能评分和新的审查项目

Lighthouse 是一个开源的自动化工具，可以帮助开发者提高网站的性能。在最新的版本中，Lighthouse 团队专注于提供基于指标的洞察，让您通过关键数据纬度整体掌握用户体验的质量。

• Lighthouse
  https://developers.google.cn/web/tools/lighthouse

为了确保一致性，Lighthouse 增加了对 Core Web Vitals 的支持，这些指标包括:  LCP 、 TBT  ( FID 的替代指标，因为 Lighthouse 是一个实验室工具，而 FID 只能在真实环境中测量) 和 CLS 。Lighthouse 还删除了三个旧的指标: First Meaningful Paint、First CPU Idle 和 Max Potential FID 。删除的原因包括度量的可变性因素，以及新的指标能够更好地反映 Lighthouse 试图衡量的用户体验。此外，Lighthouse 还根据用户的反馈，对每个指标在整体评分中的占比做了一些调整。

• LCP

  https://web.dev/lcp/

• TBT

  https://web.dev/tbt/

• FID

  https://web.dev/fid/

• CLS

  https://web.dev/cls/

• First Meaningful Paint

  https://web.dev/first-meaningful-paint/

• First CPU Idle

  https://web.dev/first-cpu-idle/

• Max Potential FID

  https://web.dev/lighthouse-max-potential-fid/

Lighthouse 还增加了 评分计算器 ，通过提供第 5 版和第 6 版分数的对比，帮助您进一步了解性能评分。当您使用 Lighthouse 6.0 进行审核时，报告中会给出计算器的链接，并在其中填充好了您的数据。

• 评分计算器

  https://googlechrome.github.io/lighthouse/scorecalc/

最后，Lighthouse 还增加了一些 新的审核项目 ，重点是 javascript 分析和无障碍体验。

• 新增审核项目

  https://web.dev/lighthouse-whats-new-6.0/#new-audits

请观看视频进一步了解 Chrome Speed 工具的新功能:

交易担保 哔哩哔哩 Chrome Speed 工具的新功能 Mini Program

△ Chrome Speed 工具的新功能

了解更多

感谢与我们共同探讨 web 平台机遇和挑战的每一位社区成员。

本文总结了本次活动的一些亮点，但这远非全部内容，请点击阅读原文观看所有的演讲视频。如果您想直接收到我们的更多内容，请订阅 web.dev 邮件。此外，别忘了访问 web.dev/live 上的地区活动，查找您所在时区即将举办的社区活动！

• 订阅 web.dev 邮件
  https://web.dev/newsletter
• 地区活动
  https://web.dev/live#regional-events

---

推荐阅读

  点击屏末 | 阅读原文 | 观看谷歌 Web 开发者大会全部演讲视频

---