検索

ホームページ  >  記事  >  ウェブフロントエンド  >  知っておきたいHTML最適化スキル_HTML/Xhtml_Webページ制作

知っておきたいHTML最適化スキル_HTML/Xhtml_Webページ制作

WBOY
WBOYオリジナル
2016-05-16 16:36:061544ブラウズ

Web ページのパフォーマンスを向上させる方法について、多くの開発者は、JavaScript、画像の最適化、サーバー構成、ファイル圧縮、CSS の調整など、さまざまな側面から始めます。

HTML は、Web インターフェイスの開発に不可欠なコア言語であるにもかかわらず、ボトルネックに達していることは明らかです。 HTML ページの負荷もますます重くなっています。ほとんどのページでは平均 40K のスペースが必要です。たとえば、大規模な Web サイトには数千の HTML 要素が含まれており、ページ サイズはさらに大きくなります。

HTML コードの複雑さとページ要素の数を効果的に減らす方法では、主にこの問題を解決し、ページの読み込みを高速化し、Works を有効にする、簡潔で明確な HTML コードを記述する方法を紹介します。複数のデバイスでも問題なく動作します。

設計および開発プロセスでは、次の原則 に従う必要があります :

  • 構造の分離: コンテンツのスタイルではなく、HTML を使用して構造を追加します。整理整頓: コード検証ツールをワークフローに追加し、コードの構造と形式を維持します。
    新しい言語を学ぶ: 要素の構造とセマンティック マークアップを取得します。
    アクセシビリティの確保: ARIA 属性、フォールバック属性などを使用します。
    テスト: Web サイトが複数のデバイスで適切に動作するようにし、エミュレーターやパフォーマンス ツールを使用します。

HTML、CSS、JavaScript の関係

HTML は、ページの構造とコンテンツを調整するために使用されるマークアップ言語です。 HTML を使用してスタイル コンテンツを変更したり、ヘッダー タグにテキスト コンテンツを入力したりすることはできないため、コードが長く複雑になります。代わりに、CSS を使用してレイアウト要素と外観を変更する方が適切です。 HTML 要素のデフォルトの外観は、ブラウザのデフォルトのスタイル シートによって定義されます。たとえば、Chrome では、h1 タグ要素は 32 ピクセル倍の太字フォントで表示されます。

ユニバーサルデザインの 3 つのルール:

  • HTML を使用してページ構造を構築し、CSS を使用してページのプレゼンテーションを変更し、JavaScript を使用してページ機能を実装します。 CSS ZenGarden は動作の分離を非常にうまく示しています。 CSS または JavaScript で実装できる場合は、HTML コードの使用量を減らします。
    CSS および JavaScript ファイルを HTML とは別に保存します。これはキャッシュとデバッグに役立ちます。
ドキュメント構造は次のように最適化することもできます:

1. HTML5 ドキュメント タイプを使用します。以下は空のファイルです:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  4. <頭>
  5. <タイトル>レシピ: ペスト タイトル>
  6. 頭>
  8. <ボディ>
  10. <h1>ペストh1>
  12. <p>ペストは美味しいです!p>
  14. ボディ>
  15. html>
2. 次のように、ドキュメントの先頭で CSS ファイルを引用します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <頭>
  2. <タイトル>私のペストレシピ タイトル>
  4. <リンク rel="スタイルシート" href="/css/global.css">
  5. <リンク rel="スタイルシート" href="css/local.css">
  7. 頭>

これら 2 つの方法を使用すると、ブラウザは HTML コードを解析する前に CSS 情報を準備します。これは、ページ読み込みパフォーマンスの向上に役立ちます。

ページの下部にある本文の終了タグの前に JavaScript コードを入力します。JavaScript を使用すると、JavaScript コードを解析する前にページが読み込まれるため、ページの読み込み速度が向上します。 。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <ボディ>
  3. ...
  5. <script src="/js /global.js">
  6. <script src="js/ local.js">
  8. ボディ>

Defer 属性と async 属性を使用する。async 属性を持つスクリプト要素は、順番に実行されることが保証されません。

ハンドラーは JavaScript コードに追加できます。たとえば、次のコードはエラーが発生しやすく、保守が困難なため、決してこれを追加しないでください。

index.html:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <頭>
  3. ...
  5. <script src="js/ local.js">
  7. 頭>
  9. <ボディ onload="init( )">
  11. ...
  13. <ボタン onclick="handleFoo( )">フーボタン>
  15. ...
  17. ボディ>

次の写法比较好：

index.html:

XML/HTML コード复制コンテンツ到剪贴板
  1. <頭>
  3. ...
  5. 頭>
  7. <ボディ>
  9. ...
  11. <ボタン id="foo" >フーボタン>
  13. ...
  15. <script src="js/ local.js">
  17. ボディ>

js/local.js:

JavaScript コード复制コンテンツ到剪贴板
  1. init();
  2. var fooButton =
  3. document.querySelector('#foo');
    4. fooButton.onclick = handleFoo();
検証

Web ページを最適化する 1 つの方法は、ブラウザが違法な HTML コードを処理できるようにすることです。合法的な HTML コードはデバッグが簡単で、メモリ使用量やリソース消費量が少なく、解析しやすく、レンダリングや実行が高速です。違法な HTML コードがあると、レスポンシブ デザインの実装が非常に困難になります。

テンプレートを使用する場合、適切な HTML コードは非常に重要です。テンプレートは単独では正常に動作しますが、他のモジュールと統合するとさまざまなエラーが報告されるため、HTML コードの品質を確保する必要があります。次の措置:

  • ワークフローに検証機能を追加する: HTMLHint や SublineLinter などの検証プラグインを使用すると、コード エラーの検出に役立ちます。 HTML5 ドキュメント タイプを使用する HTML の階層構造が保守しやすいようにし、要素が開いたままの状態でネストされるのを避けます。
    各要素の終了タグを必ず追加してください。
    不要なコードを削除します。自己終了要素に終了タグを追加する必要はありません。ブール属性は値を割り当てる必要がなく、存在する場合は True になります。

    コード形式
形式の一貫性により、HTML コードの読み取り、理解、最適化、デバッグが容易になります。

セマンティックタグ

セマンティクスとは、意味に関連するものを指します。HTML ではページのコンテンツからセマンティクスを確認できます。要素と属性の名前は、コンテンツの役割と機能をある程度表現します。 HTML5 では、
、
、
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：入力ボックスのプレースホルダーのデフォルトの色を変更する text-webkit-input-placeholder method_HTML/Xhtml_Web ページの制作次の記事：入力ボックスのプレースホルダーのデフォルトの色を変更する text-webkit-input-placeholder method_HTML/Xhtml_Web ページの制作

関連記事

続きを見る