이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 66의 새로운 기능

Pete LePage

새로운 CSS 유형 모델 객체를 사용하면 CSS 조작이 더 쉬워집니다.
이제 클립보드에 대한 액세스가 비동기식입니다.
캔버스 요소의 새로운 렌더링 컨텍스트가 추가되었습니다.

이 외에도 다양한 기능이 제공됩니다.

저는 피트 레페이지입니다. 이제 Chrome 66의 개발자를 위한 새로운 기능을 살펴보겠습니다.

변경사항의 전체 목록을 확인하시겠습니까? Chromium 소스 저장소 변경사항 목록을 확인하세요.

CSS 유형 개체 모델

자바스크립트를 통해 CSS 속성을 업데이트한 적이 있다면 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

에릭은 설명서에 몇 가지 데모와 예시가 포함된 훌륭한 게시물을 보유하고 있습니다.

Async Clipboard API

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

작은 텍스트에서는 document.execCommand를 사용한 동기식 복사 및 붙여넣기가 문제가 될 수 있지만, 다른 모든 경우에는 동기식 특성으로 인해 페이지가 차단되어 사용자 환경이 저하될 가능성이 높습니다. 또한 브라우저 간의 권한 모델은 일관되지 않습니다.

새로운 Async Clipboard API는 비동기식으로 작동하는 대체 API이며 권한 API와 통합되어 사용자에게 더 나은 환경을 제공합니다.

writeText()를 호출하여 텍스트를 클립보드에 복사할 수 있습니다.

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

이 API는 비동기식이므로 writeText() 함수는 전달된 텍스트가 성공적으로 복사되었는지에 따라 해결되거나 거부되는 프로미스를 반환합니다.

마찬가지로 getText()를 호출하고 반환된 프로미스가 텍스트로 확인될 때까지 기다린 후 클립보드에서 텍스트를 읽을 수 있습니다.

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

설명서에서 Jason의 게시물과 데모를 확인하세요. 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 객체의 표시를 간소화한 새로운 비동기 렌더링 컨텍스트가 제공됩니다. 이제 비동기식으로 작동하고 메모리 중복을 방지하여 더 효율적으로 렌더링하고 버벅거림을 줄입니다.

사용하려면 다음 단계를 따르세요.

createImageBitmap를 호출하고 이미지 blob을 전달하여 이미지를 만듭니다.
canvas에서 bitmaprenderer 컨텍스트를 가져옵니다.
그런 다음 이미지를 안으로 전송합니다.

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

이미지 렌더링이 완료되었습니다.

AudioWorklet

Worklet이 출시되었습니다. PaintWorklet은 Chrome 65에서 제공되었으며 이제 Chrome 66에서 기본적으로 AudioWorklet이 사용 설정됩니다. 이 새로운 유형의 Worklet은 전용 오디오 스레드에서 오디오를 처리하는 데 사용할 수 있으며 기본 스레드에서 실행된 기존 ScriptProcessorNode를 대체합니다. 각 AudioWorklet은 자체 전역 범위에서 실행되므로 지연 시간이 줄어들고 처리량 안정성이 증가합니다.

Chrome 실험실에 AudioWorklet의 몇 가지 흥미로운 예가 있습니다.

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 66의 몇 가지 변경사항은 물론 이 외에도 더 많은 기능이 있습니다.

TextArea 및 Select가 이제 autocomplete 속성을 지원합니다.
form 요소에서 autocapitalize를 설정하면 모든 하위 양식 필드에 적용되므로 Safari의 autocapitalize 구현과의 호환성이 향상됩니다.
이제 문자열에서 공백을 자르는 표준 기반 방법으로 trimStart() 및 trimEnd()를 사용할 수 있습니다.

Chrome DevTools의 새로운 기능을 확인하여 Chrome 66 DevTools의 새로운 기능을 알아보세요. 프로그레시브 웹 앱에 관심이 있다면 새로운 PWA Roadshow 동영상 시리즈를 확인하세요. 그런 다음 YouTube 채널에서 구독 버튼을 클릭하면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 67이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.