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

Chrome 66의 새로운 기능

Pete LePage

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

이 외에도 더 많은 기능이 있습니다.

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

변경사항의 전체 목록을 확인하려면 자세한 내용은 Chromium 소스 저장소 변경 목록

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 객체 모델과 비교했을 때 데이터 레이크에서 특히 중요한 점은 사용할 수 있습니다.

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

Eric은 설명을 참조하세요.

Async Clipboard API

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

동기 복사 및 document.execCommand를 사용하여 붙여넣는 것은 작은 경우 문제가 될 수 있습니다. 있지만 다른 모든 것은 동기식일 가능성이 높습니다. 페이지가 차단되어 사용자의 만족도가 떨어집니다. 또한 브라우저 간 권한 모델이 일관되지 않습니다.

새로운 Async Clipboard API는 비동기식으로 작동하는 대체 API입니다 Permission 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에서 제공되며, AudioWorklet 기본적으로 Chrome 66입니다. 이 새로운 유형의 Worklet은 전용 오디오 스레드의 오디오로, 기존 ScriptProcessorNode를 대체합니다. 기본 스레드에서 실행되었습니다 각 AudioWorklet은 자체 전역 범위에서 실행되므로 지연 시간 감소 및 처리량 안정성 향상

웹 세미나에 소개할 때 AudioWorklet의 Chrome 실험실.

그 외에도 다양한 기능 제공

이것들은 개발자를 위한 Chrome 66의 변경사항 중 일부일 뿐입니다. 더 많은 것이 있습니다.

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

Chrome DevTools의 새로운 기능, Chrome 66 DevTools의 새로운 기능을 알아보세요. 또한 데이터 애널리스트의 프로그레시브 웹 앱의 새로운 기능 PWA 로드쇼 동영상 시리즈 YouTube 채널 페이지에서 구독 버튼을 클릭하세요. YouTube 채널 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

저는 피트 르페이지입니다. Chrome 67이 출시되자마자 Chrome의 새로운 기능을 소개해 드리겠습니다.