Chrome 122의 새로운 기능

Adriana Jara

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

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

Storage Buckets API

Storage Buckets API는 영구 저장소를 더 효과적으로 관리할 수 있도록 세부사항을 더 많이 제공합니다.

일반적으로 사용자 기기의 저장공간이 부족하면 IndexedDB 또는 localStorage와 같은 API에 저장된 데이터는 사용자가 개입할 수 없으면 손실됩니다. 스토리지를 영구적으로 만드는 한 가지 방법은 StorageManager 인터페이스의 persist() 메서드를 사용하는 것입니다. 그러나 스토리지를 영구적으로 요청하는 이 방법은 '전부 아니면 전혀' 방식입니다.

Storage Buckets API의 핵심 아이디어는 사이트에 여러 스토리지 버킷을 만들 수 있는 기능을 부여하는 것입니다. 여기서 브라우저는 다른 버킷과 별개로 각 버킷을 삭제할 수 있습니다. 따라서 가장 중요한 데이터가 삭제되지 않도록 제거 우선순위를 지정할 수 있습니다.각 스토리지 버킷에는 IndexedDB 및 CacheStorage와 같이 기존 스토리지 API와 관련된 데이터가 포함될 수 있습니다.

모든 스토리지가 동일하게 생성되지 않음: 스토리지 버킷 소개에서 자세한 내용을 확인하고 스토리지 버킷 사용을 시작하기 위한 코드 샘플을 참고하세요.

성능 패널의 DevTools 개선사항

Chrome 122 DevTools의 Performance 패널에는 다음과 같은 개선사항이 포함되어 있습니다.

첫째, 이제 실적 패널 상단의 타임라인에서 탐색경로를 설정하고 탐색경로 간에 이동할 수 있습니다. 탐색경로를 설정하려면 타임라인에서 범위를 선택하고 마우스를 가져간 다음 해당하는 N ms 버튼을 클릭합니다. 중첩된 여러 탐색경로를 연속으로 만들 수 있습니다. 확대/축소 수준 간에 이동하려면 타임라인 상단의 체인에서 해당하는 탐색경로를 클릭합니다. 다음 동영상을 시청하여 탐색경로가 작동하는 모습을 확인하세요.

또한 이제 기본 트랙에 이벤트 시작자가 있습니다. 성능 > 기본 트랙에는 기본적으로 시작 조건과 이러한 시작 조건이 유발한 후속 이벤트를 연결하는 화살표가 표시됩니다.

  • 스타일 또는 레이아웃 무효화 -> 스타일 다시 계산 또는 레이아웃
  • 애니메이션 프레임 요청 -> 애니메이션 프레임 실행됨
  • 유휴 콜백 요청 -> 유휴 콜백 실행
  • 타이머 설치 -> 타이머 실행됨
  • WebSocket 만들기 -> 보내기...와 WebSocket 핸드셰이크 받기 또는 WebSocket 삭제

화살표를 보려면 트레이스에서 이러한 이벤트를 찾아 클릭합니다.

요청 및 유휴 콜백 실행의 화살표

Devtools 122의 새로운 기능에서 DevTools 업데이트에 관해 자세히 알아보세요.

Async Clipboard API unsanitized 옵션

Async Clipboard API를 사용하여 복사 및 붙여넣을 때 read() 메서드의 unsanitized 옵션을 사용하면 앱과 웹사이트에서 정리되지 않은 HTML을 가져올 수 있습니다. 사이트에 이 속성이 포함되어 있지 않으면 클립보드에서 HTML 읽기가 삭제됩니다.

기본적으로 async API를 사용하여 text/html MIME 유형을 읽을 때는 보안 문제로 인해 새니타이저가 호출되어 HTML 마크업에서 콘텐츠를 삭제하고 스타일이 결과 HTML에 인라인됩니다. 이로 인해 HTML 페이로드가 커지고 웹 개발자 또는 모바일 앱에서 읽을 때 HTML 콘텐츠의 충실도가 저하됩니다.

다음 예에서 출력의 차이를 확인할 수 있습니다.

입력:

<style>p { color: blue; }</style><p>Hello, World!</p>'

정리됨 (기본값):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

unsanitized 옵션을 사용하면 다음과 같습니다.

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Clipboard API의 기본사항을 알아보려면 클립보드 액세스 차단 해제를 참고하세요.

그 외에도 다양한 기능 제공

물론 이 외에도 많은 것이 있습니다.

  • CSS에서 지원되지 않는 기능이 있는 컨테이너 쿼리는 일치하지 않습니다. 예를 들어 다음 쿼리는 알 수 없는 지형지물로 인해 일치하지 않습니다.
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData()는 File 객체에 영향을 미치지 않으며 텍스트 유형 객체만 삭제합니다.

  • WebGL의 drawingBufferStorage를 사용하면 렌더링을 기본 그리기 버퍼 픽셀 형식으로 변환하고 정밀도가 8비트가 넘는 콘텐츠를 그릴 때 추가 복사를 방지할 수 있습니다.

추가 자료

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

구독

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

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