2019年Chrome开发者峰会亮点：让全部用户告别加载延迟

2019年Chrome开发者峰会亮点：让全部用户告别加载延迟

做者｜Dion Almaer译者｜王强编辑｜王文婧做为有史以来最大的开放生态系统，Web 是一个规模庞大的公众产业。现在，互联网上有超过 15 亿家活跃网站，为全球近 45 亿 Web 用户提供服务。用户在站点之间跳转时会得到一种独特的体验，仿佛整个 Web 世界已经融为一体。在刚刚举行的 Chrome 开发者峰会（CDS）上，人们关注的重点是如何为开发者提供多样化的能力，以知足用户的不一样需求。本文做者为你们介绍了本次 CDS 的一些要点。扩展 Web 的功能和用途

咱们的目标是让全部用户告别加载延迟。

在今年的 I/O 大会上，咱们预览了 Portals，这项新技术使开发人员能够预渲染内容并按需将其嵌入到页面中，以改变用户在 Web 上跳转页面的方式，从而创造无缝的体验。咱们很高兴看到像 Fandango 这样的早期合做伙伴已经开始在他们的网站上测试这种新的导航风格。Portals 位于 chrome://flags/#enable-portals 标志后，供开发人员试验。

Portals：https://web.dev/hands-on-portals/

Fandango 网站的 Portals 演示

在今年的 CDS 上，咱们还预览了 Web Bundles，这是一种基础架构 API，开发人员能够经过它以任何格式（电子邮件、FTP 甚至 USB）分发他们的 Web 内容，而内容自己不会有任何改动。这种技术不只可以以闪电般的速度交付 Web 内容，并且即便用户处于脱机状态，也能够实现点对点内容分发。未来，诸如 后台按期同步（Background Periodic Sync） 和 内容索引（Content Indexing） 之类的 API，将使开发人员能够主动缓存和显示相关的 Web 内容，即便用户没有 Internet 链接也能继续浏览页面。如今，Web Bundles 已经能够在实验标志后可用，而另外两项新技术如今能够经过 Origin Trials 使用。

Web Bundles：https://web.dev/web-bundles/

Web 内容的消费从未像如今这样多样化。在发展中市场中，“移动优先”潮流的兴起已经是既定事实。咱们还看到，在全球范围内的年轻用户群中，跨设备计算也在增加。咱们在努力让这一平台变得足够强大，以使开发人员创造出用户所指望的现代化体验，同时充分发挥 Web 的便利性优点。咱们在集中精力开发功能强大的 Web 应用程序，从而持续为平台带来为数众多的举措，包括：

• SMS 接收器（SMS Receiver）：容许 Web 应用程序获取双因素验证短信。https://web.dev/sms-receiver-api-announcement/
• 内容拾取器（Contact Picker）：容许人们将 Web 内容共享到其联系人列表中，从而将社交媒体和通讯功能引入 Web 应用程序。https://web.dev/contact-picker/

• 原生文件系统 API：使 Web 应用程序能够直接读取或保存对用户设备上的文件和文件夹所作的更改。这使开发人员能够构建功能强大、可以与用户本地设备上的文件交互的应用程序，例如 IDE、照片、视频编辑器和文本编辑器等。https://web.dev/native-file-system/

在这个领域，咱们还有不少工做正在进行中，咱们火烧眉毛地想看看大家使用这些功能构建了怎样的内容。你能够在咱们的博客上阅读有关支持最新 Web 体验的最新情报。

https://blog.chromium.org/2019/11/making-new-experiences-possible-on-web.html

不管使用框架仍是 CMS，都能走向成功

做为 Web 开发人员，咱们正在集体经历一段旅途，为人们提供最佳且独特的 Web 体验。在这种集体责任的背景下，关于 Web 运行情况的准确、可行的数据变得愈来愈重要。

CDS 为咱们提供了一个检查点，能够用来了解咱们的工做方式，并就下一步方向展开讨论。咱们可使用 HTTP Archive，了解 Web 的构建方式；使用“Chrome 用户体验报告”，获知 Web 的用户体验状况。在过去的一年中，使用快速的"First Contentful Paint"和“First Input Delay“（咱们的加载和交互性的核心指标）的网站比例呈现了增加的趋势。

HTTP Archive：https://httparchive.org/

Chrome 用户体验报告：https://developers.google.com/web/tools/chrome-user-experience-report

用户体验质量的衡量是多方面的，今天咱们引入了两个新指标，使开发人员能够全面了解其网站的运行状况。它们分别是 Largest Contentful Paint（用户看到最有意义的页面内容的速度有多快）和Cumulative Layout Shift（感知到的页面稳定性）。

如今，数据自己虽然颇有用，可是能够带来修复和改进的看法则更有价值。咱们常常被问到“我该如何处理这些信息？”咱们与社区中的许多专家合做制做了 Web 年鉴，使开发人员能够全面了解 Web 的运行情况。咱们今天发布了超过 17 个章节，将来还会分享更多这样的看法。

Web 年鉴：http://almanac.httparchive.org/

开发人员在很是努力地朝着正确的方向改善他们的性能指标，所以咱们正在寻找方法来奖励那些更进一步的开发人员。咱们分享了一些早期探索成果，在 Chrome 用户界面中的速度信号。

左侧：较慢网站中显示的加载界面信息；右侧：较快网站中显示绿色的进度条。

框架、库和 CMS 构成了开发者生态系统的重要组成部分，咱们在热情地支持他们为用户建立即时和无缝体验的旅程。今年早些时候，咱们为 WordPress 和 React 建立了 Lighthouse Stack Packs，以支持他们的开发者生态系统建立快速且可靠的站点，今天咱们进一步扩大了这一技术的覆盖范围，新增对 Angular、AMP 以及电子商务 CMS、Magento 的支持，为使用各类工具的开发人员都带来了更具可行性的看法。

Lighthouse Stack Packs：https://developers.google.com/web/updates/2019/01/lighthouse-platform-packs

咱们很高兴看到 Framework Fund（框架基金）支持了许多有意义的项目，这些项目可让开发者更容易实现性能目标。咱们还期待今年能有更多项目得到基金的资助。

项目：https://opencollective.com/chrome

最后，咱们发布了 Lighthouse CI，为开发人员提供针对每一个拉取请求的看法。开发人员能够迅速将 Lighthouse CI 加入本身的构建管道，以充分了解他们所作的更改效果及其对站点质量的影响。

让浏览器适合每一位用户

咱们相信，不管用户的设备类型、联网速度或购买力如何，Web 都属于每个人。为了确保全部人都能使用这一平台，咱们正在投资改善浏览器的性能和内存占用，引入了诸如图像延迟加载之类的新功能——该功能如今对 Chrome Lite 用户默承认用；另外一项功能名为 Paint Holding，即将在 Chrome 中推出。

Web 必须是让全部人感到安全和可信赖的场所。为了进一步改进围绕 HTTPS 加密的举措，咱们正在与社区合做，开始默认阻止全部混合内容——也就是 HTTPS 页面上不安全的 HTTP 子资源，同时还在测试 DNS over HTTPS，这一协议经过加密浏览器和 DNS 提供商之间的流量来提供更好的安全和隐私水平。

咱们还会遵照咱们在 I/O 大会上的承诺，使咱们现有的第三方 Cookie 控件更加可见。从 Chrome M79 Beta 版本开始，咱们正在尝试使用一个开关来控制新隐身标签页上的第三方 Cookie。咱们还正在从新设计设置页面，以便用户在常规模式下更轻松地访问这一控件。最后，除了在改善现有 Cookie 基础架构方面继续取得进展外，咱们还将继续开发“隐私沙箱“技术，这是一种内容安全的环境，还能够保护用户的隐私。

“隐私沙箱”：https://blog.chromium.org/2019/08/potential-uses-for-privacy-sandbox.html

咱们要感谢整个 Web 社区在平台上的持续投入。咱们相信提高每位用户的 Web 体验是咱们的集体责任，本着这种精神，让咱们为 Web 中的“咱们“干杯。

原文连接：https://blog.chromium.org/2019/11/chrome-dev-summit-2019-elevating-web.html

 活动推荐

近年来，随着 jQuery 的落幕，三大框架的割据以及小程序的爆发，大前端的发展也经历了从静态页面到 JavaScript 跨时代的诞生，再从 PC 端到移动端的转向，以及由依赖后端到先后端分离的架构演变。

腾讯在线教育前端团队，近年来在大前端技术架构演进方面也有了很多突破，如 Hybird 方案、离线包方案、PWA 结合 *** 方案、以及 RN 动态化方案的落地和执行等。

此次 GMTC 全球大前端技术大会（深圳站）2019，咱们专门请到了 腾讯的前端高级工程师曹海歌，但愿能够从腾讯在线教育前端团队的实操案例中，深刻了解腾讯为提高研发效率，进行的前端工程化体系建设过程。扫描下方二维码或点击阅读原文，查看详情。