Chrome 123의 새로운 기능

Adriana Jara

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

저는 아드리아나 자라입니다. Chrome 123의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

light-dark() CSS 함수

CSS의 light-dark() 함수를 사용하면 사용자의 밝은 모드 또는 어두운 모드 환경설정에 맞게 조정되는 색상을 만들 수 있습니다. light-dark() 함수를 사용하여 단일 CSS 속성 내에 두 가지 색상 값을 지정합니다.

브라우저는 요소의 계산된 color-scheme 값에 따라 적절한 색상을 자동으로 선택합니다. 예를 들어 다음 CSS를 사용합니다.

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • 사용자가 밝은 테마를 선택한 경우 요소의 배경은 라임색이 됩니다.
  • 사용자가 어두운 테마를 선택하면 요소의 배경이 녹색이 됩니다.

Long Animation Frames API

Long Animation Frames API를 사용하면 웹사이트의 응답성을 측정하는 Core Web Vitals인 INP (다음 페인트에 대한 상호작용)가 나쁜 원인인 기본 스레드 혼잡의 원인을 찾을 수 있습니다.

이 새로운 API는 느린 사용자 인터페이스 업데이트를 더 잘 이해할 수 있도록 Long Tasks API를 개선한 버전입니다. Long Animation Frames API를 사용하면 차단 작업을 측정할 수 있습니다. 다음 렌더링 업데이트와 함께 작업을 측정하고 장기 실행 스크립트, 렌더링 시간, 강제 레이아웃 및 스타일에 소요된 시간(레이아웃 스래싱이라고 함)과 같은 정보를 추가합니다.

이 정보를 수집하고 분석하면 성능 병목 현상을 파악하고 해결할 수 있습니다. 다음 코드를 사용하여 긴 프레임을 캡처할 수 있습니다.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

서비스 워커 정적 라우팅 API

서비스 워커를 사용하면 웹사이트를 오프라인으로 실행하고 성능을 향상할 수 있는 캐싱 전략을 만들 수 있습니다.

그러나 페이지가 한동안 처음으로 로드되고 제어 서비스 워커가 그 순간에 실행되지 않으면 성능 비용이 발생할 수 있습니다. 모든 가져오기는 서비스 워커를 통해 이루어져야 하므로 브라우저는 서비스 워커가 시작되고 실행될 때까지 기다려야 로드할 콘텐츠를 알 수 있습니다.

Service Worker Static Routing API를 사용하면 설치 시 항상 네트워크에서 제공되도록 경로를 선언할 수 있습니다. 제어된 URL이 나중에 로드되면 서비스 워커의 시작이 완료되기 전에 브라우저가 해당 경로에서 리소스를 가져오기 시작할 수 있습니다. 이렇게 하면 서비스 워커가 필요하지 않은 것으로 알고 있는 URL에서 서비스 워커가 삭제됩니다.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

그 외에도 다양한 기능 제공

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

  • NavigationActivation 인터페이스를 사용하여 사용자가 이동한 위치에 따라 맞춤설정된 페이지를 제공할 수 있습니다.

  • 이제 Chrome에서 Zstandard (zstd)를 지원합니다. 이 Content-Encoding를 사용하면 페이지를 더 빠르게 로드하고 대역폭을 덜 사용하며 서버에서 압축하는 데 드는 시간, CPU, 전력을 줄여 서버 비용을 절감할 수 있습니다.

  • bfcache용 notRestoredReasons API가 Chrome 123부터 출시됩니다. 이를 통해 사이트 소유자는 bfcache를 사용할 수 없는 이유를 입력란에서 수집할 수 있습니다. 사이트 소유자는 이를 사용하여 bfcache 사용을 개선하여 더 빠른 기록 탐색을 허용할 수 있습니다.

  • display-mode의 picture-in-picture 값을 사용하면 웹 앱이 PIP 모드로 표시될 때만 적용되는 특정 CSS 규칙을 작성할 수 있습니다. 예를 들면 다음과 같습니다.

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 123의 추가 변경사항은 다음 링크를 확인하세요.

구독

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

저는 아드리아나 자라입니다. Chrome 124가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.