Новое в 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 , а также для создания собственных асинхронных итераторов с помощью фабрик асинхронных итераторов.

Поведение при прокрутке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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