高性能な 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の共通クラスタとミラークラスタを構築する詳細な操作

推薦する

docker compose を使用して fastDFS ファイル サーバーを構築する方法

前回の記事では、docker compose を使用して FastDfs ファイル サーバーをインス...

opensslを使用して無料の証明書を生成する方法

1: openssl とは何ですか? その機能は何ですか?適用シナリオは何ですか? Baidu 百科...

Linux での MySQL のインストールに関する詳細なチュートリアル

1. MySQLサービスをシャットダウンする# service mysqld stop 2. rpm...

HTML テーブルタグチュートリアル (7): 背景色属性 BGCOLOR

テーブルの背景色は、BGCOLOR 属性を通じて設定できます。基本的な構文<テーブル BGCO...

MySQL 5.7.19 インストールディレクトリに my.ini ファイルを作成する方法

前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...

Nginx を使用してポート転送 TCP プロキシを実装する例

目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...

JavaScript を使って簡単な計算機を書く

効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...

Vue.$set の失敗の落とし穴の発見と解決

偶然、プロジェクト内でVue.$setが無効であることがわかりましたデータ フィルタリングを追加する...

CSS で実現される HTML 背景色のグラデーション

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...

MySQL 8.0.17 解凍版のインストールと設定方法のグラフィックチュートリアル

インストール中に遭遇した問題を記録しておきますので、皆様のお役に立てれば幸いです。 1. ダウンロー...

docker runコンテナの自動終了の解決策

今日、Dockerfile を使用してイメージを作成したときに問題が発生し、イメージの実行後にコンテ...

MySQL の group by に関する簡単な説明

目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....

MySQL の同時実行性の問題と解決策の分析

目次1. 背景2. テーブルロックによるクエリの遅延3. オンラインでテーブル構造を変更するとどのよ...

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...