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