- Paint Timing API를 사용하면 Paint Timings AP로 첫 페인트 시간과 콘텐츠가 포함된 첫 페인트 시간을 측정할 수 있습니다.
font-display를 사용하면 글꼴이 다운로드되기 전에 글꼴이 렌더링되는 방식을 제어할 수 있습니다.- WebAssembly가 출시되었습니다.
- 이 외에도 다양한 기능이 있습니다.
변경사항의 전체 목록을 확인하고 싶으신가요? Chromium 소스 저장소 변경사항 목록을 확인하세요.
저는 피트 르페이지입니다. Chrome 60의 개발자용 새로운 기능을 자세히 살펴보겠습니다.
Paint timings API
사용자가 웹페이지로 이동할 때는 모든 것이 제대로 작동하고 있음을 확인할 수 있는 시각적 피드백을 찾습니다. 이제 새 페인트 타이밍 API를 사용하여 이를 측정할 수 있습니다.
이 API는 두 가지 측정항목을 노출합니다.
- 첫 페인트까지의 시간: 브라우저가 화면에 첫 번째 콘텐츠를 렌더링하기 시작하는 지점을 나타냅니다.
- 콘텐츠가 포함된 첫 페인트까지의 시간: 브라우저가 DOM, 텍스트, 이미지 등의 콘텐츠를 처음 렌더링하는 지점을 나타냅니다.
사용자 환경에 가장 큰 영향을 미치는 성능 측정항목 활용을 참고하여 이러한 측정항목을 추적하고 이를 사용하여 환경을 개선하는 방법을 알아보세요.
CSS font-display 속성
웹 글꼴을 사용하면 풍부한 서체를 통합할 수 있습니다. 하지만 사용자가 아직 서체를 가지고 있지 않은 경우 서체를 다운로드해야 하므로 사이트가 느려질 수 있습니다.
다행히 글꼴을 다운로드하는 데 시간이 너무 오래 걸리는 경우 대부분의 브라우저는 대체 글꼴을 사용합니다. 새 font-display 속성을 사용하면 다운로드 가능한 글꼴이 완전히 로드되기 전에 렌더링되는 방식을 제어할 수 있습니다.
auto은 사용자 에이전트가 사용하는 글꼴 표시 전략을 사용합니다.block: 글꼴 면에 짧은 차단 기간과 무한 교체 기간을 제공합니다.swap: 글꼴 면에 0초의 블록 기간과 무한 스왑 기간을 부여합니다.fallback: 글꼴 면에 매우 작은 블록 기간과 짧은 스왑 기간을 제공합니다.optional: 글꼴에 매우 짧은 블록 기간과 0초 스왑 기간을 제공합니다.
Chrome 60 및 Opera에서 지원되며 Firefox에서는 개발 중입니다.
자세한 내용은 로 글꼴 성능 제어를 참고하세요.font-display
WebAssembly
WebAssembly(WASM)는 C 및 C++와 같은 언어로 작성된 코드를 웹에서 거의 네이티브 속도로 실행하는 새로운 방법을 제공합니다.
브라우저 내 동영상 편집기를 빌드하거나 기존 표준 기반 웹 플랫폼 API를 활용하여 높은 프레임 속도로 Unity 게임을 실행하는 데 필요한 속도를 제공합니다.
데모, 문서, 시작 방법을 비롯한 자세한 내용은 webassembly.org에서 확인하세요.
그 외에도 다양한 기능 제공
- 새로운 Web Budget API를 사용하면 푸시 알림 권한이 있는 사이트에서 사용자에게 표시되는 알림을 표시하지 않고도 데이터 동기화 또는 알림 닫기와 같은 백그라운드 작업을 트리거하는 제한된 수의 푸시 메시지를 보낼 수 있습니다.
- 이제
PushSubscription.expirationTime를 사용하여 정기 결제가 만료되는 시점과 여부를 사이트에 알릴 수 있습니다. - 이제 객체 레스트 및 스프레드 속성이 지원되므로 객체를 더 간편하게 병합 및 얕은 클론하고 다양한 불변 객체 패턴을 구현할 수 있습니다.
참고: Payment Request API가 Chrome 61로 푸시되었습니다.
이는 개발자용 Chrome 60의 몇 가지 변경사항일 뿐입니다.
그런 다음 YouTube 채널을 구독하면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 펫 르페이지입니다. Chrome 61이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.