다음은 Chrome 124의 주요 기능입니다.
- 선언적 Shadow DOM이 사용됩니다.
- 웹 소켓에서 스트림을 사용할 수 있습니다.
- 뷰 전환이 더욱 개선되었습니다.
- 그 외에도 다양한 기능이 있으니까요.
전체 내용을 보고 싶으신가요? 자세한 내용은 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 124 출시 노트
- Chrome DevTools의 새로운 기능 (124)
- Chrome 124의 ChromeStatus.com 업데이트
- Chromium 소스 저장소 변경사항 목록
- Chrome 출시 캘린더
구독
최신 소식을 받아보려면 Chrome 개발자 YouTube 채널 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.
저는 피트 르페이지입니다. Chrome 125가 출시되자마자 Chrome의 새로운 기능을 소개합니다.