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..4894b740a61 --- /dev/null +++ b/src/content/ru/updates/2019/09/nic77.md @@ -0,0 +1,230 @@ +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 уже выпущен! + +
+ +
+ +- Новый лучший способ отслеживать производительность вашего сайта с помощью +[Largest Contentful Paint](#lcp). +- Формы получают [новые возможности](#new-forms-capabilities). +- [Нативная ленивая загрузка](#lazy-loading). +- [Chrome DevSummit 2019](#cds2019) пройдёт 11-12 ноября 2019 года. +- И многое [другое](#more) . + +Я [Пит Лепейдж](https://twitter.com/petele), давайте погрузимся и посмотрим, что +нового для разработчиков в Chrome 77! + +
+ +## Отрисовка самого большого содержимого (Largest Contentful Paint) {: #lcp } + +Понять и оценить реальную производительность вашего сайта может быть сложно. +Такие метрики, как `load` или `DOMContentLoaded`, не сообщают вам, что видит +пользователь на экране. Первичная отрисовка (First Paint) и Первичная отрисовка +содержимого (First Contentful Paint) - это только начало опыта. Первичная +значимая отрисовка (First Meaningful Paint) лучше, но она сложная, а иногда и +неправильная. + + + +**Largest Contentful Paint API**, доступный начиная с Chrome 77, сообщает время +рендеринга самого большого элемента контента, видимого в области просмотра, и +позволяет измерять, когда загружается основное содержимое страницы. + + + +Чтобы измерить Largest Contentful Paint, вам нужно использовать Performance +Observer и искать события с `largest-contentful-paint` . + +```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); +``` + +У Фила отличный пост о самой [Largest Contentful +Paint](https://web.dev/largest-contentful-paint/) на web.dev. + +
+ +## Новые возможности форм {: #new-forms-capabilities } + +Многие разработчики создают собственные элементы управления формой, либо для +настройки внешнего вида существующих элементов, либо для создания новых +элементов управления, которые не встроены в браузер. Обычно это подразумевает +использование JavaScript и скрытых элементов `` , но это не идеальное +решение. + +Две новые веб-функции, добавленные в Chrome 77, упрощают создание +пользовательских элементов управления формы и устраняют многие из существующих +ограничений. + +### Событие `formdata` + +Событие `formdata` - это низкоуровневый API, который позволяет любому коду +JavaScript участвовать в отправке формы. Чтобы использовать его, добавьте +слушатель события `formdata` к форме, с которой вы хотите взаимодействовать. + +```js +const form = document.querySelector('form'); +form.addEventListener('formdata', ({formData}) => { + formData.append('my-input', myInputValue); +}); +``` + +Когда пользователь нажимает кнопку отправки, форма бросает событие `formdata`, +которое включает объект `FormData` который содержит все отправляемые данные. +Затем в вашем обработчике события `formdata` вы можете обновить или изменить +данные {code5}formdata{/code5} перед их отправкой. + +### Пользовательские элементы (custom elements), связанные с формой + +Пользовательские элементы, связанные с формой, помогают устранить разрыв между +пользовательскими элементами и собственными элементами управления. Добавление +статического свойства `formAssociated` говорит браузеру обрабатывать +пользовательский элемент как все остальные элементы формы. Вы также должны +добавить общие свойства, найденные в элементах ввода, такие как `name` , `value` +и `validity` чтобы обеспечить согласованность с нативными элементами управления. + +
класс MyCounter extends HTMLElement {
+статические formAssociated = true; constructor () {super ();
+this._internals = this.attachInternals (); this._value = 0; } ...}
+ +Посмотрите на [более мощные элементы управления +формой](https://web.dev/more-capable-form-controls/) на web.dev! + +
+ +## Нативная ленивая загрузка {: #lazy-loading } + + + +Я не уверен, как я пропустил нативную ленивую загрузку в моем последнем видео! +Это довольно удивительно, поэтому я включаю это сейчас. Ленивая загрузка - это +метод, который позволяет вам откладывать загрузку некритических ресурсов, таких +как закадровые `` или `