Chrome 64의 새로운 기능

  • ResizeObservers가 지원되어 요소의 콘텐츠 직사각형 크기가 변경되면 알려줍니다.
  • 이제 모듈은 import.meta를 사용하여 호스트 관련 메타데이터에 액세스할 수 있습니다.
  • 팝업 차단기가 강화됩니다.
  • window.alert()는 더 이상 포커스를 변경하지 않습니다.

이 외에도 다양한 기능이 제공됩니다.

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

변경사항의 전체 목록을 확인하시겠습니까? Chromium 소스 저장소 변경사항 목록을 확인하세요.

ResizeObserver

요소의 크기 변경을 추적하는 것은 약간 어려울 수 있습니다. 대부분의 경우 리스너를 문서의 resize 이벤트에 연결한 다음 getBoundingClientRect 또는 getComputedStyle를 호출합니다. 그러나 둘 다 레이아웃 스래싱을 일으킬 수 있습니다.

브라우저 창의 크기가 변경되지 않았지만 새 요소가 문서에 추가된 경우에는 어떻게 해야 할까요? 아니면 요소에 display: none를 추가했나요? 둘 다 페이지 내의 다른 요소의 크기를 변경할 수 있습니다.

ResizeObserver는 요소의 크기가 변경될 때마다 알림을 보내고 요소의 새로운 높이와 너비를 제공하여 레이아웃 스래싱 위험을 줄입니다.

다른 관찰자와 마찬가지로 사용 방법은 매우 간단합니다. ResizeObserver 객체를 만들고 생성자에 콜백을 전달합니다. 콜백에는 ResizeOberverEntries 배열이 주어집니다. 이는 관찰된 요소당 하나의 항목이며, 여기에는 요소의 새 크기가 포함됩니다.

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 YouTube 채널구독해 주세요. 새 동영상이 출시될 때마다 이메일 알림을 보내 드립니다.

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