이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 85의 새로운 기능

Pete LePage

Chrome 85가 안정화 버전으로 출시되기 시작했습니다.

다음 사항에 유의하시기 바랍니다.

content-visibility: auto를 사용하여 렌더링 성능을 개선할 수 있습니다.
이제 CSS에서 CSS 속성을 설정할 수 있습니다.
이제 getInstalledRelatedApps()를 사용하여 Windows 앱 또는 PWA가 설치되어 있는지 확인할 수 있습니다.
앱 아이콘 바로가기가 Windows에서도 작동합니다 (이번에는 실제로 작동).
fetch 업로드 스트리밍의 출처 무료 체험판이 시작되었습니다.
그 외 다양한 로더

저는 집에서 작업하고 촬영하는 피트 르페이지입니다. Chrome 85에서 개발자를 위해 새로 제공되는 기능을 살펴보겠습니다.

콘텐츠 공개 상태

HTML을 사용자가 볼 수 있는 것으로 변환하려면 브라우저가 첫 번째 픽셀을 페인트하기 전에 여러 단계를 거쳐야 합니다. 표시 영역에 표시되지 않는 콘텐츠를 포함하여 전체 페이지에 적용됩니다.

요소에 content-visibility: auto를 적용하면 브라우저에 해당 요소가 뷰포트로 스크롤될 때까지 해당 요소의 렌더링 작업을 건너뛸 수 있다고 알리므로 초기 렌더링 속도가 빨라집니다.

.my-class {
  content-visibility: auto;
}

content-visibility의 효과를 극대화하려면 flexbox, grid과 같이 더 복잡한 레이아웃 알고리즘이 있거나 자체 레이아웃이 포함된 하위 요소가 있는 상위 섹션에 적용하세요.

콘텐츠를 짧은 분량으로 나누고 content-visibility: auto;를 추가하여 이 페이지의 렌더링 시간이 232ms에서 30ms로 줄었습니다.

콘텐츠 표시 상태를 확인하여 이를 사용하여 렌더링 성능을 개선하는 방법을 알아보세요.

`@property` 및 CSS 변수

기술적으로 맞춤 속성이라고 하는 CSS 변수는 정말 멋집니다. Houdini CSS 속성 및 값 API를 사용하면 맞춤 속성의 유형과 기본 대체 값을 정의할 수 있습니다. 이전에는 JavaScript에서 정의하는 기능을 추가했을 때 Chrome 78의 새로운 기능에서 다루었습니다.

Chrome 85부터는 CSS에서 직접 CSS 속성을 정의하고 설정할 수도 있습니다. CSS 속성의 장점은 속성에 시맨틱 의미와 대체 값을 부여하고 CSS 테스트를 지원한다는 점입니다.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una의 @property: CSS 변수에 강력한 기능 부여 도움말에서 CSS 변수를 사용하는 방법을 확인할 수 있습니다.

설치된 관련 앱 가져오기

getInstalledRelatedApps() API를 사용하면 개발자가 개발자의 앱이 설치되어 있는지 확인한 후 사용자 환경을 맞춤설정할 수 있습니다.

예를 들어 앱이 이미 설치된 경우 방문 페이지에서 사용자에게 다른 콘텐츠를 표시합니다. 중복되는 기능을 하나의 앱에 중앙 집중화하여 혼란을 방지합니다. 또는 네이티브 앱이 이미 설치된 경우 PWA 설치를 홍보하지 마세요.

Chrome 80에서 처음 출시되었을 때는 Android 앱에서만 작동했습니다. 이제 Android에서 PWA가 설치되어 있는지도 확인할 수 있습니다. 또한 Windows에서는 Windows UWP 앱이 설치되어 있는지 확인할 수 있습니다.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

앱이 설치되어 있나요? getInstalledRelatedApps()을 참고하세요. web.dev에서 작동 방식과 앱이 내 소유임을 증명하기 위해 앱에 서명하는 방법을 알아보세요.

앱 아이콘 바로가기

Chrome 84에서는 앱 아이콘 바로가기 지원을 추가했습니다. 실수로 어디서나 사용할 수 있다고 말했지만 Android에서만 사용할 수 있습니다. 이제 Chrome 85에서는 Android 및 Windows, Chrome 및 Edge에서 모두 사용할 수 있습니다.

"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

자세한 내용은 web.dev의 앱 아이콘 바로가기 도움말을 참고하세요. 불편을 끼쳐 죄송합니다.

출처 체험판: `fetch()`를 사용한 스트리밍 요청

Chrome 85부터 fetch 업로드 스트리밍을 출처 체험판으로 사용할 수 있습니다. 이를 통해 요청 본문이 준비되기 전에 가져오기를 시작할 수 있습니다. 이전에는 전체 본문이 준비된 후에만 요청을 시작할 수 있었지만 이제는 콘텐츠를 생성하는 중에도 콘텐츠 전송을 시작할 수 있습니다.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

예를 들어 서버를 예열하거나 마이크나 카메라에서 캡처된 오디오 또는 동영상을 스트리밍하는 데 사용할 수 있습니다.

제이크는 web.dev에서 fetch API를 사용한 스트리밍 요청을 자세히 살펴보고 최신 HTTP203 - fetch를 사용한 스트리밍 요청 동영상에서도 다뤘습니다.

기타

물론 그 외에도 많은 기능이 있습니다.

Promise.any는 처리되거나 거부될 첫 번째 주어진 프로미스에 의해 처리되는 프로미스를 반환합니다.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

.replaceAll()를 사용하면 문자열의 모든 인스턴스를 더 쉽게 바꿀 수 있습니다. 더 이상 정규 표현식을 사용할 필요가 없습니다.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85에서는 AV1으로 인코딩되고 Alliance for Open Media에서 표준화한 이미지 형식인 AVIF에 대한 디코딩 지원을 추가합니다. AVIF는 JPEG 및 WebP에 비해 상당한 압축 이점을 제공합니다. 최근 Netflix 연구에 따르면 표준 JPEG에 비해 50%, 4:4:4 콘텐츠에 비해 60% 이상 절감할 수 있습니다.

AppCache 삭제가 시작되었습니다.

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 85의 추가 변경사항은 아래 링크를 확인하세요.

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

저는 피트 르페이지입니다. 드디어 머리를 잘랐습니다.

Chrome 86이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.