Новое в Chrome 66

Пит ЛеПейдж

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

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

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

Типизированная объектная модель CSS

Если вы когда-либо обновляли свойство CSS с помощью JavaScript, вы использовали объектную модель CSS. Но он возвращает все в виде строки.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

Чтобы анимировать свойство opacity , мне пришлось бы преобразовать строку в число, затем увеличить значение и применить изменения. Не совсем идеально.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

В новой модели типизированных объектов CSS значения CSS представляются как типизированные объекты JavaScript, что устраняет многие манипуляции с типами и обеспечивает более разумный способ работы с CSS.

Вместо использования element.style вы получаете доступ к стилям через свойство .attributeStyleMap или .styleMap . Они возвращают объект, похожий на карту, который упрощает чтение или обновление.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

По сравнению со старой объектной моделью CSS, ранние тесты показывают улучшение количества операций в секунду примерно на 30 % — что особенно важно для анимации JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

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

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

У Эрика есть отличный пост с несколькими демонстрациями и примерами в пояснении .

API асинхронного буфера обмена

const successful = document.execCommand('copy');

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

Новый Async Clipboard API — это замена, которая работает асинхронно и интегрируется с API разрешений, чтобы обеспечить удобство работы пользователей.

Текст можно скопировать в буфер обмена, вызвав writeText() .

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Поскольку этот API является асинхронным, функция writeText() возвращает обещание, которое будет разрешено или отклонено в зависимости от того, успешно ли скопирован переданный нами текст.

Аналогично, текст можно прочитать из буфера обмена, вызвав getText() и дождавшись, пока возвращенный Promise разрешится с текстом.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

Ознакомьтесь с постом Джейсона и демонстрациями в объяснителе . У него также есть примеры, использующие async функции.

Новый BitmapRenderer контекста холста

Элемент canvas позволяет манипулировать графикой на уровне пикселей, рисовать графики, манипулировать фотографиями или даже обрабатывать видео в реальном времени. Но если вы не начинаете с пустого canvas , вам нужен способ рендеринга изображения на canvas .

Исторически это означало создание тега image и последующий рендеринг его содержимого на canvas . К сожалению, это означает, что браузеру необходимо хранить в памяти несколько копий изображения.

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

Начиная с Chrome 66, появился новый контекст асинхронного рендеринга, который упростил отображение объектов ImageBitmap . Теперь они визуализируются более эффективно и с меньшими задержками, работая асинхронно и избегая дублирования памяти.

Чтобы использовать его:

  1. Вызовите createImageBitmap и передайте ему объект изображения, чтобы создать изображение.
  2. Возьмите контекст bitmaprenderer с canvas .
  3. Затем перенесите изображение.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Готово, я отрендерил изображение!

АудиоВорлет

Рабочие материалы уже в наличии! PaintWorklet поставляется в Chrome 65, и теперь мы включаем AudioWorklet по умолчанию в Chrome 66. Этот новый тип Worklet можно использовать для обработки звука в выделенном аудиопотоке, заменяя устаревший ScriptProcessorNode, который выполнялся в основном потоке. Каждый AudioWorklet работает в своей собственной глобальной области, сокращая задержку и повышая стабильность пропускной способности.

В Google Chrome Labs есть несколько интересных примеров AudioWorklet.

И более!

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

  • TextArea и Select теперь поддерживают атрибут autocomplete .
  • Установка autocapitalize для элемента form будет применяться ко всем дочерним полям формы, улучшая совместимость с реализацией autocapitalize в Safari.
  • trimStart() и trimEnd() теперь доступны как основанный на стандартах способ удаления пробелов из строк.

Обязательно ознакомьтесь с разделом «Новинки Chrome DevTools» , чтобы узнать, что нового в DevTools в Chrome 66. А если вас интересуют прогрессивные веб-приложения, посмотрите новую серию видеороликов «PWA Roadshow» . Затем нажмите кнопку подписки на нашем канале YouTube , и вы будете получать уведомление по электронной почте каждый раз, когда мы запускаем новое видео.

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