Chrome 122의 새로운 기능

Adriana Jara

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

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

Storage Buckets API를 기반으로 합니다.

Storage Buckets API는 영구 저장소를 더 효과적으로 관리할 수 있도록 더 세분화된 기능을 제공합니다.

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

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

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

Performance 패널의 DevTools 개선사항

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

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

또한 이제 Main 트랙에 이벤트 시작자가 있습니다. 기본적으로 Performance > Main 트랙에는 시작자와 이로 인해 발생한 다음 이벤트를 연결하는 화살표가 표시됩니다.

  • 스타일 또는 레이아웃 무효화 -> 스타일 다시 계산 또는 레이아웃
  • 애니메이션 프레임 요청 -> 애니메이션 프레임 실행됨
  • 유휴 상태 콜백 요청 -> 유휴 상태 콜백 실행
  • 타이머 설치 -> 타이머 실행됨
  • WebSocket 생성 -> Send... 및 WebSocket Handshake 또는 Destroy WebSocket

화살표를 보려면 트레이스에서 이러한 이벤트를 찾아 클릭하세요.

요청에서 시작된 화살표이며 유휴 콜백이 실행됩니다.

Devtools 122의 새로운 기능에서 DevTools 업데이트를 더 찾아보세요.

Async Clipboard API unsanitized 옵션

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

기본적으로 비동기 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()는 파일 객체에 영향을 미치지 않고 텍스트 유형 객체만 삭제합니다.

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

추가 자료

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

구독

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

안녕하세요, 아드리아나 자라님. Chrome 123이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.