Chrome 60의 새로운 기능

  • Paint Timing API를 사용하면 Paint Timings 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를 참조하세요.

그 외에도 다양한 기능 제공

  • 새로운 웹 예산 API를 사용하면 푸시 알림 권한이 있는 사이트에서 사용자에게 표시되는 알림을 표시하지 않고도 데이터 동기화 또는 알림 닫기와 같이 백그라운드 작업을 트리거하는 제한된 수의 푸시 메시지를 보낼 수 있습니다.
  • 이제 PushSubscription.expirationTime를 사용할 수 있어 사이트에 정기 결제 만료 시기 및 여부를 알립니다.
  • 이제 객체 저장 및 분산 속성이 지원되므로 더 간단하게 객체를 병합 및 부분 클론하고 다양한 불변 객체 패턴을 구현할 수 있습니다.

참고: Payment Request API가 Chrome 61로 푸시되었습니다.

개발자를 위한 Chrome 60의 몇 가지 변경사항을 살펴보았습니다.

그런 다음 YouTube 채널구독하면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 61이 출시되는 대로 Chrome의 새로운 기능을 소개해 드리겠습니다