From 5a8d342ea82408abaf0175edb5608326b36c2b77 Mon Sep 17 00:00:00 2001 From: machine-translation Date: Fri, 7 Feb 2020 10:53:03 +0000 Subject: [PATCH 1/2] Translate nic77.md via GitLocalize --- src/content/ru/updates/2019/09/nic77.md | 229 ++++++++++++++++++++++++ 1 file changed, 229 insertions(+) create mode 100644 src/content/ru/updates/2019/09/nic77.md diff --git a/src/content/ru/updates/2019/09/nic77.md b/src/content/ru/updates/2019/09/nic77.md new file mode 100644 index 00000000000..589524d60e6 --- /dev/null +++ b/src/content/ru/updates/2019/09/nic77.md @@ -0,0 +1,229 @@ +project_path: /web/_project.yaml +book_path: /web/updates/_book.yaml +description: Что нового в Chrome 77 для разработчиков? + +{# wf_published_on: 2019-09-16 #} {# wf_updated_on: 2019-09-17 #} {# +wf_featured_image: /web/updates/images/2019/09/new-77.jpg #} {# wf_tags: +chrome77,new-in-chrome,chromedevsummit,forms,formdata,lazy-loading,performance +#} {# wf_featured_snippet: Chrome 77 is rolling out now! There’s a better way to +track the performance of your site with Largest Contentful Paint. Forms get some +new capabilities. Native lazy loading is here. The Chrome DevSummit is happening +November 11-12 2019. And plenty more. Let’s dive in and see what’s new for +developers in Chrome 77! #} {# wf_blink_components: N/A #} + +# Новое в Chrome 77 {: .page-title } + +{% include "web/_shared/contributors/petelepage.html" %} + +
+ +Chrome 77 is rolling out now! + +
+ +
+ +- There’s a better way to track the performance of your site with[Largest +Contentful Paint](#lcp). +- Forms get some [new capabilities](#new-forms-capabilities). +- [Native lazy loading](#lazy-loading) is here. +- [Chrome DevSummit 2019](#cds2019) is happening November 11-12 2019. +- И многое [другое](#more) . + +I’m [Pete LePage](https://twitter.com/petele), let’s dive in and see what’s +new for developers in Chrome 77! + +
+ +## Largest Contentful Paint {: #lcp } + +Understanding and measuring the real world performance of your site can be hard. +Metrics like `load`, or `DOMContentLoaded`, don’t tell you what the user is +seeing on screen. First Paint, and First Contentful Paint, only capture the +beginning of the experience. First Meaningful Paint is better, but it’s +complex, and sometimes wrong. + + + +The **Largest Contentful Paint API**, available starting in Chrome 77, reports +the render time of the largest content element visible in the viewport and +makes it possible to measure when the main content of the page is loaded. + + + +To measure the Largest Contentful Paint, you’ll need to use a Performance +Observer, and look for `largest-contentful-paint` events. + +```js +let lcp; +const po = new PerformanceObserver((eList) => { + const e = eList.getEntries(); + const last = e[e.length - 1]; + lcp = last.renderTime || last.loadTime; +}); + +const poOpts = { + type: 'largest-contentful-paint', + buffered: true +} +po.observe(poOpts); +``` + +Поскольку страница часто загружается поэтапно, возможно, что самый большой +элемент на странице изменится, поэтому вы должны сообщать в службу аналитики +только о последнем событии с самым `largest-contentful-paint` . + +```js +addEventListener('visibilitychange', function fn() { + const visState = document.visibilityState; + if (lcp && visState === 'hidden') { + sendToAnalytics({'lcp': lcp}); + removeEventListener('visibilitychange', fn, true); + } +}, true); +``` + +Phil has a great post about the [Largest Contentful +Paint](https://web.dev/largest-contentful-paint/) on web.dev. + +
+ +## Новые возможности форм {: #new-forms-capabilities } + +Многие разработчики создают собственные элементы управления формой, либо для +настройки внешнего вида существующих элементов, либо для создания новых +элементов управления, которые не встроены в браузер. Обычно это подразумевает +использование JavaScript и скрытых элементов `` , но это не идеальное +решение. + +Две новые веб-функции, добавленные в Chrome 77, упрощают создание +пользовательских элементов управления формы и устраняют многие из существующих +ограничений. + +### Событие `formdata` + +The `formdata` event is a low-level API that lets any JavaScript code +participate in a form submission. To use it, add a `formdata` event listener +to the form you want to interact with. + +```js +const form = document.querySelector('form'); +form.addEventListener('formdata', ({formData}) => { + formData.append('my-input', myInputValue); +}); +``` + +When the user clicks the submit button, the form fires the `formdata` event, +which includes a `FormData` object that holds all of the data being submitted. +Then, in your `formdata` event handler, you can update or modify the +`formdata` before it’s submitted. + +### Form-associated custom elements + +Пользовательские элементы, связанные с формой, помогают устранить разрыв между +пользовательскими элементами и собственными элементами управления. Добавление +статического свойства `formAssociated` говорит браузеру обрабатывать +пользовательский элемент как все остальные элементы формы. Вы также должны +добавить общие свойства, найденные в элементах ввода, такие как `name` , `value` +и `validity` чтобы обеспечить согласованность с нативными элементами управления. + +
класс MyCounter extends HTMLElement {
+статические formAssociated = true; constructor () {super ();
+this._internals = this.attachInternals (); this._value = 0; } ...}
+ +Check out [More capable form +controls](https://web.dev/more-capable-form-controls/) on web.dev for all the +details! + +
+ +## Native lazy loading {: #lazy-loading } + + + +I’m not sure how I missed native lazy loading in my last video! It’s pretty +amazing, so I’m including it now. Lazy loading is a technique that allows +you to defer the loading of non-critical resources, like off-screen ``'s, +or ` -- There’s a better way to track the performance of your site with[Largest -Contentful Paint](#lcp). -- Forms get some [new capabilities](#new-forms-capabilities). -- [Native lazy loading](#lazy-loading) is here. -- [Chrome DevSummit 2019](#cds2019) is happening November 11-12 2019. +- Новый лучший способ отслеживать производительность вашего сайта с помощью +[Largest Contentful Paint](#lcp). +- Формы получают [новые возможности](#new-forms-capabilities). +- [Нативная ленивая загрузка](#lazy-loading). +- [Chrome DevSummit 2019](#cds2019) пройдёт 11-12 ноября 2019 года. - И многое [другое](#more) . -I’m [Pete LePage](https://twitter.com/petele), let’s dive in and see what’s -new for developers in Chrome 77! +Я [Пит Лепейдж](https://twitter.com/petele), давайте погрузимся и посмотрим, что +нового для разработчиков в Chrome 77!
-## Largest Contentful Paint {: #lcp } +## Отрисовка самого большого содержимого (Largest Contentful Paint) {: #lcp } -Understanding and measuring the real world performance of your site can be hard. -Metrics like `load`, or `DOMContentLoaded`, don’t tell you what the user is -seeing on screen. First Paint, and First Contentful Paint, only capture the -beginning of the experience. First Meaningful Paint is better, but it’s -complex, and sometimes wrong. +Понять и оценить реальную производительность вашего сайта может быть сложно. +Такие метрики, как `load` или `DOMContentLoaded`, не сообщают вам, что видит +пользователь на экране. Первичная отрисовка (First Paint) и Первичная отрисовка +содержимого (First Contentful Paint) - это только начало опыта. Первичная +значимая отрисовка (First Meaningful Paint) лучше, но она сложная, а иногда и +неправильная. -The **Largest Contentful Paint API**, available starting in Chrome 77, reports -the render time of the largest content element visible in the viewport and -makes it possible to measure when the main content of the page is loaded. +**Largest Contentful Paint API**, доступный начиная с Chrome 77, сообщает время +рендеринга самого большого элемента контента, видимого в области просмотра, и +позволяет измерять, когда загружается основное содержимое страницы. -To measure the Largest Contentful Paint, you’ll need to use a Performance -Observer, and look for `largest-contentful-paint` events. +Чтобы измерить Largest Contentful Paint, вам нужно использовать Performance +Observer и искать события с `largest-contentful-paint` . ```js let lcp; @@ -85,8 +86,8 @@ addEventListener('visibilitychange', function fn() { }, true); ``` -Phil has a great post about the [Largest Contentful -Paint](https://web.dev/largest-contentful-paint/) on web.dev. +У Фила отличный пост о самой [Largest Contentful +Paint](https://web.dev/largest-contentful-paint/) на web.dev.
@@ -104,9 +105,9 @@ Paint](https://web.dev/largest-contentful-paint/) on web.dev. ### Событие `formdata` -The `formdata` event is a low-level API that lets any JavaScript code -participate in a form submission. To use it, add a `formdata` event listener -to the form you want to interact with. +Событие `formdata` - это низкоуровневый API, который позволяет любому коду +JavaScript участвовать в отправке формы. Чтобы использовать его, добавьте +слушатель события `formdata` к форме, с которой вы хотите взаимодействовать. ```js const form = document.querySelector('form'); @@ -115,12 +116,12 @@ form.addEventListener('formdata', ({formData}) => { }); ``` -When the user clicks the submit button, the form fires the `formdata` event, -which includes a `FormData` object that holds all of the data being submitted. -Then, in your `formdata` event handler, you can update or modify the -`formdata` before it’s submitted. +Когда пользователь нажимает кнопку отправки, форма бросает событие `formdata`, +которое включает объект `FormData` который содержит все отправляемые данные. +Затем в вашем обработчике события `formdata` вы можете обновить или изменить +данные {code5}formdata{/code5} перед их отправкой. -### Form-associated custom elements +### Пользовательские элементы (custom elements), связанные с формой Пользовательские элементы, связанные с формой, помогают устранить разрыв между пользовательскими элементами и собственными элементами управления. Добавление @@ -133,13 +134,12 @@ Then, in your `formdata` event handler, you can update or modify the статические formAssociated = true; constructor () {super (); this._internals = this.attachInternals (); this._value = 0; } ...} -Check out [More capable form -controls](https://web.dev/more-capable-form-controls/) on web.dev for all the -details! +Посмотрите на [более мощные элементы управления +формой](https://web.dev/more-capable-form-controls/) на web.dev!
-## Native lazy loading {: #lazy-loading } +## Нативная ленивая загрузка {: #lazy-loading } -I’m not sure how I missed native lazy loading in my last video! It’s pretty -amazing, so I’m including it now. Lazy loading is a technique that allows -you to defer the loading of non-critical resources, like off-screen ``'s, -or `