Chrome 77의 새로운 기능

Pete LePage

이제 Chrome 77이 출시됩니다.

저는 피트 레페이지입니다. Chrome 77의 개발자를 위한 새로운 기능을 알아보겠습니다.

콘텐츠가 포함된 최대 페인트

사이트의 실제 성능을 이해하고 측정하는 것은 어려울 수 있습니다. load 또는 DOMContentLoaded와 같은 측정항목은 사용자에게 화면에 표시되는 내용을 알려주지 않습니다. 첫 번째 페인트와 첫 번째 콘텐츠가 포함된 페인트는 환경의 시작만 캡처합니다. 첫 번째 의미 있는 페인트가 더 낫지만 복잡하고 때로는 잘못되었습니다.

Chrome 77부터 사용할 수 있는 Largest Contentful Paint API는 표시 영역에 표시되는 가장 큰 콘텐츠 요소의 렌더링 시간을 보고하며 페이지의 기본 콘텐츠가 로드되는 시점을 측정할 수 있게 해 줍니다.

최대 콘텐츠 렌더링 시간을 측정하려면 성능 관찰자를 사용하고 largest-contentful-paint 이벤트를 찾아야 합니다.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

페이지는 종종 단계별로 로드되므로 페이지에서 가장 큰 요소가 변경될 수 있으므로 마지막 largest-contentful-paint 이벤트만 분석 서비스에 보고해야 합니다.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

필이 web.dev에서 최대 콘텐츠 렌더링 시간에 관한 유용한 게시물을 올렸습니다.

새로운 양식 기능

많은 개발자가 맞춤 양식 컨트롤을 빌드하여 기존 요소의 디자인과 분위기를 맞춤설정하거나 브라우저에 기본 제공되지 않는 새 컨트롤을 빌드합니다. 일반적으로 자바스크립트와 숨겨진 <input> 요소를 사용해야 하지만 완벽한 해결책은 아닙니다.

Chrome 77에 추가된 두 가지 새로운 웹 기능을 사용하면 더 쉽게 맞춤 양식 컨트롤을 빌드하고 기존의 많은 제한사항을 제거할 수 있습니다.

formdata 이벤트

formdata 이벤트는 모든 JavaScript 코드가 양식 제출에 참여할 수 있게 하는 하위 수준 API입니다. 이 메서드를 사용하려면 상호작용하려는 양식에 formdata 이벤트 리스너를 추가합니다.

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

사용자가 제출 버튼을 클릭하면 양식에서 formdata 이벤트를 실행합니다. 이 이벤트에는 제출되는 모든 데이터를 보유하는 FormData 객체가 포함됩니다. 그러면 제출하기 전에 formdata 이벤트 핸들러에서 formdata를 업데이트하거나 수정할 수 있습니다.

양식과 연결된 맞춤 요소

양식 관련 맞춤 요소는 맞춤 요소와 네이티브 컨트롤 간의 간극을 메우는 데 도움이 됩니다. 정적 formAssociated 속성을 추가하면 맞춤 요소를 다른 모든 양식 요소처럼 처리하도록 브라우저에 지시합니다. 또한 네이티브 컨트롤과의 일관성을 보장하기 위해 name, value, validity와 같은 입력 요소에서 발견된 공통 속성도 추가해야 합니다.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

자세한 내용은 web.dev에서 더 많은 기능을 지원하는 양식 컨트롤을 참고하세요.

네이티브 지연 로드

지난 동영상에서 네이티브 지연 로드를 어떻게 놓쳤는지 모르겠습니다. 너무 멋져서 지금 포함시켰습니다. 지연 로드는 화면 밖 <img> 또는 <iframe>와 같이 중요하지 않은 리소스의 로드를 필요할 때까지 지연하여 페이지 성능을 높일 수 있는 기법입니다.

Chrome 76부터 브라우저에서 맞춤 지연 로드 코드를 작성하거나 별도의 JavaScript 라이브러리를 사용할 필요 없이 지연 로드를 자동으로 처리합니다.

이미지 또는 iframe 지연 로드를 원한다는 것을 브라우저에 알리려면 loading="lazy" 속성을 사용합니다. '스크롤 없이 볼 수 있는 부분'에 있는 이미지와 iframe은 정상적으로 로드됩니다. 아래에 있는 레이아웃은 사용자가 앱 근처로 스크롤할 때만 가져옵니다.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

자세한 내용은 web.dev에서 웹용 브라우저 수준 지연 로드를 참고하세요.

Chrome 개발자 서밋 2019

Chrome Dev Summit이 11월 11일과 12일에 개최됩니다.

웹 플랫폼에 도입될 최신 도구 및 업데이트에 대해 알아보고 Chrome 엔지니어링팀으로부터 직접 의견을 받을 수 있는 좋은 기회입니다.

이 이벤트는 YouTube 채널에서 실시간으로 스트리밍됩니다. 직접 참석하려면 Chrome Dev Summit 2019 웹사이트에서 초대를 요청하세요.

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 77의 몇 가지 변경사항은 물론 이 외에도 더 많은 기능이 있습니다.

오리진 트라이얼로 제공되는 Contact Picker API는 사용자가 연락처 목록에서 항목을 하나 이상 선택하고 선택한 연락처의 제한된 세부정보를 웹사이트와 공유할 수 있는 새로운 주문형 선택도구입니다.

intl.NumberFormat API에 새로운 측정 단위가 추가되었습니다.

추가 자료

여기에서는 주요 특징 중 일부만 다루었습니다. Chrome 77의 추가 변경사항은 아래 링크를 확인하세요.

구독

최신 동영상을 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 78이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.