Новое в Chrome 63

Пит ЛеПейдж

И есть еще много всего !

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

Хотите полный список изменений? Ознакомьтесь со списком изменений репозитория исходного кода Chromium .

Динамический импорт модулей

Импорт модулей JavaScript очень удобен, но он статичен, и вы не можете импортировать модули в зависимости от условий выполнения.

К счастью, в Chrome 63 это изменилось благодаря новому синтаксису динамического импорта . Он позволяет динамически загружать код в модули и скрипты во время выполнения. Его можно использовать для отложенной загрузки сценария только тогда, когда это необходимо, что повышает производительность вашего приложения.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

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

Асинхронные итераторы и генераторы

Написание кода, выполняющего любые итерации с async функциями, может быть уродливым. Фактически, это основная часть моего любимого вопроса по программированию на собеседовании.

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

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Асинхронные итераторы можно использовать в циклах for-of , а также для создания собственных асинхронных итераторов с помощью фабрик асинхронных итераторов.

Поведение при чрезмерной прокрутке

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

Раньше с полным обновлением страницы.

После этого обновите только содержимое.

В некоторых случаях вы можете переопределить это поведение и поделиться своим собственным опытом. Это то, что делает прогрессивное веб-приложение Twitter : когда вы открываете страницу, вместо перезагрузки всей страницы оно просто добавляет любые новые твиты в текущий вид.

Chrome 63 теперь поддерживает свойство CSS overscroll-behavior , что позволяет легко переопределить поведение браузера при переполнении по умолчанию.

Вы можете использовать его для:

Самое приятное то, overscroll-behavior не оказывает негативного влияния на производительность вашей страницы!

Изменения пользовательского интерфейса разрешений

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

90% всех запросов на разрешения игнорируются или временно блокируются.

В Chrome 59 мы начали решать эту проблему, временно блокируя разрешение, если пользователь трижды отклонял запрос. Теперь в m63 Chrome для Android будет создавать модальные диалоговые окна запросов разрешений.

Помните, это касается не только push-уведомлений, это касается всех запросов на разрешения . Если вы запросите разрешение в подходящее время и в соответствующем контексте , мы обнаружили, что пользователи в два с половиной раза чаще дадут разрешение!

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

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

  • finally теперь доступен в экземплярах Promise и вызывается после того, как Promise был выполнен или отклонен.
  • Новый JavaScript API памяти устройства помогает понять ограничения производительности, предоставляя подсказки об общем объеме оперативной памяти на устройстве пользователя. Вы можете адаптировать свой опыт во время выполнения, упрощая работу на устройствах более низкого уровня и предоставляя пользователям лучший опыт с меньшим количеством разочарований.
  • API Intl.PluralRules позволяет создавать приложения, которые понимают множественное число данного языка, указывая, какая форма множественного числа применяется для данного числа и языка. И может помочь с порядковыми числами.

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

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