ホームページ > 記事 > ウェブフロントエンド > HTML5_html5 チュートリアル スキルでのファイル インポートの簡単な紹介
テンプレート、Shadow DOM、カスタム要素により、UI コンポーネントの作成がこれまでより簡単になります。ただし、HTML、CSS、JavaScript などのリソースは依然として 1 つずつロードする必要があり、非常に非効率です。
重複した依存関係を削除するのも簡単ではありません。たとえば、jQuery UI または Bootstrap を読み込むには、JavaScript、CSS、および Web フォントに個別のタグを追加する必要があります。 Web コンポーネントが複数の依存関係を適用する場合、状況はさらに複雑になります。
HTML インポートを使用すると、これらのリソースを結合された HTML ファイルとしてロードできます。
HTML を使用してインポート
HTML ファイルをロードするには、rel 属性が import で、herf 属性が HTML ファイルのパスであるリンク タグを追加する必要があります。たとえば、component.html をindex.html にロードする場合:
index.html
ファイルを HTML にインポートできます (翻訳者注: この記事では、「インポートされた HTML」を「HTML インポート ファイル」、「元の HTML」を「HTML メイン ファイル」と翻訳します。たとえば、index.html は HTML メイン ファイルです。ファイル、component.html は HTML インポート ファイルです。) 通常の HTML にリソースを追加するのと同じように、スクリプト、スタイル シート、フォントなどのリソースを追加します。
component.html
doctype、html、head、body タグは必要ありません。 HTML インポートでは、インポートされるドキュメントがただちにロードされ、ドキュメント内のリソースが解析され、スクリプトがあれば実行されます。
約定命令
ブラウザが HTML ドキュメントを解析する方法は線形です。つまり、HTML の上部にあるスクリプトが下部より前に実行されます。さらに、ブラウザは通常、JavaScript コードが実行されるまで待ってから、後続のコードを解析します。
スクリプトが HTML のレンダリングを妨げないようにするには、タグに async または defer 属性を追加します (または、script タグをページの下部に置くこともできます)。 defer 属性は、すべてのページが解析されるまでスクリプトの実行を遅らせます。 async 属性を使用すると、ブラウザは HTML のレンダリングを妨げないようにスクリプトを非同期に実行できます。では、HTML インポートはどのように機能するのでしょうか?
HTML インポート ファイル内のスクリプトは、defer 属性を含むものと同じです。たとえば、次の例では、index.html は script1.js と script2.js を最初に実行し、次に script3.js を実行します。
index.html
component.html
1.在index.html中加下component.html并等待機行
2.実行component.html中のscript1.js
3.完了script1.jsを実行後、component.html中のscript2.jsを実行
4.script2.js を実行してindex.html 内の script3.js を実行
注意:link[rel="import"] に async プロパティが追加された場合、HTML への参加は、async プロパティを含むファイルを適切に待機します。これにより、他のスクリプトが HTML 入力ファイルの実行に依存する可能性を除き、Web サイトのパフォーマンス バンドルも向上します。
基本的に、HTML 入力は他のドメイン名からソースに入力できません。
HTML は、ドキュメント内のウィンドウとドキュメント オブジェクトを挿入します
前に、HTML ファイルを挿入するときにこのページのスクリプトが実行される可能性があると述べましたが、これは、HTML を挿入するファイル内のコードもブラウザーによって汚染される可能性があることを意味するものではありません。
と、component.html のドキュメントは両方とも、index.html のドキュメント オブジェクトを指します。HTML を使用してファイル内のドキュメントを挿入することはできません。
index.html
component.html
HTML インポートを使用する利点の 1 つはリソースを整理できることですが、これらのリソースをロードするときに追加の HTML ファイルを使用するためヘッダーが大きくなりすぎることも意味します。考慮すべき点がいくつかあります:
依存関係の解決
index.html
XML/HTML コード
XML/HTML コード
component2.html
HTML インポートは、この問題を自動的に解決します。
スクリプト タグを 2 回ロードする場合とは異なり、HTML インポートでは、すでにロードされている HTML ファイルをロードして実行することはなくなりました。前のコードを例に挙げると、jQuery を読み込む script タグを HTML インポート ファイルにパッケージ化することで、jQuery は 1 回だけ読み込まれて実行されます。
しかし、問題があります。ロードするファイルを追加しました。増大するファイル数にどう対処するか?幸いなことに、この問題を解決するための vulcanize というツールがあります。
ネットワークリクエストをマージします
Vulcanize は複数の HTML ファイルを 1 つのファイルにマージできるため、ネットワーク接続の数が削減されます。 npm を使用してインストールし、コマンド ラインから使用できます。一部のタスクをホストするために grunt と gulp を使用している場合もあります。その場合、ビルド プロセスの一部として加硫することができます。
依存関係を解決し、index.html 内のインポート ファイルをマージするには、次のコマンドを使用します:
このコマンドを実行すると、index.html の依存関係が解析され、vulcanized.html という結合された HTML ファイルが生成されます。バルカナイズについて詳しくは、こちらをご覧ください。
注: http2 のサーバー プッシュ機能は、将来ファイルのリンクとマージを廃止するために検討されています。
テンプレート、Shadow DOM、カスタム要素、HTML インポートを組み合わせる
この記事シリーズのコードには HTML インポートを使用してみましょう。これらの記事をこれまで見たことがないかもしれませんので、最初に説明させてください。 テンプレートを使用すると、カスタム要素のコンテンツを宣言的に定義できます。 Shadow DOM では、要素のスタイル、ID、クラスをそれ自体にのみ適用できます。カスタム要素を使用すると、HTML タグをカスタマイズできます。これらを HTML インポートと組み合わせることで、カスタム Web コンポーネントがモジュール化され、再利用可能になります。リンクタグを付けて頂ければ誰でもご利用頂けます。
x-component.html
index.html
x-component.html のドキュメント オブジェクトはindex.html と同じであるため、難しいコードを記述する必要はなく、自動的に登録されることに注意してください。
サポートされているブラウザ
Chrome と Opera は HTML インポートのサポートを提供しますが、Firefox は 2014 年 12 月までサポートしません (Mozilla は、Firefox が近い将来に HTML インポートをサポートする予定はないと述べ、まず ES6 モジュールがどのようにサポートされるかを理解する必要があると主張しました)実装されています)。
chromestatus.com または caniuse.com にアクセスして、ブラウザが HTML インポートをサポートしているかどうかを確認できます。他のブラウザで HTML インポートを使用する場合は、webcomponents.js (以前の platform.js) を使用できます。
関連リソース
HTML インポートについては以上です。 HTML インポートについて詳しく知りたい場合は、
にアクセスしてください。 HTML インポート: Web 用 #include – HTML5Rocks
HTML インポート仕様