Новое в Chrome 77

Пит ЛеПейдж

Chrome 77 уже доступен!

Меня зовут Пит ЛеПейдж . Давайте углубимся в детали и посмотрим, что нового появилось в Chrome 77 для разработчиков!

Самая большая содержательная краска

Понимание и измерение реальной производительности вашего сайта может быть сложным. Такие метрики, как load или DOMContentLoaded , не говорят вам, что пользователь видит на экране. First Paint и First Contentful Paint только фиксируют начало опыта. First Meaningful Paint лучше, но он сложен и иногда неверен.

API Largest Contentful Paint , доступный начиная с Chrome 77, сообщает время отрисовки самого большого элемента контента, видимого в области просмотра, и позволяет измерить время загрузки основного контента страницы.

Чтобы измерить отрисовку самого большого контента, вам нужно будет использовать Performance Observer и искать события largest-contentful-paint .

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 .

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

У Фила есть замечательный пост о « Самой большой содержательной отрисовке» на web.dev.

Новые возможности форм

Многие разработчики создают пользовательские элементы управления формами, либо для настройки внешнего вида и поведения существующих элементов, либо для создания новых элементов управления, которые не встроены в браузер. Обычно это подразумевает использование JavaScript и скрытых элементов <input> , но это не идеальное решение.

Две новые веб-функции, добавленные в Chrome 77, упрощают создание пользовательских элементов управления формами и устраняют многие из существующих ограничений.

Событие formdata

Событие formdata — это низкоуровневый API, который позволяет любому коду JavaScript участвовать в отправке формы. Чтобы использовать его, добавьте прослушиватель событий formdata к форме, с которой вы хотите взаимодействовать.

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

Когда пользователь нажимает кнопку отправки, форма запускает событие formdata , которое включает объект FormData , содержащий все отправляемые данные. Затем в обработчике событий formdata вы можете обновить или изменить formdata перед отправкой.

Пользовательские элементы, связанные с формой

Связанные с формой пользовательские элементы помогают преодолеть разрыв между пользовательскими элементами и собственными элементами управления. Добавление статического свойства formAssociated сообщает браузеру, что пользовательский элемент следует обрабатывать так же, как и все другие элементы формы. Вам также следует добавить общие свойства, имеющиеся в элементах ввода, например, name , value и validity чтобы обеспечить согласованность с собственными элементами управления.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

Подробности смотрите в статье «Более эффективные элементы управления формами» на сайте web.dev!

Собственная ленивая загрузка

Не знаю, как я пропустил нативную ленивую загрузку в своем последнем видео! Это довольно удивительно, поэтому я включаю ее сейчас. Ленивая загрузка — это метод, который позволяет отложить загрузку некритических ресурсов, таких как внеэкранные <img> или <iframe> — до тех пор, пока они не понадобятся, что повышает производительность вашей страницы.

Начиная с Chrome 76, браузер обрабатывает отложенную загрузку автоматически, без необходимости писать специальный код отложенной загрузки или использовать отдельную библиотеку JavaScript.

Чтобы сообщить браузеру, что вы хотите изображение или iframe с отложенной загрузкой, используйте атрибут loading="lazy" . Изображения и iframe, которые находятся "выше сгиба", загружаются нормально. А те, что находятся ниже, загружаются только тогда, когда пользователь прокручивает страницу рядом с ними.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

Подробную информацию можно найти в статье «Отложенная загрузка на уровне браузера для веб-сайта» на сайте web.dev.

Chrome Dev Summit 2019

Chrome Dev Summit пройдет 11 и 12 ноября.

Это прекрасная возможность узнать о новейших инструментах и ​​обновлениях, которые появятся на веб-платформе, а также послушать мнение непосредственно команды инженеров Chrome.

Прямая трансляция будет проходить на нашем канале YouTube , или, если вы хотите присутствовать лично, вы можете запросить приглашение на сайте Chrome Dev Summit 2019 .

И многое другое!

Это лишь некоторые из изменений в Chrome 77 для разработчиков, конечно, их гораздо больше.

API-интерфейс выбора контактов , доступный в качестве пробной версии Origin, представляет собой новый инструмент выбора контактов по запросу, который позволяет пользователям выбирать одну или несколько записей из своего списка контактов и делиться ограниченной информацией о выбранных контактах с веб-сайтом.

А в API intl.NumberFormat появились новые единицы измерения.

Дальнейшее чтение

Это охватывает только некоторые из ключевых моментов. Проверьте ссылки ниже для дополнительных изменений в Chrome 77.

Подписаться

Хотите быть в курсе наших видео? Подпишитесь на наш канал Chrome Developers на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео.

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 78, я сразу же расскажу вам, что нового в Chrome!