Chrome 团队注重用户体验和网络生态系统的蓬勃发展。 我们希望用户在 Web 上获得最佳体验,不仅能在使用静态文档时获得最佳体验,在使用内容丰富的高度交互式应用时也能获得绝佳体验。
在支持开发者构建适用于 Web 的现代应用方面,开源工具和框架发挥着重要作用,同时还支持良好的开发者体验。这些框架和工具为各种规模的公司以及构建 Web 项目的个人提供支持。
我们相信,在帮助开发者提高性能、无障碍功能、安全性和移动设备就绪性等关键质量方面,框架也可以发挥重要作用。该框架可以通过内置的解决方案来支持这些方面,而不必要求每个开发者和网站所有者成为这些领域的专家,并跟上不断变化的最佳实践。这为开发者赋能,让他们能够专注于构建产品功能。
简而言之,我们的愿景是,高标准的用户体验质量会成为 Web 应用开发的副作用。
Aurora:Chrome 与开源 Web 框架及工具的协作
近两年来,我们一直在努力提升 Web 性能,其中包括一些最热门的框架,如 Next.js、Nuxt 和 Angular。我们还资助了一些热门的工具和库,例如 Vue、ESLint、webpack。今天,我们将这项工作命名为 - Aurora。
极光是一种在天空中闪烁的自然光。在我们努力让使用框架构建的用户体验更加出色时,我们认为这个名称是一个合适的选择。
在未来几个月内,我们将分享有关 Aurora 的更多详细信息。这是由 Chrome 工程师(内部代号为 WebSDK)和框架作者组成的小型团队开展的协作。我们的目标是,无论使用何种浏览器进行渲染,都尽可能为正式版应用提供最佳用户体验。
我们的策略是什么?
在 Google,我们在使用框架和工具构建和维护大型 Web 应用(例如 Google 搜索、地图、图片搜索、Google 相册等)的过程中,收获了很多经验。我们发现框架如何通过提供强大的默认设置和有针对性的工具,在可预测的应用质量中发挥重要作用。
框架在整个系统(客户端和服务器、开发环境和生产环境)上对 DX 和用户体验都有影响,并且具有独特的优势,并且它们集成了编译器、捆绑器、linter 等工具。
![显示框架中常用工具的图表](https://developer.chrome.google.cn/static/docs/aurora/overview/image/chart-shows-common-too-394cd49fee1a6.png?authuser=5&hl=sv)
将解决方案融入到框架中后,开发者团队可以使用这些解决方案,将时间集中在对产品最重要的方面,即为用户提供出色的功能。
虽然我们致力于改进存在于堆栈每一层的工具,但 Next.js、Nuxt 和 Angular CLI 等框架负责管理应用生命周期的每一步。因此,再加上核心界面框架生态系统中 React 的采用率最高,我们的大多数优化都先在 Next.js 中得到证明,然后再扩展到生态系统的其他部分。
Aurora 将解决方案引入到热门技术栈的正确层,从而帮助大规模取得成功。通过弥合浏览器与框架之间的差距,它能够在为 Web 构建应用时带来高质量,同时充当反馈环以改进 Web 平台。
我们的工作流程是怎样的?
Aurora 连接浏览器与开发者生态系统的原则是:保持谦逊、好奇心、科学探究和实用主义。我们与框架作者一起进行改进、与社区合作,并在做出任何更改之前进行尽职调查。
下文总结了我们在开发新功能时所采取的步骤:
- 使用具有代表性的应用确定热门堆栈中用户体验的痛点。
- 针对解决此问题的解决方案进行原型设计,并强调“强有力的默认值”。
- 使用其他框架堆栈验证该功能,以确保其适应性。
- 通过在几个正式版应用中进行实验来验证功能,通常通过实验室测试来提高性能。
- 利用 RFC 流程推动设计工作,解决社区反馈的问题。
- 将该地图项部署到热门堆栈(通常位于旗帜后面)。
- 在代表性正式版应用中启用该功能,以评估质量和开发者工作流集成。
- 通过跟踪已采用相应功能或已升级的代表性正式版应用中的指标,衡量性能改进情况。
- 启用该功能作为堆栈中的默认功能,以便所有升级用户受益。
- 通过验证后,使用其他框架来发布功能。
- 通过反馈环发现网络平台中的不足之处。
- 继续看下一个题目。
底层工具和插件(webpack、Babel、ESLint、TypeScript 等)可在多个框架之间共享。这有助于产生涟漪效果,即使涉及到单个框架堆栈也是如此。
此外,Chrome 框架基金也会为开源工具和库提供资金支持。虽然我们希望上述工作的问题和解决方案层存在足够的重叠,以转化为其他框架和工具,但我们知道还可以做更多。为此,我们希望尽自己的力量,确保帮助开发者取得成功的库和框架能够蓬勃发展。这就是我们将继续投资 Chrome 框架基金的原因之一。迄今为止,它支持 Webpack 5、Nuxt 和性能以及 ESLint 改进。
到目前为止,我们的工作带来了哪些成就?
我们的工作重点是针对图片、JS、CSS、字体等资源进行基础优化。我们已进行多项优化,以改进多个框架的默认设置,包括:
- Next.js 中的 Image 组件,封装了图片加载的最佳实践,之后可与 Nuxt 联合创作。使用此组件显著缩短了绘制时间并缩短了布局偏移(例如:在 nextjs.org/give 上,Largest Contentful Paint 减少了 57%,Cumulative Layout Shift 减少了 100%)。
- 在构建时自动为网页字体声明内嵌 CSS。此功能已推出 Angular(Google 字体)和 Next.js(Google Fonts 和 Adobe Fonts),从而对 Largest Contentful Paint 和 First Contentful Paint 进行了重大改进(示例)。
- 在 Angular 和 Next.js 中使用 Critter 来内嵌关键 CSS,以缩短绘制时间。与字体 CSS 内嵌功能结合使用后,在典型的大型 Angular 应用中,Lighthouse 性能得分提高了 20-30 分。
- Next.js 中开箱即用的 ESLint 支持,其中包含自定义插件和可共享配置,可让您在构建时更轻松地捕获特定于框架的常见问题,从而提高加载性能的可预测性。
- Create React App 和 Next.js 中引入了内置性能重新层,可让开发者通过网页指标和其他自定义指标更轻松地了解网页性能。
- Next.js 和 Gatsby 推出了精细分块功能,使得软件包大小缩减了 30% 到 70%,同时提高了缓存性能。这已成为 Webpack 5 中的默认设置。
- 与 Next.js 团队合作,针对旧版浏览器使用一个单独的 polyfill 分块,以减小现代浏览器中的软件包大小。
上述所有功能要么默认自动启用,要么只需简单地选择启用即可。这一点至关重要,可确保开发者能够轻松获得收益,而不会增加工作流的复杂性。
我们对 2021 年有何计划?
在今年剩下的时间里,我们将专注于帮助框架堆栈改善用户体验,以及它们在核心网页指标等指标上的表现。具体工作将包括:
- 强制执行最佳实践的一致性。如需了解详情,请参阅这篇博文。
- 在我们协作的基础上优化图片、字体和关键 CSS,从而优化初始加载性能。
- 我们基于我们在 Script 组件方面的工作基础,并对如何以最佳方式对第三方进行排序和排序进行深入研究,加载第三方脚本 (3P),同时将对性能的影响降至最低。
- 大规模提高 JavaScript 性能(例如,在 Next.js 中支持 React Server 组件)。
我们的团队将力求在 RFC 上定期发布相关信息以及这些创意的设计文档,以便任何希望遵循的框架或开发者都可以做到这一点。
总结
Aurora 团队(Shubhie、Houssein、Alex、Gerald、Ralph、Addy、Kara、Keen、Katie.js 和 Keen、Katie 框架)期待继续通过开源技术不断改进用户体验。我们将不断加大合作力度,逐步涵盖更多框架和工具。敬请关注此空间,了解我们团队在未来一年提供的更多博文、讲座和 RFC :)