이제 Chrome 77이 출시됩니다.
- 최대 콘텐츠 렌더링 시간을 사용하여 사이트의 성능을 추적하는 더 좋은 방법이 있습니다.
- Forms에서 새로운 기능을 사용할 수 있습니다.
- 네이티브 지연 로드가 출시되었습니다.
- Chrome DevSummit 2019가 2019년 11월 11일부터 12일까지 개최됩니다.
- 그 밖의 다양한 기능
저는 피트 레페이지입니다. 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 DevTools의 새로운 기능 (77)
- Chrome 77 지원 중단 및 삭제
- Chrome 77용 ChromeStatus.com 업데이트
- Chrome 77의 자바스크립트 관련 새로운 기능
- Chromium 소스 저장소 변경사항 목록
구독
최신 동영상을 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 Pete LePage입니다. Chrome 78이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.