高性能な HTML アプリケーションを作成するためのヒント

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?

ほとんどの開発者は、JavaScript と画像、サーバー構成、ファイルの圧縮と連結、さらには CSS の調整 (小さな画像の結合) を通じて最適化を行います。

HTML は常に Web のコア言語であるにもかかわらず、貧弱な HTML は見過ごされがちです。

HTML はどんどん大きくなっています。上位 100 の Web サイトの HTML ページのほとんどは 40K 程度です。 Amazon と Yahoo は何千もの HTML ページを使用します。 youtube.com のメイン ページには 3,500 個の HTML 要素があります。

HTML の複雑さとページ上の要素の数を減らしても解析時間が大幅に短縮されるわけではありませんが、HTML はさまざまなデバイスに適応し成功に影響を与える高速な Web ページを構築する上で重要な要素です。
この記事では、読み込みが速く、複数のデバイスをサポートし、デバッグや保守が容易な Web サイトを作成できる、簡潔でわかりやすい HTML の書き方を学習します。

コード (特に HTML) を記述する方法は 1 つではありません。これは単なる一般的な経験であり、唯一の正しい選択ではありません。
HTML、CSS、JavaScript

HTML は、構造とコンテンツを表すために使用されるマークアップ言語です。

スタイルと外観を表示するために HTML を使用しないでください。単に「大きく」見せるためだけに見出しタグ (h1-h6) にテキストを書いたり、インデントのためだけに引用符を使用したりしないでください。代わりに、CSS を使用して要素の外観とレイアウトを変更します。

HTML 要素のデフォルトの外観は、ブラウザのデフォルトのスタイルによって実現されます。Firefox、Internet Explorer、Opera はすべて異なります。たとえば、Chrome では、デフォルトの h1 要素は 32 ピクセルのサイズでレンダリングされます。

3つの基本原則:

HTML は構造を表すために使用され、CSS はさまざまなスタイルとテーマを表現するために使用されます。ユーザーの操作に応答する JavaScript。

HTML を使用し、必要に応じて CSS と JavaScript を使用します。たとえば、多くの場合、検証には HTML フォームを使用し、アニメーションには CSS または SVG を使用します。

HTML コードから CSS と JavaScript を分離します。キャッシュを許可すると、コードのデバッグが容易になります。本番環境では、CSS と JavaScript を縮小して結合することができ、ビルド システムの一部にする必要があります。 注* JavaScriptビルド(コンパイル)システムコンペティションのドキュメント構造を参照

HTML5 ドキュメント タイプの使用:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. <html>   
  3. <ヘッド>   
  4.   < title >レシピ: ペスト</ title >   
  5. </ヘッド>   
  6. <本文>   
  7.   
  8.    < h1 >ペスト</ h1 >   
  9.    < p >ペストは美味しいです! </ p >   
  10.   
  11. </本文>   
  12. </html>   

ページの上部、たとえば head 要素で CSS ファイルを参照します。

CSSコードコンテンツをクリップボードにコピー
  1. <ヘッド>
  2. <title>私のペストレシピ</title>
  3. <link rel= "/css/global.css" >
  4. <link rel= "css/local.css" >
  5. </head>

こうすることで、ブラウザは乱雑なページレイアウトをレンダリングすることなく、HTML を解析する前にスタイルをプリロードできます。

本文を閉じる前に、ページの一番下に JavaScript を配置します。これにより、JavaScript が読み込まれる前にブラウザがページをレンダリングできるため、ページのレンダリング時間が長くなります。

JavaScriptコードコンテンツをクリップボードにコピー
  1. <本文>
  2. ...
  3. <スクリプト src= "/js/global.js" >
  4. <スクリプト src= "js/local.js" >
  5.   
  6. </本文>

JavaScript でイベント処理を追加します。 HTML に追加しないでください。これは維持するのが非常に困難です。たとえば、

XML/HTML コードコンテンツをクリップボードにコピー
  1. インデックス.html:
  2.   
  3. <ヘッド>   
  4. ...
  5.    <スクリプト  src = "js/local.js" >   
  6.   
  7. </ヘッド>   
  8.   
  9. <本文  onload = "init()" >   
  10. ...
  11.    <ボタン  onclick = "handleFoo()" > Foo </ button >   
  12. ...
  13. </本文>   

これはずっと良いです:

JavaScriptコードコンテンツをクリップボードにコピー
  1. <ヘッド>
  2. ...
  3. </head>
  4.   
  5. <本文>
  6. ...
  7. <button id= "foo" >Foo</button>
  8. ...
  9. <スクリプト src= "js/local.js" >
  10. </本文>
  11.   
  12. js/local.js:
  13.   
  14. 初期化();
  15. var fooButton =
  16. document.querySelector( '#foo' );
  17. fooButton.onclick = handleFoo();

有効なHTML

Web ページが成功する主な要因は、無効な HTML を処理できるブラウザの能力です。ブラウザには、無効なコードをレンダリングする方法に関する標準化されたルールもいくつかあります。

しかし、これはそれを手放すべき理由にはなりません。有効な HTML はデバッグが容易で、ファイルサイズが小さく、高速で、レンダリングが高速であるためリソースの消費も少なくなります。無効な HTML により、レスポンシブ デザインの実装が困難になります。

テンプレートを使用する場合は、有効な HTML を記述することが特に重要です。

BUILD システムで HTML を検証する: HTMLHint や SublimeLinter などの検証プラグインを使用して、HTML の構文をチェックします。

HTML5 doctype を使用します。

HTML 階層を維持するようにしてください。要素を正しくネストし、閉じられていない要素がないことを確認してください。デバッガーがコメントを追加するのに役立ちます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < div   id = "foobar" >   
  2. ...
  3. </div>   <!-- foobar 終了 -->   

自己終了しない要素の後には必ず終了タグを追加してください。たとえば、次のようになります。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < p >ペストは食べても美味しいです...
  2. < p > ...そしてペストは簡単に作れます。

しかし、次の書き方をすれば間違いを避け、段落の階層をより明確にすることができます。

<p>ペストは食べても美味しいです...</p>
<p>…そしてペストは簡単に作れます。</p>

項目要素 (li) は閉じる必要はなく、非常に賢いプログラマーはこれをこのように記述しますが、リスト要素 (ul) は閉じる必要があります。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < ul >   
  2.    < li >バジル
  3.    < li >松の実
  4.    < li >ニンニク
  5. </ ul >   

注意しなければならないのは、ビデオとオーディオの要素です。それらは自己完結的ではありません:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!-- エラー: レイアウトに問題が生じる可能性があります -->   
  2. <ビデオ  src = "foo.webm"   />   
  3.   
  4. <!-- 正解 -->   
  5. <ビデオ  src = "foo.webm" >   
  6.    < p >ビデオ要素はサポートされていません。 </ p >   
  7. </ビデオ>   

逆に、不要なコードを削除することで、HTML ページはよりきれいになります。

img などの自己完結要素に「/」を追加する必要はありません。

プロパティを追加しない場合、プロパティを設定しても値はありません(この場合、自動的に再生されず、コントロールもありません)。

属性のないビデオ

XML/HTML コードコンテンツをクリップボードにコピー
  1. <ビデオ  src = "foo.webm" >   

次の2つがより良い

XML/HTML コードコンテンツをクリップボードにコピー
  1. <ビデオ  src = "foo.webm"  自動再生= "false"  コントロール= "false" >   
  2. <ビデオ  src = "foo.webm"  自動再生= "true"  コントロール= "true" >   

読みやすいですね

XML/HTML コードコンテンツをクリップボードにコピー
  1. <ビデオ  src = "foo.webm"自動再生コントロール>   

styletタグとscriptタグにはtype属性は必要ありません。デフォルトはcssとjavascriptです。

プロトコル アドレスを最適化することをお勧めします (http または https を削除すると、現在のプロトコルに従って自動的に構成されます)

XML/HTML コードコンテンツをクリップボードにコピー
  1. <   href = "//en.wikipedia.org/wiki/Tag_soup" >タグスープ</ a >   

読みやすさを向上させる(一目見ただけでタイトルのように見えるなど)

XML/HTML コードコンテンツをクリップボードにコピー
  1. < h2 > < a   href = "/contact" >お問い合わせ</ a > < h2 >   

これはリンクのようなもの

<a href="/contact"><h2>お問い合わせ</h1></a>

小文字を使用する必要があります

XML/HTML コードコンテンツをクリップボードにコピー
  1. <  HREF = "/" >ホーム</ A >   

大文字と小文字を混ぜると見た目がさらに悪くなります。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < H2 >ペスト</ h2 >   

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

「セマンティクス」とは意味に関連することを意味する

HTML は意味のあるコンテンツをマークアップする必要があります。つまり、要素は記述するコンテンツと一致する必要があります。

HTML5 では、<header>、<footer>、<nav> などの新しい「セマンティック要素」が導入されています。

適切なコンテンツに適切な要素を使用すると、アクセシビリティが向上します。

タイトルには<h1>、<h2>、<h3>、リストには<ul>または<ol>を使用します。

<article>のタイトルは<h1>で始まる必要があることに注意してください。

<header>、<footer>、<nav>、<aside> の使用

本文を書くには<p>を使用します

強調するには、<i> と <b> の代わりに <em> と <strong> を使用します。

フォームは<label>要素、入力タイプを使用します

テキストと要素を混在させるとレイアウトの問題が発生する可能性がある

XML/HTML コードコンテンツをクリップボードにコピー
  1. < div >名前: <入力 タイプ= "テキスト" > </ div >   

それは次のように表現するのが最も適切である。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < div > < label >名前: </ label > < input  タイプ= "テキスト" > </ div >   

レイアウト

HTML はスタイルではなく意味に基づいて構造化する必要があります。

レイアウトではなくテキストに <p> 要素を使用します。

行を折り返すために <br> を使用することは避け、代わりにブロックレベル要素と CSS を使用してください。

水平区切り線 <hr> の使用は避けてください。 CSS 境界スタイルを使用して制御します。

不要な DIV を使用しないでください。 W3C では、DIV をソート順序の最後の要素として定義しています。

どの要素がブロックレベル要素であるかを認識し、不要なブロックレベル要素を DIV 内に配置しないようにしてください。 div 内にリストを配置する必要はありません。

レイアウトにテーブルを使用しないでください。

Flex ボックスは広く推奨されているので、可能であれば使用してください。

CSS のパディングとマージンを使用し、ボックス モデルを理解します。
CS

この投稿は HTML に関するものですが、ここでは基本的な CSS のヒントをいくつか紹介します。

インライン CSS は避けてください。パフォーマンス上の理由から、CSS は BUILD 時に Web ページに埋め込むことができます。

IDの重複を避けてください。

複数の要素にスタイルを適用する場合は、子要素ではなく親要素にクラスを使用することをお勧めします。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!-- ちょっとバカっぽい :( -->   
  2. < ul >   
  3.    <   class = "ingredient" >バジル</ li >   
  4.    <   class = "ingredient" >松の実</ li >   
  5.    <   class = "ingredient" >ニンニク</ li >   
  6. </ ul >   
  7.   
  8. <!-- さらに良いです :) -->   
  9. < ul   class = "材料" >   
  10.    < li >バジル</ li >   
  11.    < li >松の実</ li >   
  12.    < li >ニンニク</ li >   
  13. </ ul >   

アクセシビリティ

セマンティック要素の使用

下位互換性を提供

リンクにタイトル属性を追加し、リンク テキストと同じコンテンツを使用しないようにします。

入力要素にタイプ属性とプレースホルダー属性を追加する

<<:  CSS--overflow:hidden のプロジェクト例

>>:  DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作

推薦する

WEB2.0の片手ルール

<br />前回のCSSに関する記事は、多くの人にあまり理解されませんでした。そのため、...

Ubuntu 基本チュートリアル: apt-get コマンド

序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...

角丸四角形の HTML+CSS 実装コード

退屈していたので、突然角丸四角形の実装を思いつきました。しかし、私たちはこの話題についてあまりにも長...

MySQL インデックスの最適化: ページング探索の詳細な紹介

目次MySQL インデックス最適化ページングの調査ケース1ケース2 MySQL インデックス最適化ペ...

Vue開発の詳細な説明 ソートコンポーネントコード

目次 <テンプレート> <ul class="コンテナ">...

nginxカスタム変数と組み込み定義済み変数の使用

概要Nginx では変数を使用して設定を簡素化し、設定の柔軟性を向上させることができます。すべての変...

Angularコンポーネントライフサイクルの詳細説明(I)

目次概要1. フックの呼び出し順序2. onChangesフック3. 変更検出メカニズムとDoChe...

Docker nginx + https サブドメイン設定の詳細なチュートリアル

今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるようになりました (例)

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるよう...

HTML での一般的なリダイレクト接続の例コード

コードをコピーコードは次のとおりです。 window.location.href="zcb...

WeChat アプレット開発フォーム検証 WxValidate の使用

個人的には、WeChat アプレットの開発フレームワークは VUE と概ね似ていると感じていますが、...

Vueデータ監視の原理の詳細な説明

目次1. はじめにII. 監視対象2.1 なぜオブジェクトを監視する必要があるのですか? 2.2 デ...

MySQL全文インデックスを使用して検索エンジンのサンプルコードの簡易版を実現する

序文全文インデックスを使用できるのは Innodb と MyISAM ストレージ エンジンのみです ...

js の getBoundingClientRect() メソッドの詳細な説明

1. getBoundingClientRect() 分析getBoundingClientRect...

JS でカルーセル画像を実装するいくつかの方法

カルーセル主なアイデアは次のとおりです。大きなコンテナには、コンテナの幅の整数倍の非常に長いテーブル...