HTML5 の珍しい 3 つの実用的な新機能の紹介_体験交流

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

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

コードをコピー コードは次のとおりです:

タオバオはこのテクノロジーを応用しています。タオバオを開いてソース コードを表示できます。上部では、一部の CDN サーバーが DNS 解決とキャッシュを実行します。

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

一般的な画像のプリロード、プリロードに CSS 背景画像を使用するなど、リソースをプリロードする方法は数多くありますが、そのほとんどは依然として JS を使用しています。現在、HTML5 は、prefetch (プリフェッチ) と prerender (事前レンダリング) という 2 つの属性を備えた特殊なリソース プリロード メソッドを提供しており、それぞれ Firefox ブラウザーと Chrome ブラウザーでサポートされています。

1).PREFETCH 事前読み込み
事前読み込みは、非常に一般的なリソースの事前読み込みです。現在のページが読み込まれた後、指定したリソース (通常は JS、CSS、画像) が後で秘密裏にダウンロードされます。クラス、あなた次のページもダウンロードできます:

コードをコピー コードは次のとおりです。

この機能は現在、Firefox ブラウザでサポートされていることに注意してください。

2).PRERENDER 事前レンダリング
これはさらに強力です。事前にこっそりダウンロードするだけでなく、レンダリングも行います。ユーザーがリンクをクリックすると、すぐに表示されます。 。

コードをコピー コードは次のとおりです。

Chrome は現在この機能をサポートしていることに注意してください。

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

現在、互換性が欠点です。Chrome と Firefox のみがサポートしているようで、使用される rel 属性が異なります。2 つのブラウザーに同時に互換性を持たせたい場合は、次のように記述できます:

コードをコピー コードは次のとおりです。

さらに、当然のことながら、セキュリティ上の理由からリソースをドメイン間でプリロードすることはできず、CDN では使用できない場合があります。

3. ダウンロード属性

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

コードをコピー コードは次のとおりです:

クリックして直接ダウンロードしますダウンロード .pdf ファイル

として保存します。

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

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