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

Chrome 129의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

긴 작업에서 yield를 사용하여 성능을 개선할 수 있습니다.
기본 크기로 요소에 애니메이션을 적용합니다.
앵커 위치 지정 문법이 일부 변경되었습니다.
그 외에도 다양한 기능이 있으니까요.

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

`scheduler.yield()`를 사용하여 긴 작업 분할

긴 작업은 브라우저가 사용자 입력에 응답하는 기능을 지연시켜 사이트가 느리다는 인상을 주고 INP와 같은 중요한 성능 측정항목에 영향을 미칩니다. scheduler.yield()를 사용하면 긴 작업을 더 작은 청크로 분할하여 메인 스레드에 명시적으로 양보하여 반응성을 개선할 수 있습니다.

이를 통해 브라우저에 다음을 알릴 수 있습니다.

"이봐! 제가 하려는 작업이 다소 시간이 걸릴 수 있습니다. 프레임을 페인트하거나 사용자 입력에 응답하거나 다른 중요한 작업이 있으면 괜찮습니다. 기다릴 수 있습니다."

작업을 분할하면 사용자 상호작용이 용이해지는 방식을 보여주는 그림 상단에서 긴 태스크는 태스크가 완료될 때까지 이벤트 핸들러가 실행되지 않도록 차단합니다. 하단에서 청크 처리된 작업을 사용하면 이벤트 핸들러가 더 빨리 실행될 수 있습니다.

다음 줄을 JavaScript 코드에 자주 추가하여 브라우저에 여유 공간을 제공하고 INP 문제를 방지합니다.

await scheduler.yield();

중요한 점은 코드의 연속을 우선시할 수 있으므로, 양보로 인해 손해를 보지 않는다는 것입니다. 더 큰 작업 덩어리 간의 함수에서 scheduler.yield()를 자유롭게 사용하는 것이 좋습니다.

자세한 내용은 긴 작업 최적화를 참고하세요.

고유 크기가 있는 애니메이션

CSS 애니메이션은 매우 멋지지만 일반적으로 명시적인 크기가 필요합니다. auto, min-content, fit-content와 같은 고유 크기 키워드를 사용할 수 없었습니다.

CSS 속성 interpolate-size는 내장 크기 조정 키워드를 사용할 때는 불가능했던 새로운 애니메이션 집합을 엽니다.

interpolate-size가 없으면 다음 동영상의 버튼에 전환이 없습니다.

interpolate-size: allow-keywords를 추가하면 동영상의 버튼에 멋진 전환 애니메이션 효과가 적용됩니다.

root 요소에서 interpolate-size: allow-keywords를 지정하면 전체 페이지의 새 동작이 설정됩니다. 호환성이 문제가 되지 않을 때마다 이 방법을 사용하는 것이 좋습니다.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

더 세밀한 제어를 위해 calc()와 마찬가지로 CSS calc-size() 함수는 지원되는 기본 크기 조정 키워드 중 정확히 하나에 대한 작업도 지원합니다. 레이아웃 계산을 실행할 때 size 키워드는 원래 크기인 calc-size-basis로 평가됩니다.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

자세한 내용은 CSS의 height: auto; 및 기타 고유 크기 키워드에 애니메이션 적용을 참고하세요.

CSS 앵커 위치 지정 변경사항

CSS 앵커 위치 지정이 Chrome 125에 적용되었지만 CSS 작업 그룹 내에서 추가 논의를 거친 후 사양과 구현에 몇 가지 변경사항이 있습니다. 이미 CSS 앵커 위치를 사용하고 있다면 가능한 한 빨리 코드를 업데이트해야 합니다.

먼저 inset-area의 이름이 position-area로 바뀌었습니다. position- 문구는 이 속성이 앵커 요소가 아닌 위치 지정된 요소에 적용된다는 것을 기억하는 데 도움이 되므로 선호되었습니다.

두 번째로 position-try-options의 이름이 position-try-fallbacks로 변경됩니다. 이렇게 하면 기본 스타일에 따라 결정되는 기본 위치로 대체될 뿐입니다.

마지막으로 inset-area() 함수 구문이 position-try에서 삭제됩니다. 따라서 position-try-fallbacks: inset-area(top) 대신 position-try-fallbacks: top을 사용하세요.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

여러 언어를 지원하는 새로운 Intl 메서드가 추가되어 길이의 형식을 지정할 수 있습니다.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

이제 웹 GPU 캔버스가 HDR 이미지에 디스플레이의 전체 범위를 사용할 수 있습니다.

또한 일부 개발자에게 영향을 줄 수 있는 몇 가지 지원 중단 및 삭제가 있습니다.

전체 출시 노트 읽기

추가 자료

여기에는 일부 주요 내용만 포함되어 있습니다. Chrome 129의 추가 변경사항은 다음 링크를 참고하세요.

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

아드리아나 대신 인사드립니다. 저는 피트 르페이지입니다. Chrome 130이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.