Новое в Chrome 77

Пит ЛеПейдж

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

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

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

Понять и измерить реальную производительность вашего сайта может быть непросто. Такие метрики, как load или DOMContentLoaded , не сообщают вам, что пользователь видит на экране. First Paint и First Contentful 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 2019

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

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

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

И более!

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

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

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

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

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

Подписаться

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

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