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

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

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

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

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

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

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

Посмотрите пост Джейсона и демонстрации в Explainer . У него также есть примеры, в которых используются 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);

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

АудиоВорклет

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

There are some interesting examples of AudioWorklet over on Google Chrome Labs .

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

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

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

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

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