다음 사항에 유의하시기 바랍니다.
- 새로운 HTTP 103 상태 코드를 사용하면 페이지가 도달하기 전에 브라우저에서 미리 로드할 콘텐츠를 결정하는 데 도움이 됩니다.
- Local Font Access API는 웹 애플리케이션이 사용자의 컴퓨터에 설치된 글꼴을 열거하고 사용할 수 있는 기능을 제공합니다.
AbortSignal.timeout()
를 사용하면 비동기 API에서 시간 제한을 더 쉽게 구현할 수 있습니다.- 이 외에도 다양한 기능이 준비되어 있습니다.
저는 피트 레페이지입니다. 이제 Chrome 103의 개발자를 위한 새로운 기능을 살펴보겠습니다
HTTP 103 상태 코드 103 - 조기 힌트
페이지 성능을 개선할 수 있는 한 가지 방법은 리소스 힌트를 사용하는 것입니다. 브라우저에 나중에 필요할 수 있는 항목에 관한 '힌트'를 제공합니다. 예를 들어 파일 미리 로드 또는 다른 서버에 연결
<link as="font" crossorigin="anonymous"
href="..." rel="preload">
<link as="font" crossorigin="anonymous"
href="..." rel="preload">
<link href="cdn.example.com"
rel="preconnect">
하지만 서버가 최소한 페이지의 일부를 전송할 때까지는 브라우저가 이러한 힌트에 따라 조치를 취할 수 없습니다.
브라우저에서 페이지를 요청하지만 서버에서 페이지를 생성하는 데 수백 밀리초가 필요하다고 가정해 보겠습니다. 브라우저가 페이지를 수신하기 시작할 때까지 그냥 그대로 대기합니다. 하지만 페이지에 항상 특정 하위 리소스 집합(예: CSS 파일, JavaScript, 이미지 몇 개)이 필요하다는 사실을 서버에서 알고 있다면 즉시 새로운 HTTP 103 Early Hints 상태 코드로 응답하고 브라우저에 이러한 하위 리소스를 미리 로드하도록 요청할 수 있습니다.
그런 다음 서버가 페이지를 생성하면 일반 HTTP 200 응답을 통해 해당 페이지를 전송할 수 있습니다. 페이지가 나타나면 브라우저가 이미 필요한 리소스를 로드하기 시작했습니다.
새로운 HTTP 상태 코드이므로 사용하려면 서버를 업데이트해야 합니다.
HTTP 103 초기 힌트 시작하기:
- 사전 힌트를 위한 설명 자료
- Apache 2 Early Hints 구성
- Cloudflare에서 사전 힌트 사용하기
- 서버 푸시를 넘어서는 신속한 방법: 103가지 초기 힌트 상태 코드
로컬 글꼴 액세스 API
웹의 글꼴은 항상 어려운 일이며 특히 사용자가 자신만의 그래픽과 디자인을 만들 수 있는 앱의 경우 더욱 그렇습니다. 지금까지는 웹 앱에서 실제로 웹 글꼴만 사용할 수 있었습니다. 사용자가 컴퓨터에 설치한 글꼴 목록을 가져올 방법이 없었습니다. 또한 자체 맞춤 텍스트 스택을 구현해야 하는 경우 매우 중요한 전체 글꼴 표 데이터에 액세스할 방법이 없었습니다.
새로운 Local Font Access API는 웹 애플리케이션이 사용자 기기의 로컬 글꼴을 열거할 수 있는 기능을 제공하고 글꼴 테이블 데이터에 대한 액세스를 제공합니다.
기기에 설치된 글꼴 목록을 가져오려면 먼저 권한을 요청해야 합니다.
// Ask for permission to use the API
try {
const status = await navigator.permissions.request({
name: 'local-fonts',
});
if (status.state !== 'granted') {
throw new Error('No Permission.');
}
} catch (err) {
if (err.name !== 'TypeError') {
throw err;
}
}
그런 다음 window.queryLocalFonts()
를 호출합니다. 사용자 기기에 설치된 모든 글꼴의 배열을 반환합니다.
const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}
글꼴의 하위 집합에만 관심이 있다면 postscriptNames
매개변수를 추가하여 필터링할 수 있습니다.
const opts = {
postscriptNames: [
'Verdana',
'Verdana-Bold',
'Verdana-Italic',
],
};
const pickedFonts = await self.queryLocalFonts(opts);
자세한 내용은 web.dev에서 톰의 로컬 글꼴로 고급 서체 사용 문서를 참고하세요.
AbortSignal.timeout()을 사용하여 더 쉬운 시간 초과
JavaScript에서 AbortController
및 AbortSignal
는 비동기 호출을 취소하는 데 사용됩니다.
예를 들어 fetch()
요청을 할 때 AbortSignal
를 만들어 fetch()
에 전달할 수 있습니다. fetch()
가 반환되기 전에 취소하려면 AbortSignal
의 인스턴스에서 abort()
를 호출합니다. 지금까지는 특정 시간이 지난 후에 취소하려면 setTimeout()
에 래핑해야 했습니다.
const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });
setTimeout(() => {
// abort the fetch after 6 seconds
controller.abort();
}, 6000);
다행히 AbortSignal
의 새로운 timeout()
정적 메서드를 사용하여 이 작업이 더 쉬워졌습니다. 지정된 밀리초 후에 자동으로 취소되는 AbortSignal
객체를 반환합니다. 이전에는 몇 줄의 코드였지만
이제는 한 줄 뿐입니다.
const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });
AbortSignal.timeout()
는 Chrome 103에서 지원되며 이미 Firefox, Safari에서 지원됩니다.
그 외에도 다양한 기능 제공
물론 더 많은 기능이 있습니다.
- 이제 웹 공유를 통해
avif
이미지 파일 형식을 공유할 수 있습니다. - 이제 Chromium이 URL 변경 직후
popstate
를 실행하여 Firefox와 일치시킵니다. 이제 이벤트 순서는popstate
, 두 플랫폼 모두hashchange
입니다. Element.isVisible()
는 요소의 표시 여부를 알려줍니다.
추가 자료
여기에서는 주요 특징 중 일부만 다루었습니다. Chrome 103의 추가 변경사항은 아래 링크를 확인하세요.
- Chrome DevTools의 새로운 기능 (103)
- Chrome 103 지원 중단 및 삭제
- Chrome 103용 ChromeStatus.com 업데이트
- Chromium 소스 저장소 변경사항 목록
- Chrome 출시 캘린더
구독
최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 Pete LePage입니다. Chrome 104가 출시되면 곧 Chrome의 새로운 기능을 알려드리겠습니다.