ResizeObservers지원: 요소의 콘텐츠 직사각형 크기가 변경되면 알림을 보냅니다.- 이제 모듈은 import.meta를 사용하여 호스트별 메타데이터에 액세스할 수 있습니다.
- 팝업 차단기가 강력해집니다.
window.alert()가 더 이상 포커스를 변경하지 않습니다.
이 외에도 더 많은 기능이 있습니다.
저는 피트 르페이지입니다. Chrome 64에서 개발자를 위해 새롭게 제공되는 기능을 살펴보겠습니다.
변경사항의 전체 목록을 확인하고 싶으신가요? Chromium 소스 저장소 변경사항 목록을 확인하세요.
ResizeObserver
요소의 크기가 변경되는 시점을 추적하는 것은 다소 번거로울 수 있습니다. 문서의 resize 이벤트에 리스너를 연결한 다음 getBoundingClientRect 또는 getComputedStyle를 호출할 가능성이 큽니다. 하지만 둘 다 레이아웃 트래싱을 일으킬 수 있습니다.
브라우저 창의 크기는 변경되지 않았지만 문서에 새 요소가 추가된 경우는 어떻게 되나요? 또는 요소에 display: none를 추가했나요? 두 항목 모두
페이지 내 다른 요소의 크기를 변경할 수 있습니다.
ResizeObserver는 요소의 크기가 변경될 때마다 알림을 보내고 요소의 새 높이와 너비를 제공하여 레이아웃 트래싱의 위험을 줄입니다.
다른 관찰자와 마찬가지로 이 관찰자를 사용하면 매우 간단하게 ResizeObserver 객체를 만들고 생성자에 콜백을 전달할 수 있습니다. 콜백에는 요소의 새 측정기준을 포함하는 ResizeOberverEntries 배열(관찰된 요소당 항목 1개)이 제공됩니다.
const ro = new ResizeObserver( entries => {
for (const entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px × ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
}
});
// Observe one or multiple elements
ro.observe(someElement);
자세한 내용과 실제 예시는 ResizeObserver: Elements의 document.onresize와 유사를 참고하세요.
팝업 차단기 개선
탭 아래가 싫어요. 페이지가 특정 대상으로 연결되는 팝업을 열고 페이지를 탐색할 때 발생합니다. 대개 원치 않는 광고나 항목이 포함됩니다.
Chrome 64부터 이러한 유형의 탐색이 차단되고 Chrome에서 사용자에게 일부 네이티브 UI를 표시하여 사용자가 원하는 경우 리디렉션을 따를 수 있도록 합니다.
import.meta
JavaScript 모듈을 작성할 때는 현재 모듈에 관한 호스트별 메타데이터에 액세스해야 하는 경우가 많습니다. 이제 Chrome 64에서는 모듈 내에서 import.meta 속성을 지원하고 모듈의 URL을 import.meta.url로 노출합니다.
이는 현재 HTML 문서가 아닌 모듈 파일을 기준으로 리소스를 확인하려고 할 때 정말 유용합니다.
그 외에도 다양한 기능 제공
이는 개발자를 위한 Chrome 64의 변경사항 중 일부일 뿐이며, 더 많은 사항이 있습니다.
- 이제 Chrome은 정규식에서 이름이 지정된 캡처 및 유니코드 속성 이스케이프를 지원합니다.
- 이제
<audio>및<video>요소의 기본preload값은metadata입니다. 이렇게 하면 Chrome이 다른 브라우저와 일치하게 되며 미디어 자체가 아닌 메타데이터만 로드하여 대역폭과 리소스 사용량을 줄일 수 있습니다. - 이제
Request.prototype.cache를 사용하여Request의 캐시 모드를 확인하고 요청이 새로고침 요청인지 확인할 수 있습니다. - 이제 Focus Management API를 사용하여
preventScroll속성으로 요소로 스크롤하지 않고도 요소에 포커스를 설정할 수 있습니다.
window.alert()
그리고 하나 더! 사실 '개발자 기능'은 아니지만 기쁘게 생각합니다. window.alert()가 더 이상 배경 탭을 포그라운드로 가져오지 않습니다. 대신 사용자가 해당 탭으로 다시 전환할 때 알림이 표시됩니다.
더 이상 무언가 window.alert를 실행하여 탭이 무작위로 전환되지 않습니다.
이전 Google Calendar를 보고 있습니다.
YouTube 채널을 구독하세요. 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.
저는 Pete LePage입니다. Chrome 65가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.