흔하지 않은 HTML5의 실용적인 새 기능 3가지 소개_경험 교환

1. DNS 사전 해결 캐시

우리 모두 알고 있듯이 DNS 확인은 웹사이트 성능 최적화에 있어서 중요한 부분입니다. 로딩 시간이 그리 길지는 않지만 압축하기는 어렵습니다. 특히 리소스를 동시에 다운로드하기 위해 여러 CDN 도메인 이름을 사용하여 리소스를 로드하는 대규모 웹사이트의 경우 각 리소스가 로드되기 전에 CDN 도메인 이름의 DNS 확인 변환을 수행해야 합니다.
DNS 사전 로딩을 사용하는 경우 이 기능을 지원하는 브라우저는 리소스를 요청해야 할 때 도메인 이름을 확인하는 대신 미리 도메인 이름에 대해 DNS 확인을 수행하고 캐시합니다. 이 기능의 적용은 정말 간단합니다.

코드 복사 코드는 다음과 같습니다.

타오바오는 이 기술을 적용했습니다. 타오바오를 열고 소스 코드를 볼 수 있습니다. 상단에는 CDN 서버 중 일부가 DNS 확인 및 캐싱을 수행합니다.

2. 리소스 사전 로딩

리소스를 미리 로드하는 방법에는 여러 가지가 있습니다. 예를 들어 일반적인 이미지 미리 로드, CSS 배경 이미지를 사용하여 미리 로드하고 대부분 여전히 JS를 사용합니다. 현재 HTML5는 Firefox 및 Chrome 브라우저에서 각각 지원되는 프리페치(프리페칭) 및 프리렌더링(프리렌더링)이라는 두 가지 속성을 가진 특수 리소스 사전 로드 방법을 제공합니다.

1).PREFETCH 사전 읽기
사전 읽기는 현재 페이지가 로드된 후 나중에 지정한 리소스(일반적으로 JS, CSS 및 이미지)를 비밀리에 다운로드하는 매우 일반적인 리소스입니다. 페이지 다운로드:

코드 복사 코드는 다음과 같습니다.

이 기능은 현재 Firefox 브라우저에서 지원됩니다.

2).PRERENDER 사전 렌더링
이 기능은 미리 비밀리에 다운로드할 뿐만 아니라 사용자가 링크를 클릭하면 즉시 표시됩니다.

코드 복사 코드는 다음과 같습니다.

현재 Chrome에서는 이 기능을 지원합니다.

검색 엔진에서는 실제로 이 미리 읽기 기능이 가장 필요합니다. 사용자가 다음에 열 페이지(검색 결과 페이지)를 매우 확신하여 사용자가 검색 내용을 입력하면 미리 읽을 수 있기 때문입니다. 결과 페이지의 리소스가 미리 로드되어 있으며 적용 후 효과가 매우 분명합니다.

현재 호환성이 아쉬운 점은 Chrome과 Firefox만 지원하는 것으로 보이며, 사용되는 rel 속성이 동시에 두 브라우저와 호환되게 하려면 다음과 같이 작성하면 됩니다. 🎜>

코드 복사 코드는 다음과 같습니다.

물론 보안상의 이유로 리소스를 도메인 간에 미리 로드할 수 없으며 CDN에서 사용할 수도 없습니다.

3. 속성 다운로드

HTML5의 다운로드 속성은 브라우저가 해당 파일을 열지 않고 강제로 다운로드하도록 하는 데 사용됩니다. Chrome 및 Firefox와 같은 브라우저는 사용자 경험을 향상시키기에는 너무 강력합니다. 사용자가 클릭한 리소스 파일을 인식할 수 있는 경우(예: PDF는 브라우저에서 직접 열리고 mp3 및 mp4와 같은 미디어는 브라우저 내에서 직접 재생됩니다) 플레이어 재생). 그러나 때로는 사용자가 실제로 브라우저에서 보는 대신 직접 다운로드하기를 원할 수도 있습니다. 이 경우 이 속성을 추가할 수 있으며 속성 값은 다운로드한 파일의 이름을 변경합니다:

코드 복사 코드는 다음과 같습니다.

클릭 download.pdf 파일을 다운로드하여 직접 저장하려면

사용자가 이 리소스를 확실히 다운로드할 것이라고 확신하는 경우 이 속성을 추가할 수 있으며 JS를 사용하거나 저장하려는 파일 이름을 수동으로 변경할 수도 있습니다.

HTML5에는 이 외에도 많은 기능이 있지만 책과 다양한 자료를 오랫동안 읽다 보면 위의 세 가지 실용적인 속성을 거의 볼 수 없어 공유하고 싶습니다.