Новое в Chrome 83

Пит ЛеПейдж

Chrome 83 уже начинает распространяться как стабильная версия.

Вот что вам нужно знать:

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

Надежные типы

Межсайтовый скриптинг на основе DOM — одна из самых распространенных уязвимостей безопасности в Интернете. Случайно внедрить его на свою страницу может быть легко. Доверенные типы могут помочь предотвратить такие уязвимости, поскольку они требуют обработки данных перед передачей их в потенциально опасную функцию.

Возьмем, к примеру, innerHTML : если я попытаюсь передать строку при включенных доверенных типах, произойдет ошибка TypeError, поскольку браузер не знает, можно ли доверять этой строке.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

Вместо этого мне нужно либо использовать безопасную функцию, например textContent , передать доверенный тип, либо создать элемент и использовать appendChild() .

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

Прежде чем включить доверенные типы, вам необходимо выявить и устранить любые нарушения с помощью заголовка CSP report-only .

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

Затем, как только вы все застегнете, вы сможете включить его должным образом. Полные сведения см. в разделе Предотвращение уязвимостей межсайтового скриптинга на основе DOM с помощью доверенных типов на web.dev.

Обновления элементов управления формами

Мы используем элементы управления HTML-формами каждый день, и они играют ключевую роль в интерактивности веба. Они просты в использовании, имеют встроенную доступность и знакомы нашим пользователям. Стиль элементов управления формами может быть непоследовательным в разных браузерах и операционных системах. И нам часто приходится отправлять ряд правил CSS, чтобы получить единообразный вид на разных устройствах.

Раньше стиль элементов управления формы по умолчанию.
После этого обновлен стиль элементов управления формы.

Я был действительно впечатлен работой Microsoft по модернизации внешнего вида элементов управления формами. Помимо более приятного визуального стиля, они обеспечивают лучшую поддержку сенсорного ввода и лучшую доступность, включая улучшенную поддержку клавиатуры!

Новые элементы управления формами уже появились в Microsoft Edge и теперь доступны в Chrome 83. Для получения дополнительной информации см. разделы Обновления элементов управления формами и Focus в блоге Chromium.

Испытания происхождения

Измерение памяти с помощью measureMemory()

Начиная с пробной версии в Chrome 83, performance.measureMemory() — это новый API, который позволяет измерять использование памяти вашей страницей и обнаруживать утечки памяти.

Утечки памяти легко могут возникнуть:

  • Забыли отменить регистрацию прослушивателя событий
  • Захват объектов из iframe
  • Не закрывать работника
  • Накопление объектов в массивах
  • и так далее.

Утечки памяти приводят к тому, что страницы кажутся пользователям медленными и перегруженными.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

Ознакомьтесь со статьей «Отслеживание общего использования памяти вашей веб-страницей с помощью measureMemory() на сайте web.dev, чтобы узнать все подробности о новом API.

Обновления API собственной файловой системы

API Native File System начал новую пробную версию в Chrome 83 с поддержкой записываемых потоков и возможностью сохранения дескрипторов файлов.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

Записываемые потоки значительно упрощают запись в файл, а поскольку это поток, вы можете легко передавать ответы из одного потока в другой.

Сохранение дескрипторов файлов в IndexedDB позволяет вам сохранять состояние или помнить, с какими файлами работал пользователь. Например, сохранять список недавно отредактированных файлов, открывать последний файл, с которым работал пользователь, и т. д.

Для использования этих функций вам понадобится новый пробный токен Origin, поэтому ознакомьтесь с моей обновленной статьей API собственной файловой системы: упрощение доступа к локальным файлам на web.dev, в которой вы найдете все подробности и узнаете, как получить новый пробный токен Origin.

Другие испытания происхождения

Проверять для получения полного списка функций в пробной версии Origin.

Новые политики кросс-происхождения

Некоторые веб-API повышают риск атак по сторонним каналам, таких как Spectre. Чтобы снизить этот риск, браузеры предлагают изолированную среду на основе согласия, называемую изолированной кросс-источником. Изолированное кросс-источником состояние также предотвращает изменения document.domain . Возможность изменять document.domain позволяет осуществлять связь между документами одного сайта и считается лазейкой в ​​политике одного источника.

Подробную информацию можно найти в статье Эйджи «Создание «междоменной изоляции» вашего сайта с помощью COOP и COEP» .

Веб-показатели

Измерение качества пользовательского опыта имеет много аспектов. Хотя некоторые аспекты пользовательского опыта зависят от сайта и контекста, существует общий набор сигналов — « Core Web Vitals », — который имеет решающее значение для всех веб-опытов. Такие основные потребности пользовательского опыта включают в себя опыт загрузки, интерактивность и визуальную стабильность содержимого страницы, и в совокупности являются основой Core Web Vitals 2020 года.

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

Все эти метрики фиксируют важные результаты, ориентированные на пользователя, измеримы в полевых условиях и имеют эквиваленты и инструменты лабораторной диагностики метрик. Например, хотя «Наибольшая отрисовка контента» является метрикой загрузки верхнего уровня, она также сильно зависит от «Первой отрисовки контента» (FCP) и «Времени до первого байта» (TTFB), которые по-прежнему критически важны для мониторинга и улучшения.

Чтобы узнать больше, ознакомьтесь со статьей «Введение в Web Vitals: основные показатели для здорового сайта» в блоге Chromium для получения полной информации.

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

  • Chrome теперь поддерживает API обнаружения штрихкодов , который обеспечивает возможность обнаружения и декодирования штрихкодов.
  • Новая функция CSS @supports обеспечивает обнаружение функций для селекторов CSS.
  • Новые аннотации ARIA поддерживают доступность для экранного диктора для комментариев, предложений и выделения текста семантическими значениями (аналогично <mark> ).
  • Медиазапрос prefers-color-scheme позволяет авторам поддерживать собственную темную тему, чтобы иметь полный контроль над создаваемым ими опытом.
  • JavaScript теперь поддерживает модули в общих рабочих процессах .

Хотите узнать, что будет в будущем? Проверьте Fugu API Tracker, чтобы узнать!

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

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

Подписаться

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

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