Новое в 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. Дополнительные сведения см. в разделах «Обновления элементов управления формами» и «В центре внимания» блога Chromium.

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

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

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

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

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

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

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

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

Для получения полной информации ознакомьтесь с публикацией Эйдзи «Как сделать ваш веб-сайт изолированным от перекрестного происхождения» с помощью COOP и COEP .

Веб-важные данные

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

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

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

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

И еще

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

Интересно, что будет в будущем? Чтобы убедиться в этом, загляните в трекер API Fugu !

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

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

Подписаться

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

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

,

Пит ЛеПейдж

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. Дополнительные сведения см. в разделах «Обновления элементов управления формами» и «В центре внимания» блога Chromium.

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

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

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

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

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

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

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

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

Для получения полной информации ознакомьтесь с публикацией Эйдзи «Как сделать ваш веб-сайт изолированным от перекрестного происхождения» с помощью COOP и COEP .

Веб-важные данные

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

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

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

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

И еще

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

Интересно, что будет в будущем? Чтобы убедиться в этом, загляните в трекер API Fugu !

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

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

Подписаться

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

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