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를 사용하면 웹사이트의 응답성을 측정하는 코어 웹 바이탈인 코어 웹 바이탈인 잘못된 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의 새로운 기능을 알려드리겠습니다.