summit

by Chiamaka Ikeanyi

由池中千嘉(Chiamaka Ikeanyi)

Chrome Dev Summit 2018的亮点 (Highlights from Chrome Dev Summit 2018)

Have you heard of Google Chrome Dev Summit? If you haven’t heard of it and the awesome cool things Chrome engineers have been working on lately, this article is for you.

您听说过Google Chrome开发者峰会吗？如果您还没有听说过Chrome浏览器工程师最近一直在做的很棒的事情，那么这篇文章就是给您的。

I’m a front-end engineer working on an application that serves millions of users. I also use Chrome Dev Tools every day to debug and monitor performance. So I found it imperative to learn about the tools and technologies that will help me optimize my applications and contribute to building a better web. Debugging and optimizations become easier when you are aware of the tools to take advantage of, and metrics to look out for.

我是负责为数百万用户提供服务的应用程序的前端工程师。我每天也使用Chrome开发工具来调试和监视性能。因此，我发现必须学习有助于我优化应用程序并为构建更好的Web做出贡献的工具和技术。当您知道要利用的工具和需要注意的指标时，调试和优化将变得更加容易。

Chrome Dev Summit offered me the opportunity to hear about updates on these tools and technologies, and showed me avenues to contribute toward making these tools better. I learned a lot from Chrome engineers during the summit, and I would like you to benefit from that knowledge so we can build an awesome web experience together.

Chrome开发者峰会为我提供了了解这些工具和技术更新的机会，并向我展示了为改进这些工具做出贡献的途径。在峰会期间，我从Chrome工程师那里学到了很多东西，我希望您从这些知识中受益，以便我们可以共同构建出色的网络体验。

Chrome Dev Summit is an opportunity for Google Chrome engineers and leading web developers to celebrate the web platform, provide updates on their latest work, and get feedback from the community.

Chrome开发者峰会为Google Chrome工程师和领先的Web开发人员提供了一个庆祝Web平台，提供最新工作更新并获得社区反馈的机会。

This year, developers from across the globe converged at Yerba Buena Center for the Arts in San Francisco, California for a two-day (12th and 13th November) exploration of modern web experiences. It was celebrated in style as Chrome engineers mark the 10-year anniversary of shipping Google Chrome, the most used web browser.

今年，来自全球的开发人员汇聚在加利福尼亚州旧金山的Yerba Buena艺术中心，进行了为期两天(11月12日至13日)的现代Web体验探索。 Chrome工程师纪念了最常用的Web浏览器Google Chrome发行10周年，以此来庆祝这一风格。

The event focused on what it means to build a fast, high-quality web experience using modern web technologies and best practices, as well as looking at new and exciting capabilities coming to the web platform. The major highlights are summarized below.

此次活动的重点是使用现代Web技术和最佳实践来构建快速，高质量的Web体验的意义，以及寻找Web平台上令人兴奋的新功能。主要摘要概述如下。

绩效预算 (Performance Budgets)

An increasing number of features in web applications today are also being accessed using low-end devices on high latency networks. Because of this, JavaScript becomes expensive thereby requiring performance budgeting.

如今，Web应用程序中越来越多的功能也正在使用高延迟网络上的低端设备进行访问。因此，JavaScript变得昂贵，因此需要性能预算。

However, we need to have metrics in place to measure before we can improve on them, as it is impossible to measure what we do not track. When we care about exceptional user experience irrespective of device or network conditions, building a PWA with performance in mind becomes a priority.

但是，我们需要先制定衡量指标，然后才能进行改进，因为无法衡量我们未跟踪的内容。无论设备或网络条件如何，我们都在关注卓越的用户体验时，考虑性能而构建PWA成为当务之急。

To build a high-quality web experience, Google developed tools like Lighthouse, PageSpeed Insights, and Chrome User Experience Report(CrUX) to help developers monitor and enhance the web platform. A new lighthouse UI was announced at the event with PWA Refactor, a reduction in lighthouse runtime, and new score bucketing.

为了建立高质量的网络体验，Google开发了诸如Lighthouse，PageSpeed Insights和Chrome用户体验报告(CrUX)之类的工具，以帮助开发人员监控和增强Web平台。在活动中，PWA Refactor宣布了一个新的灯塔用户界面，减少了灯塔运行时间，并增加了新的得分标准。

We can also integrate Lighthouse to our development workflow so it runs on every commit. This helps us to keep an eye on performance.

我们还可以将Lighthouse集成到我们的开发工作流中，以便它在每次提交时都可以运行。这有助于我们关注性能。

Tools to help monitor the cost of packages:

帮助监视软件包成本的工具：

Webpack Bundle Analyzer which creates a treemap visualization of the contents of your bundles. It helps determine modules that make up most of its size.

Webpack Bundle Analyzer ，它创建捆绑包内容的树状图。它有助于确定构成其大部分尺寸的模块。
Bundlephobia helps to discover the cost of adding an npm package to your bundle.

Bundlephobia帮助您发现将npm软件包添加到软件包中的成本。
Bundlesize helps keep your bundle size in check. You can integrate it in such a way that PRs can’t be merged once the bundle size is greater than the target maximum size.

Bundlesize有助于检查您的bundle大小。您可以通过以下方式集成它：一旦捆绑包大小大于目标最大大小，就无法合并PR。

由Lighthouse提供支持的PageSpeed Insights (PageSpeed Insights Powered by Lighthouse)

Because of the varying results analysis gotten from PageSpeed Insights and Lighthouse when measuring the performance of websites, the Chrome team introduced PageSpeed API v5. It is essentially Lighthouse API v1 to power PageSpeed Insights. This means that the differing results will be history. PageSpeed Insights also incorporates field data provided by the CrUX.

由于PageSpeed Insights和Lighthouse在评估网站性能时得出的分析结果不尽相同，因此Chrome团队推出了PageSpeed API v5。本质上来说，这是Lighthouse API v1为PageSpeed Insights提供支持的。这意味着不同的结果将是历史记录。 PageSpeed Insights还整合了CrUX提供的现场数据。

await fetch(`https://www.googleapis.com/pagespeedonline/v5/runPagespeed?&url=${url}`)

第一次输入延迟 (First Input Delay)

We are conversant with measuring Speed Index(SI), First Contentful Paint(FCP), Time to Interactive(TTI), First CPU Idle(FCPI) and other metrics which you may have seen using Lighthouse or WebPageTest. To help measure a user’s first impression of your site’s interactivity and responsiveness, a new metric was introduced called First Input Delay.

我们精通测量Speed Index(SI)，First Contentful Paint(FCP)，交互时间(TTI)，First CPU Idle(FCPI)以及您可能使用Lighthouse或WebPageTest看到的其他指标。为了帮助评估用户对您站点的交互性和响应性的第一印象，引入了一种新的度量标准，称为“首次输入延迟”。

First Input Delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time the main thread is free from the long task it is performing, making it possible for the browser to respond to the user’s interaction.

首次输入延迟(FID)衡量的是从用户第一次与您的网站进行交互(即当他们单击链接，点击按钮或使用自定义JavaScript驱动的控件)到主线程摆脱干扰为止的时间。它执行的任务很长，这使浏览器有可能响应用户的交互。

Is that not the same as TTI you may ask? Well, no it is not. Time to interactive (TTI) measures how long it takes your app to load and become capable of quickly responding to user interactions. On the other hand, First Input Delay (FID) is a metric that measures the delay that users experience when they interact with the page while it’s not yet interactive.

您可能会问，这与TTI不同吗？好吧，不，不是。互动时间(TTI)衡量了您的应用加载并能够快速响应用户互动所需的时间。另一方面，“首次输入延迟”(FID)是一种度量标准，用于度量用户在页面尚未交互时与页面交互时所经历的延迟。

FID is a field metric meaning that it can be seen when actual users are really interacting with the web app, while TTI is a lab metric. Field metrics capture a wide spectrum of real-world network conditions and devices used by Chrome users. This can be well measured using Real User Monitoring (RUM) tools like the Chrome UX Report.

FID是一种字段指标，这意味着当实际用户与Web应用程序进行实际交互时可以看到它，而TTI是实验室指标。现场指标可捕获各种现实世界的网络状况以及Chrome用户使用的设备。使用Real User Monitoring(RUM)工具(例如Chrome UX报告 )可以很好地衡量这一点。

Server-side rendered JavaScript apps and sites with third-party iframes need to be particular about tracking this metric. They are susceptible to high FID values especially on low-end devices that take longer to parse and execute JavaScript.

具有第三方iframe的服务器端呈现JavaScript应用和网站需要特别注意跟踪此指标。它们容易受到高FID值的影响，尤其是在解析和执行JavaScript需要更长时间的低端设备上。

WebP图像格式 (WebP Image Format)

Images don’t just become performant on the fly — there are appropriate measures to be put in place to achieve that. You must consider using the right format, compression techniques, and image lazy-loading. With the introduction of WebP, a new image format that results in an average of 30% savings, the cost of serving images — which is the largest component of most sites — is reduced.

图像不仅可以立即表现出色-可以采取适当的措施来实现这一目标。您必须考虑使用正确的格式，压缩技术和图像延迟加载。随着WebP的引入，一种新的图像格式可以平均节省30％的费用，从而降低了图像服务的成本(这是大多数站点中最大的组成部分)。

WebP provides superior lossy and lossless compression for images on the web with support for transparency, making the web faster. Due to the fact that WebP is not yet supported across all browsers, it is advisable to use the <picture> element to provide fallbacks. The image format would then be used on supported browsers while web browsers that don’t yet support WebP will use the image in the format they support.

WebP为网络上的图像提供了出色的有损和无损压缩，并支持透明性，从而使网络速度更快。由于并非所有浏览器都支持WebP，因此建议使用<pictu re>元素提供备用。然后，将在支持的浏览器上使用图像格式，而尚不支持WebP的Web浏览器将以其支持的格式使用图像。

<picture>  <source type="image/webp" srcset="imagename.webp">  <source type="image/jpeg" srcset="imagename.jpeg">  <img src="data:imagename.jpeg" alt="image description"></picture>

To compress images to and from the WebP format, cwebp and dwebp command-line tools can be used respectively. Go and try out this image format on squoosh (upload your image and view the compression rate).

若要将图像压缩为WebP格式或从WebP格式压缩图像，可以分别使用cwebp和dwebp命令行工具。尝试在squoosh上尝试这种图像格式(上传您的图像并查看压缩率)。

本地延迟加载 (Native Lazy Loading)

To improve user experience on the web, native lazy-loading will be coming to Chrome. When added to image tags and cross-origin iframes, this defers the loading of the resource until the page is scrolled down near them. It is supported across all chrome platforms — Mac, Windows, Linux, Chrome OS, Android

为了改善网络上的用户体验，Chrome浏览器将采用本地延迟加载功能。当添加到图像标签和跨域iframe时，这会延迟资源的加载，直到页面向下滚动到它们附近为止。所有Chrome平台均支持它-Mac，Windows，Linux，Chrome OS，Android

To lazy-load resources, use the lazyload attribute with “on or off” value. If no value is specified, the browser decides which resource to lazy load.

要延迟加载资源，请使用具有“ on or off”值的lazyload属性。如果未指定任何值，则浏览器将决定要延迟加载的资源。

<img src="data:imagename.png" lazyload="on">

Navigating on the web has not been seamless compared to the experience with native apps. It is a painful experience, especially when navigating the web using low-end devices on slow networks, leaving users staring at a white screen waiting for content to be displayed on the screen. To come to the rescue of these web users, Chrome engineers announced Web Packaging and Portals.

与使用本机应用程序的体验相比，在网络上导航并非无缝。这是一种痛苦的体验，尤其是在速度较慢的网络上使用低端设备浏览网页时，使用户盯着白屏等待内容在屏幕上显示。为了拯救这些网络用户，Chrome工程师宣布了Web Packaging和Portal。

Built on the Accelerated Mobile Pages (AMP) model and achieved through signed exchanges, Web Packaging introduces the ability to sign a web page with a special encryption key that proves the page’s original domain. It then creates a package that can be served from anywhere, which will be used by the browser to represent the domain enabling privacy-preserving instant navigations.

Web Packaging建立在加速移动页面(AMP)模型的基础上，并通过签名交换来实现，它引入了使用特殊的加密密钥对网页进行签名的能力，该密钥可以证明页面的原始域。然后，它创建了一个可以从任何地方提供服务的程序包，浏览器将使用该程序包来表示域，从而实现隐私保护的即时导航。

Portals work like an iframe but can be navigated into allowing users to transition to the portal’s content. It abstracts navigation between pages, making the user feel like they are on a single-page application.

门户网站的工作方式类似于iframe，但可以导航到允许用户过渡到门户网站内容的位置。它抽象了页面之间的导航，使用户感觉就像在单页面应用程序上一样。

<portal src="https://mywebsite.com"></portal>

When the created view is clicked on, add some animations and trigger the activate event:

单击创建的视图后，添加一些动画并触发Activate事件：

portal.activate();

The two proposals combined together enable zero-friction page transitions across the web. This is still early in the development stage, and is therefore subject to change.

将这两个提案结合在一起，可以实现整个网络的零摩擦页面转换。这仍然处于开发阶段的早期，因此可能会发生变化。

Web开发 (Web.dev)

A web platform built to help developers learn how to build for the web and ensure the website is meeting good practice goals. Web.dev focuses on why developers need to care about a given concept, and gives tips to help developers build a better web keeping it fast, discoverable, accessible, safe and resilient.

一个网络平台，旨在帮助开发人员学习如何构建网络并确保网站达到良好实践目标。 Web.dev着重于开发人员为什么需要关心给定的概念，并提供了一些技巧来帮助开发人员构建更好的网站，使其保持快速，可发现，可访问，安全且具有弹性。

VisBug (VisBug)

Built with accessibility in mind, VisBug is a tool that can come in handy for engineers. With this extension, you can explore and tweak your site right in the browser to view the building blocks and how it looks if designed differently.

VisBug考虑到可访问性而构建，是一种可以方便工程师使用的工具。使用此扩展程序，您可以直接在浏览器中浏览和调整站点，以查看构建基块以及设计不同时的外观。

南瓜 (Squoosh)

Squoosh is a 15kB JavaScript-driven progressive web application for image compression written in C. It is compiled using emscripten to web assembly with best-in-class codecs right in the browser.

Squoosh是一个15kB JavaScript驱动的渐进式Web应用程序，用于用C语言编写的图像压缩。它使用emscripten编译为Web组件，并在浏览器中具有一流的编解码器。

Having performance in mind, the team made use of appropriate technologies following coding and performance best practices to yield a performant application:

考虑到性能，团队遵循编码和性能最佳实践来使用适当的技术来生成性能优异的应用程序：

Preact (a 3kB library) to orchestrate the DOM
Preact(3kB库)来编排DOM
WebPack for bundling and code splitting
WebPack用于捆绑和代码拆分
Web workers for lazy loading and concurrency
Web Worker的延迟加载和并发
Dynamic module imports
动态模块导入
Web components (a lower level primitive used by Polymer) for custom element polyfill on Edge
Web组件(Polymer使用的较低级原语)，用于Edge上的自定义元素polyfill

As Jake Archibald would say, go squoosh some images.

就像杰克·阿奇博尔德(Jake Archibald)所说的那样，压缩一些图像。

关键点 (Key Points)

Performance decisions should be made based on data. Respect the user, their data and preferences.
绩效决策应基于数据。尊重用户，他们的数据和偏好。
As developers, we need to test using low-end devices on slow network connections. When we develop for the web using fast devices on fast network connections, we can’t really feel what our users feel and think we met our performance goals.
作为开发人员，我们需要在慢速网络连接上使用低端设备进行测试。当我们使用快速网络连接上的快速设备为Web开发时，我们无法真正感觉到用户的感受并认为我们达到了性能目标。
Performance is not an engineering priority. The success of performance initiatives depends on cross-functional buy-ins. There should be an organizational alignment across all teams that affect the website (marketing, design, engineering etc.).
性能不是工程上的重点。绩效计划的成功取决于跨职能部门的支持。所有影响网站(营销，设计，工程等)的团队都应进行组织协调。
Understand how service workers affect the performance of your site. They can affect it positively or negatively depending on the implementation.
了解服务人员如何影响您网站的性能。它们可能对实施产生正面或负面影响。
Users value a consistent user journey. So, try to reduce friction on your web applications.
用户重视一致的用户旅程。因此，请尝试减少Web应用程序上的摩擦。
Measure apps using the RAIL model — Response, Animation, Idle, and Load.
使用RAIL模型评估应用程序-响应，动画，空闲和负载。
Use HEART (Happiness, Engagement, Adoption, Retention, Task Success) framework to determine the quality of your web app UI.
使用HEART(幸福，参与，采用，保留，任务成功)框架来确定Web应用程序UI的质量。
Some of these announced features covered here and more are behind Chrome flags — chrome://flags/
此处介绍的其中一些已宣布功能以及Chrome标记背后的更多功能-chrome：// flags /

结论 (Conclusion)

This is just the tip of the iceberg — you wouldn’t want to miss the details. The future is on the web and performance is at the root of it all. All recorded sessions throughout the event are available on the Google Chrome Developers Channel. The code is available on GitHub.

这只是冰山一角-您不想错过细节。未来在网络上，性能是一切的根本。整个活动中所有记录的会话都可以在Google Chrome开发者频道上找到。该代码可在GitHub上获得。

Let’s build a better web ?

让我们建立一个更好的网站？

翻译自: https://www.freecodecamp.org/news/highlights-from-chrome-dev-summit-2018-c7f1f1a7e6ae/