Новое в Chrome 64

Пит ЛеПейдж

  • Поддержка ResizeObservers уведомит вас, когда прямоугольник содержимого элемента изменил свой размер.
  • Модули теперь могут получить доступ к конкретным метаданным хоста с помощью import.meta .
  • Блокировщик всплывающих окон становится сильнее.
  • window.alert() больше не меняет фокус.

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

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

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

ResizeObserver

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

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

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

Как и другие наблюдатели, использовать его довольно просто: создайте объект 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 для Elements, чтобы получить более подробную информацию и примеры из реальной жизни.

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

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

import.meta

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

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

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

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

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

window.alert()

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

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

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

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