요구사항: 웹사이트를 요청할 때 많은 자원을 불러와야 하며, 네트워크 요청은 웹 페이지 렌더링 속도에도 영향을 미치며, 사용자가 작업 중 일부 자원을 로드할 때 사용자 경험에 영향을 줄 수 있습니다. 인터넷의 빠른 발전으로 대역폭과 트래픽 비용이 더 이상 많이 들지 않습니다. 사전에 자원을 미리 로드하거나 대상 서버와 미리 연결을 구축하는 방법은 무엇인가요?
프리커넥트
요소 속성의 키워드 preconnect는 사용자가 대상 소스에서 자원을 사용할 수 있도록 브라우저에 힌트를 줍니다이 소스와의 연결을 미리 시작하여 사용자 경험을 개선하세요。
preconnect는 HTTP 요청이 공식적으로 서버에 전송되기 전에 DNS 해석, TLS 협상, TCP 핸드셰이크 등 여러 작업을 브라우저가 수행할 수 있게 하여 왕복 지연을 없애고 사용자의 시간을 절약할 수 있게 합니다.
프리커넥트는 많은 요청에서 왕복 경로를 수백에서 수천 밀리초 지연까지 줄이는 중요한 최적화 수단입니다.
다음은 구글 폰트에 preconnect 프롬프트를 추가하면 브라우저가 즉시 요청을 시작하고 fonts.gstatic.com, CSS 요청과 병렬로 실행되는 경우입니다. 이 시나리오에서 프리커넥트는 중요 경로에서 세 개의 RTT(왕복 시간)를 제거하고,지연 시간이 0.5초 이상 감소했습니다。
문법은 다음과 같습니다:
문서조사:하이퍼링크 로그인이 보입니다.
DNS-prefetch는 DNS 프리페치를 사용합니다
요소 속성의 키워드 dns-prefetch는 사용자가 대상 소스의 리소스가 필요할 수 있음을 사용자에게 알리기 위해 브라우저가 해당 소스에 대해 DNS 해석을 선제적으로 수행함으로써 사용자 경험을 개선할 수 있도록 하기 위한 것입니다.
DNS 프리페칭은 사용자가 탐색하는 동안 브라우저가 페이지에 있을 수 있게 해줍니다백그라운드에서 DNS 해석을 실행하세요。 이렇게 하면 사용자가 링크를 클릭할 때 DNS 해석이 완료되어 지연 시간을 줄일 수 있습니다. 특정 URL의 DNS 프리페칭은 링크 태그의 속성에 rel="dns-prefetch"를 추가함으로써 수행할 수 있으며, Google 글꼴, Google Analytics, CDN 처리를 권장합니다.
"DNS 요청은 대역폭 트래픽이 매우 적지만, 특히 모바일 기기에서는 지연 시간이 높을 수 있습니다. 프리페칭으로 지정된 DNS는 사용자가 링크를 클릭할 때와 같은 특정 상황에서 지연 시간을 크게 줄일 수 있습니다. 때로는 1초 지연도 줄일 수 있습니다 - 모질라 개발자 네트워크"
문법은 다음과 같습니다:
문서조사:하이퍼링크 로그인이 보입니다.
프리로드 프리로드
element 속성의 preload 값은 HTML로 fetch 요청을 선언할 수 있게 해주며, 페이지가 곧 필요로 할 자원을 지정할 수 있고, 브라우저의 주요 렌더링 메커니즘이 시작되기 전에 페이지의 수명 주기 초기에 로딩을 시작해야 합니다. 이렇게 하면 더 빨리 접근할 수 있고, 페이지 렌더링을 막을 가능성이 줄어 성능을 향상시킵니다. 이름에 load라는 용어가 포함되어 있더라도, 스크립트를 로드하고 실행하는 것이 아니라 단지 더 높은 우선순위로 다운로드와 캐시를 예약할 뿐입니다.
프리로드는 특정 리소스의 로드 방식을 제어하는 새로운 웹 표준으로, 2016년 1월에 폐지된 서브리소스 프리페치의 업그레이드입니다. 이 명령어는 <link> 예: <link rel="preload"> 같은 곳에서 사용할 수 있습니다. 일반적으로 이미지, CSS, 자바스크립트, 폰트 파일 등 가장 중요한 리소스를 불러올 때는 프리로드를 사용하는 것이 가장 좋습니다. 이는 HTML로 선언된 자원만 미리 로드하는 브라우저 프리로드와 혼동해서는 안 됩니다. 사전 부하 명령은 이 한계를 극복하여 CSS와 자바스크립트로 정의된 자원을 미리 불러올 수 있게 하고, 각 자원을 언제 적용할지 결정할 수 있게 합니다.
프리로드는 프리페치와 달리 현재 페이지에 집중하고 높은 우선순위로 자원을 로드하는 반면, 프리페치는 다음 페이지가 로드할 자원에 집중하여 낮은 우선순위로 로드합니다. 또한 프리로드는 윈도우의 온로드 이벤트를 차단하지 않습니다.
다양한 콘텐츠 유형을 미리 로드할 수 있습니다. 가능한 재산 가치는 다음과 같습니다:
오디오: 보통 에 사용되는 오디오 파일<audio>입니다.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: 요소에 내장할 자원<embed>입니다.
fetch: ArrayBuffer나 JSON 파일과 같은 fetch 또는 XHR 요청을 통해 접근할 수 있는 자원입니다.
font: 字体文件。
이미지: 이미지 파일.
객체: 요소에 내장될 자원<object>.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
워커: JavaScript 웹 워커 또는 공유 워커.
비디오: 보통 에 사용되는 비디오 파일<video>입니다.
문법은 다음과 같습니다:
문서조사:하이퍼링크 로그인이 보입니다.
|
게시됨 2022. 9. 26. 오후 9:45:08
|
|
|
|
게시됨 2022. 9. 28. 오전 8:54:26
|
