2021 年 Chrome 开发者峰会的热门见解

Chrome 开发者峰会是一年一度的盛会，来自 Chrome 的专家将分享他们最新产品的亮点以及他们对 Chrome 和网络未来的愿景。

本文包含 2021 年 Chrome 开发者峰会的重要见解。

Chrome 团队宣布的最有趣的变化包括：

• 计划限制用户代理字符串中的信息量，
• 宣布在 Lighthouse 和 DevTools 中新增对用户流的支持，
• 引入两个新的性能指标（Core Web Vitals 的候选），以及
• 新的响应式设计功能。

逐步淘汰第三方 cookie – 用户代理客户端提示

隐私沙盒仍然是 Google 不断努力创建更加注重隐私的网络的关键要素之一。

浏览器无法判断您是否将第三方 cookie 用于提供定制体验或保持用户登录或跨站点跟踪等有用的事情。

资料来源：巴布史密斯

这就是 Chrome 旨在创建专用 API 的原因，这些 API 允许您保留功能（如广告、欺诈检测或交付定制内容）而无需第三方 cookie。

在确保开发人员有时间采用 API 后，Chrome 将安全地逐步停止对第三方 cookie 的支持。

可以在隐私沙盒时间轴上看到新技术及其发展阶段。

今年推出的新解决方案之一是用户代理客户端提示 (UA-CH)。

User-Agent 字符串包含大量关于用户设备和浏览器的信息，可用于浏览器指纹识别。

Chrome 旨在通过减少 User-Agent 字符串中的默认信息量并使其更难识别单个用户来对抗浏览器指纹识别。 字符串中的信息将仅包含：

• 浏览器的品牌和版本，
• 信息是台式机还是移动设备，以及
• 它运行的平台。

默认情况下，User-Agent 字符串会为您提供一些信息，这些信息可能涵盖您的大部分用例，但更详细的信息仅应要求以简单的格式提供。

来源： Chrome 开发者

从 2022 年 4 月开始，Chrome 将逐渐减少 User-Agent 字符串。

您仍然可以使用 User-Agent 客户端提示 API 获取有关您的用户的其他数据，但用户将能够决定他们愿意共享多少信息。

性能工具更新

Chrome 宣布了一些令人兴奋的变化和新功能来衡量和分析网络性能。 这包括：

• 改进 PageSpeed Insights 中的 UI，
• 在 Lighthouse 和 DevTools 中添加对用户流的支持，
• 引入两个新的实验指标。

PageSpeed Insights 界面的变化

PageSpeed Insights UI 进行了更新，使其更加直观并改进了数据的呈现方式。

新界面明确区分了基于 Lighthouse 报告的“实验室数据”和基于真实用户体验的“现场数据”。

此外，一项名为“扩展视图”的新功能为“字段数据”部分添加了一项功能。 您可以使用它来查看 Core Web Vitals 的详细信息。

谷歌还将来源摘要移至字段数据下方。 点击后可以看到所有同源页面的总分。

在现场和实验室数据部分下方，您可以找到其他有用的信息，包括：

• 数据收集期，
• 访问时长，
• 设备，
• 网络连接，
• 样本量，
• 铬版本。

这些变化也将出现在 Core Web Vitals 评估中。 它将在单独的小节中提供，而不是单个“通过”或“失败”词。

最后，加载页面的图像将从字段部分中删除。 您将在实验室数据部分找到显示加载顺序的图像和缩略图。

支持 Lighthouse 中的用户流

新的Lighthouse API允许您通过模拟链接点击、滚动和加载其他页面来分析用户流，而不是单独分析每个页面的性能。

Lighthouse 将能够区分并提供单独的页面导航报告、在给定时间跨度内发生的任何用户交互以及表示页面捕获状态的快照。

资料来源：侯赛因·吉德

借助新功能，您可以更好地了解用户体验并发现用户在您网站上的整个旅程中的性能问题。

DevTools 中的新记录面板

DevTools 中也直接添加了对分析用户流的支持。

借助DevTools 中新推出的记录面板，您现在可以分析、记录和导出您网站上的整个用户旅程。

新工具可让您直接在“性能”面板中查看用户在您的网站上执行的所有操作，例如按键或链接点击。 此功能旨在帮助您轻松理解和调试复杂的交互。

两个新的性能指标

Chrome 宣布了两个新的性能指标作为 Core Web Vitals 的潜在候选者。

响应能力

响应性旨在捕获页面的整体响应性。

我们目前使用 First Input Delay 来衡量页面在加载过程中的响应速度。 FID 是一个有用的指标，因为当浏览器需要加载许多资源并且主线程时间需求量很大时，响应能力特别不稳定。

但所有 FID 衡量标准是浏览器准备好处理用户请求的时间。 它不允许您在给定页面的整个生命周期中测量输入延迟。

Chrome 团队仍在构思新的响应性指标。 您可以在此处了解有关在整个页面生命周期中测量输入延迟的挑战的更多信息。

平滑度

平滑度旨在解决在动画或滚动期间测量“卡顿”或“冻结”的问题。 这个新指标旨在更好地了解动画帧被丢弃的频率以及它对用户的影响程度。

建议的丢帧百分比指标将计算丢帧的数量并给出一个平均分数，该分数应该反映从用户的角度来看动画的流畅程度。

重要的是：等待重要更新的时间比例。 我们认为这符合用户在实践中体验 Web 内容流畅度的自然方式。 到目前为止，我们一直使用以下作为初始指标集：

• 平均下降百分比：针对整个时间轴上的所有非空闲动画帧
• 丢帧百分比的最坏情况：在 1 秒的滑动时间窗口内测量。
• 丢帧百分比的第 95 个百分位数：在 1 秒的滑动时间窗口内测量。

来源： web.dev

新的响应式

响应式设计不再只是调整您的网站以使其在手机和台式机上运行良好。 不仅如此，开发人员还需要为每个人提供定制的体验，并包括用户偏好，如暗模式或可折叠设备。

响应式设计的更改涉及 CSS 功能。 一些新功能包括新的容器查询规范、滚动时间线和强调颜色属性。

字体大小调整属性

一个特别令人兴奋的功能是用于排版的 size-adjust 属性。 您可以使用 size-adjust 来调整默认字体以匹配即将加载的 Web 字体。

这一点尤其重要，因为它可以通过减少 Web 字体加载引起的偏移来帮助您防止累积布局偏移。

黑暗模式

此外， Chrome 正在开发一种机器学习辅助的自动暗算法功能。 这意味着浏览器可以自动生成深色主题，并可以选择退出此功能。

访问Chrome 开发者页面，详细了解 Chrome 的新自动变暗功能并在您的设备上进行测试。