Новое в Chrome 64

Пит ЛеПейдж

И это еще не все !

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

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

ResizeObserver

Отслеживание изменения размера элемента может быть немного мучительным. Скорее всего, вы прикрепите слушателя к событию resize документа, а затем вызовете getBoundingClientRect или getComputedStyle . Но оба эти метода могут вызвать перегрузку макета.

А что, если окно браузера не изменило размер, но в документ был добавлен новый элемент? Или вы добавили display: none к элементу? Оба эти варианта могут изменить размер других элементов на странице.

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

Как и другие Observer, использовать его довольно просто: создайте объект ResizeObserver и передайте обратный вызов конструктору. Обратный вызов получит массив ResizeOberverEntries – по одной записи на наблюдаемый элемент – которые содержат новые измерения для элемента.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Проверьте ResizeObserver : это как document.onresize для элементов для получения более подробной информации и примеров реального мира.

Я ненавижу вкладки. Вы знаете их, это когда страница открывает всплывающее окно в какой-то пункт назначения и ориентируется на страницу. Обычно один из них - это объявление или то, что вы не хотели.

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

import.meta

При написании модулей JavaScript вам часто требуется доступ к метаданным, специфичным для хоста, о текущем модуле. Chrome 64 теперь поддерживает свойство import.meta в модулях и предоставляет URL-адрес для модуля как import.meta.url .

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

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

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

  • В настоящее время Chrome поддерживает названные захваты , а свойство Unicode выходит в регулярные выражения.
  • Значение preload по умолчанию для элементов <audio> и <video> теперь metadata . Это приводит Chrome в соответствие с другими браузерами и помогает сократить использование полосы пропускания и ресурсов, загружая только метаданные, а не сами медиаданные.
  • Теперь вы можете использовать Request.prototype.cache для просмотра режима кэша Request и определить, является ли запрос запросом перезагрузки.
  • Используя API Focus Management, теперь вы можете сосредоточить элемент, не прокручивая его с помощью атрибута preventScroll .

window.alert()

О, и еще одно! Хотя это и не совсем "функция разработчика", меня это радует. window.alert() больше не выводит фоновую вкладку на передний план! Вместо этого оповещение будет показано, когда пользователь переключится обратно на эту вкладку.

Нет больше случайного переключения вкладок, потому что что -то запустило window.alert Повторяйте меня. Я смотрю на тебя, старый календарь Google.

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

Я Пит Лепейдж, и как только Chrome 65 выпущен, я буду здесь, чтобы сказать вам - что нового в Chrome!