Интерпретация новых возможностей Chrome 84

внешний интерфейс JavaScript

Краткие факты

  • SameSite CookieВосстановить силу на
  • устарелTLS1.0а такжеTLS1.1
  • Web animations APIвозобновить
  • Поддержка автономной загрузки данных веб-страниц
  • Поддержка блокировки пробуждения
  • Web Assembly SIMDперейти на экспериментальную стадию
  • DevToolsновыйIssuesВкладка
  • JavaScriptПоддержка приватных методов
  • JavaScriptПоддержка слабых ссылок

обновление безопасности

Отменить изменения файлов cookie SameSite

В апреле,Chromeвременно отложеноSameSite Cookieсвойства реализованы для обеспечения того, чтобыCOVID-19Стабильность веб-сайта, предоставляющего основные услуги на критическом начальном этапе реагирования.

эти несколько месяцев,ChromeСлежу за готовностью этих площадок,Chrome 84заодно восстановитсяSameSite cookieпринудительное вскрытиеChrome 80+Включить принудительное включение.

Устаревшие TLS1.0 и TLS1.1

TLS (Transport Layer Security) — это защитаHTTPSсоглашение. Его история насчитывает почти 20 летTLS1.0и его более ранние предшественникиSSL,TLS1.0а также1.1Оба имеют много недостатков:

  • TLS 1.0и 1.1 используют как MD5, так и SHA-1, которые являются слабыми хэшами при завершении вычисления хэша.
  • TLS 1.0и 1.1 используют MD5 и SHA-1 для подписи сервера.
  • TLS 1.0а 1.1 поддерживает только шифры RC4 и CBC. RC4 сломан и после этого будет удален. Конструкция режима CBC TLS ошибочна и уязвима.
  • TLS 1.0изCBCШифр также неправильно строит свой вектор инициализации.
  • TLS 1.0больше не соответствуетPCI-DSS.

служба поддержкиTLS1.2является обязательным условием, чтобы избежать вышеперечисленных проблем. Рабочая группа TLS устарелаTLS 1.0и 1.1. Chrome теперь также устарел и от этих протоколов.

Web animations API

Хром 84 естьWeb animations APIДобавлен ряд ранее не поддерживаемых функций.

Обещайте поддержку

animation.readyа такжеanimation.finishedслужба поддержкиPromiseпередача:

const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});

повышение производительности

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

elem.addEventListener('mousemove', evt => {
 rectangle.animate(
   { transform: translate(${evt.clientX}px, ${evt.clientY}px) },
   { duration: 500, fill: 'forwards' }
 );
});

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

  • После завершения анимации.
  • Также завершена одна или несколько анимаций в последовательности композиции.
  • Новая анимация предназначена для анимации тех же свойств.

Более плавный композитный режим анимации

Теперь вы можете установить режим компоновки анимации, что означает, что в дополнение к стандартномуreplaceВне режимов анимация может быть аддитивной. Режим композиции позволяет разработчикам писать различные анимации и контролировать, как комбинируются эффекты. Теперь поддерживаются три составных режима:'replace'(режим по умолчанию)'add',а также'accumulate'.

по умолчанию'replace'В композитном режиме окончательная анимация заменитtransformсвойства и в конечном итоге выглядят какrotate(360deg) scale(1.4). для'add',CompositeДобавляя вращение и умножая масштаб, конечное состояниеrotate(720deg) scale(1.96).'accumulate'Слияние преобразований, результатrotate(720deg) scale(1.8).

Content indexing API

использовать только что добавленныйContent Indexing APIВы можете добавить контент для автономного использованияURLи метаданные. Затем контент представляется пользователю через эти метаданные, что улучшает возможность обнаружения.

Таким образом, ваш сайт доступен даже при отсутствии интернет-соединения.

Вот пример вызова:

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  // Required; set to something unique within your web app.
  id: 'article-123',
  // Required; url needs to be an offline-capable HTML page.
  // For compatibility during the Origin Trial, include launchUrl as well.
  url: '/articles/123',
  launchUrl: '/articles/123',
  // Required; used in user-visible lists of content.
  title: 'Article title',
  // Required; used in user-visible lists of content.
  description: 'Amazing article about things!',
  // Required; used in user-visible lists of content.
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
  // Optional; valid categories are currently:
  // 'homepage', 'article', 'video', 'audio', or '' (default).
  category: 'article',
});

Wake lock API

У вас когда-нибудь возникала проблема, когда вы смотрели на экран компьютера, занимаясь другими делами, а затем компьютер переходил в заставку, не отвечая на запросы в течение длительного времени.

пройти черезWake lock APIВеб-страницы могут запрашивать блокировку пробуждения, чтобы предотвратить затемнение экрана или вход в заставку.

можно использоватьnavigator.wakeLock.request()Поднимите wakelock и объединитеsetTimeoutАвтовыпуск через некоторое время:

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock was released');
    });
    console.log('Screen Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

Idle Detection API

обнаружение холостого хода (Idle Detection API) будет уведомлять разработчика, когда пользователь бездействует, указывая на такие вещи, как отсутствие взаимодействия с клавиатурой, мышью, экраном в течение длительного периода времени, активация экранной заставки, блокировка экрана или переход на другой экран. Разработчики могут настраивать пороговые значения для запуска уведомлений.

Следующие сценарии являются хорошими кандидатами для обнаружения простоя:

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

Проверьте, доступно ли обнаружение простоя:

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

Пример вызова:

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

Web Assembly SIMD

SIMD(Single Instruction Multiple Data), то есть один поток инструкций и множественный поток данных, — это метод, который использует один контроллер для управления несколькими процессорами и одновременно выполняет одну и ту же операцию над каждым набором данных (также известным как «вектор данных»). для достижения техники пространственного параллелизма. Проще говоря, инструкция может обрабатывать несколько фрагментов данных одновременно.

WebAssembly SIMDКонечная цель предложения — ввести векторные операции вWebAssemblyВ спецификации это может значительно ускорить сложные вычислительные приложения, такие как аудио/видеокодеки, приложения для обработки изображений, криптографические приложения и т. д. Хотя он все еще находится на экспериментальной стадии, в настоящее время он широко используется программами с открытым исходным кодом (такими какHalide,OpenCV.js,XNNPACK) поддерживаютсяWebAssembly SIMD.

Мы можем ясно видетьSIMDразница в производительности. если нетSIMD, современные ноутбуки могут воспроизводить только около 3 кадров в секунду, при этом позволяяSIMDможно получить, когда15-16Плавный опыт в кадрах в секунду.

Вот более интересный пример «невидимки»:

WebAssembly SIMDПробная версия оригинальной версии доступна по адресуChrome 84-86Экспериментируйте в версии.

Обновление инструментов разработчика

вкладка проблемы

Добавлено в ящикissuesвкладок, цель состоит в том, чтобы уменьшить беспорядок в выводе консоли.

В настоящее время консоль — это веб-разработчики, библиотеки, фреймворки иChromeЦентральное место для регистрации сообщений, предупреждений и ошибок.IssuesВкладки отображают предупреждения от браузеров в структурированном, агрегированном, действенном виде со ссылками наDevToolsзатронутые ресурсы и предоставить рекомендации по устранению этих проблем. Со временем все большеChromeПредупреждение появится вIssuesВкладки вместо консолей, что поможет уменьшить беспорядок в консолях.

Обновление панели производительности

Панель «Производительность» теперь отображает информацию об общем времени блока (TBT) в нижнем колонтитуле. TBT — это показатель производительности загрузки, который помогает количественно определить, сколько времени требуется, чтобы страница стала доступной. По сути, он измеряет, как долго страница кажется доступной (поскольку ее содержимое было отображено на экране), но на самом деле недоступна, потому чтоJavaScriptОсновной поток заблокирован, поэтому страница не может реагировать на ввод пользователя.TBTявляется основной лабораторной метрикой, которая аппроксимирует первую задержку ввода, т.е.GoogleновыйCore Web Vitalsодин.

получитьTBT, пожалуйста, не используйтеReload PageПерезагрузите рабочий процесс страницы, чтобы записать производительность загрузки страницы. вместо этого нажмитеRecordЗапишите, вручную перезагрузите страницу, подождите, пока страница загрузится, затем остановите запись. Если ты видишь,Total Blocking Time: UnavailableозначаетDevToolsневозможноChromeдля получения требуемой информации из внутренних данных профиля.

Кроме того, он поддерживаетCLS:

Предварительный просмотр изображения

паритьbackground-imageВы можете увидеть предварительный просмотр изображения во всплывающей подсказке:

V8 v8.4 - Поддержка частных методов

существуетv7.4Недавно добавленные приватные поля в версии дополнительно поддерживают приватные методы и средства доступа. Синтаксически имена приватных методов и методов доступа начинаются с #, как и приватные поля. Синтаксис кратко описан ниже:

class Component {
  #privateMethod() {
    console.log("I'm only callable inside Component!");
  }
  get #privateAccessor() { return 42; }
  set #privateAccessor(x) { }
}

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

V8 v8.4 - Слабые ссылки

JavaScriptявляется языком со сборщиком мусора, что означает, что при запуске сборщика мусора память, занятая объектами, к которым программа больше не может получить доступ, может быть автоматически освобождена. КромеWeakMapИ вWeakSetПомимо цитирования,JavaScriptВсе ссылки в являются надежными и предотвращают сборку мусора объекта, на который ссылаются. Например, следующий код: покаglobalRefДоступный через глобальную область видимости, ни он, ни функции в его свойстве обратного вызова не будут переработаны.

const globalRef = {
  callback() { console.log('foo'); }
};

JavaScriptТеперь разработчики могутWeakRefФункции делают слабые ссылки на объекты. Если на объект, на который ссылается слабая ссылка, также нет строгой ссылки, они не предотвращают его сборку мусора.

const globalWeakRef = new WeakRef({
  callback() { console.log('foo'); }
});

(async function() {
  globalWeakRef.deref().callback();

  await new Promise((resolve, reject) => {
    setTimeout(() => { resolve('foo'); }, 42);
  });

  globalWeakRef.deref()?.callback();
})();
Категории