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

Chrome 66의 새로운 기능

Pete LePage

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

이 외에도 다양한 기능이 있습니다.

저는 피트 르페이지입니다. Chrome 66에서 개발자를 위해 새롭게 제공되는 기능을 살펴보겠습니다.

변경사항의 전체 목록을 확인하고 싶으신가요? Chromium 소스 저장소 변경사항 목록을 확인하세요.

CSS 유형화된 객체 모델

JavaScript를 통해 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() 함수는 전달된 텍스트가 성공적으로 복사되었는지에 따라 해결되거나 거부되는 Promise를 반환합니다.

마찬가지로 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 객체의 표시를 간소화하는 새로운 비동기 렌더링 컨텍스트가 있습니다. 이제 비동기식으로 작동하고 메모리 중복을 방지하여 더 효율적이고 버벅거림이 적은 방식으로 렌더링합니다.

사용하려면 다음 안내를 따르세요.

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

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

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

AudioWorklet

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

Google Chrome 실험실에서 AudioWorklet의 흥미로운 예시를 확인할 수 있습니다.

그 외에도 다양한 기능 제공

이는 Chrome 66에서 개발자를 위해 변경된 사항 중 일부에 불과하며, 물론 그 외에도 많은 변경사항이 있습니다.

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

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

저는 펫 르페이지입니다. Chrome 67이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.