Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

Chrome 85의 새로운 기능

Pete LePage

이제 Chrome 85가 안정화 버전으로 출시되기 시작합니다.

자세한 내용을 살펴보겠습니다.

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

저는 Pete LePage입니다. 집에서 일하고 촬영하고 있습니다. 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()에서 확인하세요. 앱에 서명하여 앱이 내 소유임을 증명하는 방법도 알아볼 수 있습니다.

앱 아이콘 바로가기

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,
});

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

Jake는 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에서는 Alliance for Open Media에서 표준화하고 AV1로 인코딩된 이미지 형식인 AVIF의 디코딩 지원이 추가되었습니다. AVIF는 JPEG 및 WebP에 비해 상당한 압축 이점을 제공하며, 최근 Netflix 연구에 따르면 표준 JPEG에 비해 50% 절감, 4:4:4 콘텐츠에 비해 60% 이상 절감되는 것으로 나타났습니다.

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

추가 자료

여기에는 몇 가지 주요 사항만 포함되어 있습니다. Chrome 85의 추가 변경사항은 아래 링크를 참고하세요.

동영상에 대한 최신 소식을 받아보려면 Chrome Developers YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받으실 수 있습니다.

저는 Pete LePage입니다. 드디어 머리를 잘랐습니다.

Chrome 86이 출시되면 바로 여기에서 Chrome의 새로운 기능을 알려드리겠습니다.

Chrome 85의 새로운 기능 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.