세 가지 흔하지 않은 HTML5의 유용한 새 기능 소개

1. DNS 사전 해결 캐시

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

<link rel="dns-prefetch" href="http://cdn.staticfile.org/">
<link rel="dns-prefetch" href="//www.google-analytics.com">

Taobao는 이 기술을 적용했습니다. Taobao를 열고, 소스 코드를 보고, 일부 CDN 캐시에서 DNS 확인을 수행할 수 있습니다. .

2. 리소스 사전 로드

공통 이미지 사전 로드 등 리소스를 사전 로드하는 방법은 다양하며, 대부분 스틸을 사전 로드하는 데 사용됩니다. JS를 사용하세요. 현재 HTML5는 Firefox 및 Chrome 브라우저에서 각각 지원되는 프리페치(프리페칭) 및 프리렌더링(프리렌더링)이라는 두 가지 속성을 가진 특수 리소스 사전 로드 방법을 제공합니다.

1).PREFETCH 미리 읽기
미리 읽기는 현재 페이지가 로드된 후 나중에 지정하는 리소스(일반적으로 JS 및 CSS)를 비밀리에 다운로드할 수 있는 매우 일반적인 리소스입니다. 사진과 같은 페이지도 다운로드하세요.

<link rel="prefetch" href="http://blog.wpjam.com/" />
<link rel="prefetch" href="http://wpjam.qiniudn.com/wpjam/logo.png" />
<link rel="prefetch alternate stylesheet" href="mozspecific.css" />

현재 Firefox 브라우저는 이 기능을 지원합니다.

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

<link rel="prerender" href="http://blog.wpjam.com/" />

Chrome은 현재 이 기능을 지원합니다.

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

현재는 호환성이 아쉬운 부분이 있는데 크롬과 파이어폭스만 지원하는 것 같고, 사용하는 rel 속성이 다른 것 같으니 두 브라우저에서 동시에 호환되길 원하시면 다음과 같이 작성하시면 됩니다.

<link rel="prefetch prerender" href="http://blog.wpjam.com" />

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

3. 다운로드 속성

HTML5의 다운로드 속성은 브라우저가 해당 파일을 열지 않고 강제로 다운로드하도록 하는 데 사용됩니다. Chrome 및 Firefox와 같은 브라우저는 사용자 경험을 향상시키기에는 너무 강력합니다. 브라우저 내에서 직접 재생됩니다) 플레이어 재생). 그러나 때로는 사용자가 실제로 브라우저에서 보는 대신 직접 다운로드하기를 원할 수도 있습니다. 이 경우 이 속성을 추가하면 속성 값이 다운로드된 파일의 이름을 바꿀 수 있습니다.

<a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>

이 리소스는 사용자들이 반드시 다운로드할 리소스이므로 이 속성을 추가할 수도 있고 JS를 사용하거나 저장하려는 파일 이름을 수동으로 변경할 수도 있습니다.

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

세 가지 흔하지 않은 HTML5의 실용적인 새 기능에 대한 자세한 소개를 보려면 PHP 중국어 웹사이트의 관련 기사에 주목하세요!