ホームページ  >  記事  >  ウェブフロントエンド  >  知っておくべきHTML最適化テクニック

知っておくべきHTML最適化テクニック

php中世界最好的语言
php中世界最好的语言オリジナル
2018-01-24 10:10:081428ブラウズ

今回は、HTMLを最適化する際に知っておくべき注意事項を紹介します。

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

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

HTML コードの複雑さとページ要素の数を効果的に減らすにはどうすればよいですか? この記事では、主にこの問題を解決し、ページの読み込みを高速化し、次のことを可能にする簡潔で明確な 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 ドキュメント タイプを使用します。次は空のファイルです:

<!DOCTYPE html>  
<html>  
  
<head>  
 <title>Recipes: pesto</title>  
</head>  
  
<body>  
  
  <h1>Pesto</h1>  
  
  <p>Pesto is good!</p>  
  
</body>  
</html>

2. 次のようにドキュメントの先頭で 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 コードをページ下部の body 終了タグの前に入力すると、ブラウザは JavaScript コードを解析する前にページを読み込むため、

JavaScript の使用はページに良い影響を与えます。要素。

<body>  
  
  ...   
  
  <script src="/js/global.js">  
  <script src="js/local.js">  
  
</body>
Defer 属性と async 属性を使用すると、async 属性を持つ Script 要素が順番に実行されることが保証されません。

ハンドラーは JavaScript コードに追加できます。たとえば、次のコードはエラーが発生しやすく、保守が容易ではありません:

index.html:

<head>  
     
  ...   
  
  <script src="js/local.js">  
  
</head>  
  
<body onload="init()">  
  
  ...   
  
  <button onclick="handleFoo()">Foo</button>  
  
  ...   
  
</body>

js/local.js:

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

Verification

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

テンプレートを使用する場合、適切な HTML コードは非常に重要です。テンプレートだけでは正常に動作することがよくありますが、他のモジュールと統合すると、さまざまなエラーが報告されるため、次のような品質を確保する必要があります。ステップ アクション:

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

HTML5 ドキュメント タイプを使用する

HTML の階層構造が保守しやすいようにし、要素が開いたままの状態でネストされるのを避けます。
各要素の終了タグを必ず追加してください。
不要なコードを削除します。自己終了要素に終了タグを追加する必要はありません。ブール属性は値を割り当てる必要はなく、存在する場合は True になります。

コード形式

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

セマンティック マークアップ

セマンティクスとは、意味に関連するものを指します。HTML では、ページのコンテンツからセマンティクスを確認できます。要素と属性の命名は、コンテンツの役割と機能をある程度表現します。 HTML5 では、1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、c787b9a589a3ece771e842a6176cf8e9 などの新しいセマンティック要素が導入されています。

コードを記述するために適切な要素を選択すると、コードの可読性が保証されます:

タイトルを表すには 4a249f0d628e2318394fd9b75b4636b1(c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355...) を使用し、リストを実装するには 4a249f0d628e2318394fd9b75b4636b1 を使用します。 23c3de37f2f9ebcb477c4a90aac6fffd タグを使用する前に追加します。
1aa9e5d373740b65a0cc8f0a02150c53、c787b9a589a3ece771e842a6176cf8e9、15221ee8cba27fc1d7a26c47a001eb9b などの適切な HTML5 セマンティック要素を選択します。
本文テキストを説明するには e388a4556c0f65e1904146cc1a846bee を使用します。 HTML5 セマンティック要素はコンテンツを形成できますが、その逆はできません。
5a8028ccc7a7e27417bff9f05adf5932 と a4b561c25d9afb9ac8dc4d70affff419 の代わりに 907fae80ddef53131f3292ee4f81644b タグを使用します。
検証を強制するには、2e1cf0710519d5598b1f0f14c36ba674 要素、入力タイプ、プレースホルダー、その他の属性を使用します。
テキストと要素を別の要素の子として混合すると、レイアウト エラーが発生します。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

HTML要素の水平方向と垂直方向の中央揃えを設定する方法

XHTMLでタイトルタグと段落タグを使用する方法

HTMLとCSSを使用して大きなページを作成する方法白

以上が知っておくべきHTML最適化テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。