Chrome 77의 새로운 기능

Pete LePage

Chrome 77이 출시되었습니다.

• 최대 콘텐츠 페인트를 사용하여 사이트의 실적을 추적하는 더 나은 방법이 있습니다.
• 양식에 몇 가지 새로운 기능이 추가되었습니다.
• 네이티브 지연 로드가 출시되었습니다.
• Chrome DevSummit 2019가 2019년 11월 11일~12일에 개최됩니다.
• 그 외 다양한 로더

저는 피트 르페이지입니다. Chrome 77에서 개발자를 위해 새로 제공되는 기능을 살펴보겠습니다.

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

사이트의 실제 실적을 이해하고 측정하기란 어려울 수 있습니다. load 또는 DOMContentLoaded와 같은 측정항목은 사용자가 화면에서 보고 있는 내용을 알려주지 않습니다. First Paint 및 First Contentful Paint는 환경의 시작 부분만 캡처합니다. 유의미한 첫 페인트가 더 좋지만 복잡하고 잘못된 경우도 있습니다.

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

콘텐츠가 포함된 최대 페인트를 측정하려면 Performance Observer를 사용하고 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에 최대 콘텐츠 페인트에 관한 유용한 게시물을 올렸습니다.

새로운 양식 기능

많은 개발자는 기존 요소의 모양과 느낌을 맞춤설정하거나 브라우저에 내장되지 않은 새 컨트롤을 빌드하기 위해 맞춤 양식 컨트롤을 빌드합니다. 일반적으로 JavaScript와 숨겨진 <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 Dev Summit 2019

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

웹 플랫폼에 적용될 최신 도구 및 업데이트에 관해 알아보고 Chrome 엔지니어링팀의 의견을 직접 듣는 좋은 기회입니다.

YouTube 채널에서 라이브 스트리밍되며, 직접 참석하려면 Chrome Dev Summit 2019 웹사이트에서 초대를 요청하세요.

그 외에도 다양한 기능 제공

이는 Chrome 77에서 개발자를 위해 변경된 사항 중 일부에 불과하며, 물론 그 외에도 많은 변경사항이 있습니다.

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

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

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 77의 추가 변경사항은 아래 링크를 확인하세요.

• Chrome DevTools의 새로운 기능 (77)
• Chrome 77 지원 중단 및 삭제
• Chrome 77의 ChromeStatus.com 업데이트
• Chrome 77의 JavaScript 관련 새로운 기능
• Chromium 소스 저장소 변경사항 목록

구독

관련 동영상을 놓치지 않고 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

저는 펫 르페이지입니다. Chrome 78이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.