知っておくべき HTML 最適化のヒント-htmlチュートリアル-php.cn

知っておくべき HTML 最適化のヒント

青灯夜游

リリース： 2020-07-01 10:50:16

転載

2489 人が閲覧しました

知っておくべき HTML 最適化のヒント

Web ページのパフォーマンスを向上させる方法について、多くの開発者は、JavaScript、画像の最適化、サーバー構成、ファイル圧縮、CSS の調整など、さまざまな側面から始めます。 HTML は、Web インターフェイスの開発に必要な中心的な言語であるにもかかわらず、ボトルネックに達していることは明らかです。 HTML ページの負荷もますます重くなっています。ほとんどのページには平均 40K のスペースが必要です。たとえば、一部の大規模 Web サイトには数千の HTML 要素が含まれており、ページサイズはさらに大きくなります。

HTML コードの複雑さとページ要素の数を効果的に軽減する方法。この記事は主にこの問題を解決します。ページの読み込みを高速化する、簡潔で明確な HTML コードをさまざまな側面から記述する方法を紹介します。 . 、さまざまなデバイスで適切に実行できます。

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

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

知っておくべき HTML 最適化のヒント HTML はページ構造を調整するために使用され、コンテンツのマークアップ言語。 HTML を使用してスタイルコンテンツを変更したり、ヘッダータグにテキストコンテンツを入力したりすることはできないため、コードが長く複雑になります。代わりに、CSS を使用してレイアウト要素と外観を変更する方が適切です。

HTML 要素のデフォルトの外観は、ブラウザのデフォルトのスタイルシートによって定義されます。たとえば、Chrome では、h1 タグ要素は 32 ピクセル倍の太字フォントでレンダリングされます。 3 つの一般的なデザインルール:

HTML を使用してページ構造を構築し、CSS を使用してページのプレゼンテーションを変更し、JavaScript を使用してページ機能を実装します。 CSS ZenGarden は動作の分離を非常にうまく示しています。

ドキュメント構造は次のように最適化することもできます:

<!DOCTYPE html>
<html>

<head>
 <title>Recipes: pesto</title>
</head>

<body>

  <h1>Pesto</h1>

  <p>Pesto is good!</p>

</body>
</html>

ログイン後にコピー

次のように、ドキュメントの先頭で CSS ファイルを引用します。

<head>
  <title>My pesto recipe</title>

  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">

</head>

ログイン後にコピー

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

ページ下部の本文終了タグの前に JavaScript コードを入力します。これにより、ブラウザは JavaScript コードを解析する前にページを読み込むため、ページの読み込み速度が向上します。JavaScript を使用すると、有益な効果が得られます。ページ要素への影響。

<body>

  ...

  <script src="/js/global.js">
  <script src="js/local.js">

</body>

ログイン後にコピー

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

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

index.html:

<head>
  
  ...

  <script src="js/local.js">

</head>

<body onload="init()">

  ...

  <button onclick="handleFoo()">Foo</button>

  ...

</body>

ログイン後にコピー

次のような記述方法が適切です。

index.html:

<head>

  ...

</head>

<body>

  ...

  <button id="foo">Foo</button>

  ...

  <script src="js/local.js">

</body>

ログイン後にコピー

js/local.js:

init();
var fooButton =
    document.querySelector(&#39;#foo&#39;);
fooButton.onclick = handleFoo();

ログイン後にコピー

検証

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

テンプレートを使用する場合、法的な HTML コードは非常に重要です。テンプレートが単独では正常に動作しても、他のモジュールと統合するとさまざまなエラーが報告されることがよくあります。したがって、HTML コードの品質を確保する必要があります。次の対策:

ワークフローに検証機能を追加します。HTMLHint や SublineLinter などの検証プラグインを使用すると、コードエラーの検出に役立ちます。