知っておくべき HTML 最適化スキル_html/css_WEB-ITnose-htmlチュートリアル-php.cn

知っておくべき HTML 最適化スキル_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:59:59

オリジナル

803 人が閲覧しました

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 とは別に保存します。これはキャッシュとデバッグに役立ちます。

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

HTML5 ドキュメントタイプを使用すると、次のようになります。空のファイル:

<!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 情報を準備します。これにより、ページの読み込みパフォーマンスが向上します。

ページの下部にある終了 body タグの前に JavaScript コードを入力します。これにより、ブラウザは JavaScript コードを解析する前にページを読み込むため、ページの読み込み速度が向上します。ページ要素。

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

ログイン後にコピー

非同期属性を持つスクリプト要素は、順番に実行されることが保証されていません。

ハンドラーは JavaScript コードに追加できます。たとえば、次のコードはエラーが発生しやすいため、保守が困難です。

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

ログイン後にコピー

以下の書き方の方が良いです:

index.html:

js/local.js:

<head>  ...</head><body>  ...  <button id="foo">Foo</button>  ...  <script src="js/local.js"></body>

ログイン後にコピー

Verification

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

ログイン後にコピー

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

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

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

HTML5 ドキュメントタイプを使用します
HTML 階層の保守が容易であることを確認し、開いたままの状態でネストされた要素を避けます。
各要素の終了タグを必ず追加してください。
不要なコードを削除します。自己終了要素に終了タグを追加する必要はありません。ブール属性は値を割り当てる必要がなく、存在する場合は True になります。
コード形式

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

<video src="foo.webm" autoplay controls>

ログイン後にコピー

セマンティックタグ

セマンティックとは、HTML ではページのコンテンツからセマンティックを参照できます。要素と属性の命名は、コンテンツの役割と機能を特定します。範囲。 HTML5 では、

、

知っておくべき HTML 最適化スキル_html/css_WEB-ITnose

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

HTML、CSS、JavaScript の関係

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

セマンティック タグ

セマンティックタグ