Chrome 124의 새로운 기능

Pete LePage

다음은 Chrome 124의 주요 기능입니다.

전체 내용을 보고 싶으신가요? 자세한 내용은 Chrome 124 출시 노트

JavaScript에서 선언적 Shadow DOM 사용

선언적 Shadow DOM을 사용할 수 있는 두 가지 새로운 API가 있습니다. 있습니다.

setHTMLUnsafe()는 innerHTML와 유사하며, 내부 HTML을 설정할 수 있게 해 줍니다. 요소를 지정된 문자열에 추가합니다. 이렇게 하면 선언적 Shadow DOM이 포함된 HTML

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

innerHTML만 사용하면 브라우저가 제대로 파싱하지 않으며 Shadow DOM이 없습니다. 그러나 setHTMLUnsafe()를 사용하면 Shadow DOM이 생성되고 요소가 파싱됩니다.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

다른 API는 parseHTMLUnsafe()이며 다음과 유사하게 작동합니다. DOMParser.parseFromString()

두 API 모두 안전하지 않으므로 아무것도 입력하지 않습니다. 삭제합니다. 따라서 먹이를 주는 것이 무엇이든 안전해야 합니다. 향후 출시에서는 정리를 제공하는 버전이 나올 것으로 예상됩니다. 알 수 있습니다.

마지막으로, 이 두 API는 모두 Firefox 및 Safari

WebSocket 스트림 API

WebSockets는 사용자 네트워크와 웹 브라우저와 서버를 구성할 수 있습니다. 다음과 같은 경우에 유용합니다. 정보를 바로 처리하길 원하는 채팅 앱 등 도움이 됩니다.

하지만 데이터가 처리 능력보다 더 빨리 도착한다면 어떻게 될까요?

이를 배압이라고 하며, 심각한 두통을 일으킬 수 있습니다. 불행히도, WebSocket API는 압력을 받을 수도 있습니다.

WebSocket Stream API는 스트림과 웹 소켓의 전원을 사용할 수 있습니다. 즉, 백 프레셔가 적용할 수 있습니다

먼저 새 WebSocketStream를 생성하고 이를 WebSocket 서버

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

그런 다음 연결이 열릴 때까지 기다리면 ReadableStream 및 WritableStream에 포함되어 있습니다. 먼저 ReadableStream.getReader() 메서드 사용 시 ReadableStreamDefaultReader이 발생합니다. 그런 다음 스트림이 완료될 때까지 데이터를 read()할 수 있습니다.

데이터를 쓰려면 WritableStream.getWriter() 메서드를 호출합니다. WritableStreamDefaultWriter에서 데이터를 write()할 수 있습니다.

전환 개선사항 보기

뷰 전환 기능에 대한 기대가 큽니다. 보다 쉽게 뷰 전환을 할 수 있도록 고안되었습니다.

pageswap 이벤트는 탐색 시 문서의 창 객체에서 실행됩니다. 그러면 문서가 새 문서로 바뀝니다.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

또한 문서 렌더링 차단 기능을 사용하면 문서의 렌더링을 차단할 수 있습니다. 파싱이 완료되어야 첫 페인트의 일관성을 유지할 수 있습니다. 모든 브라우저에 적용됩니다.

그 외에도 다양한 기능 제공

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

  • disallowReturnToOpener 드림 PIP 모드에서 버튼을 표시해서는 안 된다는 힌트를 브라우저에 제공합니다. 사용자가 오프너 탭으로 돌아갈 수 있는 창

  • 키보드 포커스 가능 스크롤 컨테이너 순차 스크롤을 사용하여 스크롤 컨테이너를 포커스 가능하게 만들어 접근성 향상 포커스 탐색

  • 또한 범용 설치를 사용하면 사용자가 현재 PWA 기준을 충족해야 합니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. 다음 링크에서 Chrome 124의 추가 변경사항

구독

최신 소식을 받아보려면 Chrome 개발자 YouTube 채널 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

저는 피트 르페이지입니다. Chrome 125가 출시되자마자 Chrome의 새로운 기능을 소개합니다.