3 つの珍しい HTML5 便利な新機能の紹介

1. DNS 事前解決キャッシュ

ご存知のとおり、DNS の解決は Web サイトのパフォーマンス最適化の重要な部分ですが、読み込み時間はそれほど長くありませんが、圧縮するのは困難です。特に、リソースを同時にダウンロードするために複数の CDN ドメイン名を使用してリソースをロードする大規模な Web サイトの場合、各リソースをロードする前に CDN ドメイン名の DNS 解決変換を実行する必要があります。
DNS プリロードが使用されている場合、この機能をサポートするブラウザーは、リソースを要求する必要があるときにドメイン名を解決するのではなく、事前にドメイン名に対して DNS 解決を実行してキャッシュします。そして、この機能の応用は非常に単純です:

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

タオバオはこのテクノロジーを適用しています。タオバオを開いてソースコードを表示すると、一部の CDN サーバーが上部に DNS 解決のためにキャッシュされています。

2. リソースのプリロード

リソースをプリロードするには、一般的な画像のプリロード、CSS の背景画像をプリロードに使用するなど、さまざまな方法がありますが、そのほとんどは依然として JS を使用します。現在、HTML5 は、prefetch (プリフェッチ) と prerender (事前レンダリング) という 2 つの属性を備えた特殊なリソース プリロード メソッドを提供しており、それぞれ 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 は現在この機能をサポートしていることに注意してください。

実際、検索エンジンはこの先読み機能を最も必要としています。なぜなら、検索エンジンはユーザーが次に開くページ (検索結果ページ) をよく知っているため、ユーザーが検索コンテンツを入力したときに検索結果を読み取ることができるからです。事前に ページのリソースが事前に読み込まれており、適用後の効果は非常に明白です。

現時点では、Chrome と Firefox のみがサポートしているようで、同時に 2 つのブラウザと互換性を持たせたい場合は、次のように記述できます。また、当然ながらセキュリティ上の理由から通過することはできません。ドメインのプリロード リソースは CDN では使用できない場合があります。

3. ダウンロード属性

HTML5 の Download 属性は、ブラウザーに対応するファイルを開かずに強制的にダウンロードさせるために使用されます。 Chrome や Firefox などのブラウザは強力すぎるため、ユーザーがクリックしたリソース ファイルを認識できるようになります (たとえば、PDF はブラウザで直接開かれ、mp3 や mp4 などのメディアは開きます)。ブラウザ内で直接再生されます（プレーヤー再生）。ただし、ユーザーがブラウザーで表示するのではなく、実際にファイルを直接ダウンロードしたい場合もあります。この場合、この属性を追加すると、属性値によってダウンロードされたファイルの名前が変更されます:

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

このリソースがダウンロードする場合は、この属性を追加することもできます。また、JS を使用したり、保存するファイルの名前を手動で変更したりすることもできます。

HTML5 には他にも多くの機能がありますが、長い間本やさまざまな資料を読んできた後、上記の 3 つのより実用的な属性をほとんど見たことがないので、それらを共有したいと思います。

3 つの珍しい HTML5 実用的な新機能の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。