Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか? ほとんどの開発者は、JavaScript と画像、サーバー構成、ファイルの圧縮と連結、さらには CSS の調整 (小さな画像の結合) を通じて最適化を行います。 HTML は常に Web のコア言語であるにもかかわらず、貧弱な HTML は見過ごされがちです。 HTML はどんどん大きくなっています。上位 100 の Web サイトの HTML ページのほとんどは 40K 程度です。 Amazon と Yahoo は何千もの HTML ページを使用します。 youtube.com のメイン ページには 3,500 個の HTML 要素があります。 HTML の複雑さとページ上の要素の数を減らしても解析時間が大幅に短縮されるわけではありませんが、HTML はさまざまなデバイスに適応し成功に影響を与える高速な Web ページを構築する上で重要な要素です。 コード (特に HTML) を記述する方法は 1 つではありません。これは単なる一般的な経験であり、唯一の正しい選択ではありません。 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 コードコンテンツをクリップボードにコピー
ページの上部、たとえば head 要素で CSS ファイルを参照します。 CSSコードコンテンツをクリップボードにコピー
こうすることで、ブラウザは乱雑なページレイアウトをレンダリングすることなく、HTML を解析する前にスタイルをプリロードできます。 本文を閉じる前に、ページの一番下に JavaScript を配置します。これにより、JavaScript が読み込まれる前にブラウザがページをレンダリングできるため、ページのレンダリング時間が長くなります。 JavaScriptコードコンテンツをクリップボードにコピー
JavaScript でイベント処理を追加します。 HTML に追加しないでください。これは維持するのが非常に困難です。たとえば、 XML/HTML コードコンテンツをクリップボードにコピー
これはずっと良いです: JavaScriptコードコンテンツをクリップボードにコピー
有効なHTML Web ページが成功する主な要因は、無効な HTML を処理できるブラウザの能力です。ブラウザには、無効なコードをレンダリングする方法に関する標準化されたルールもいくつかあります。 しかし、これはそれを手放すべき理由にはなりません。有効な HTML はデバッグが容易で、ファイルサイズが小さく、高速で、レンダリングが高速であるためリソースの消費も少なくなります。無効な HTML により、レスポンシブ デザインの実装が困難になります。 テンプレートを使用する場合は、有効な HTML を記述することが特に重要です。 BUILD システムで HTML を検証する: HTMLHint や SublimeLinter などの検証プラグインを使用して、HTML の構文をチェックします。 HTML5 doctype を使用します。 HTML 階層を維持するようにしてください。要素を正しくネストし、閉じられていない要素がないことを確認してください。デバッガーがコメントを追加するのに役立ちます。 XML/HTML コードコンテンツをクリップボードにコピー
自己終了しない要素の後には必ず終了タグを追加してください。たとえば、次のようになります。 XML/HTML コードコンテンツをクリップボードにコピー
しかし、次の書き方をすれば間違いを避け、段落の階層をより明確にすることができます。 <p>ペストは食べても美味しいです...</p> 項目要素 (li) は閉じる必要はなく、非常に賢いプログラマーはこれをこのように記述しますが、リスト要素 (ul) は閉じる必要があります。 XML/HTML コードコンテンツをクリップボードにコピー
注意しなければならないのは、ビデオとオーディオの要素です。それらは自己完結的ではありません: XML/HTML コードコンテンツをクリップボードにコピー
逆に、不要なコードを削除することで、HTML ページはよりきれいになります。 img などの自己完結要素に「/」を追加する必要はありません。 プロパティを追加しない場合、プロパティを設定しても値はありません(この場合、自動的に再生されず、コントロールもありません)。 属性のないビデオ XML/HTML コードコンテンツをクリップボードにコピー
次の2つがより良い XML/HTML コードコンテンツをクリップボードにコピー
読みやすいですね XML/HTML コードコンテンツをクリップボードにコピー
styletタグとscriptタグにはtype属性は必要ありません。デフォルトはcssとjavascriptです。 プロトコル アドレスを最適化することをお勧めします (http または https を削除すると、現在のプロトコルに従って自動的に構成されます) XML/HTML コードコンテンツをクリップボードにコピー
読みやすさを向上させる(一目見ただけでタイトルのように見えるなど) XML/HTML コードコンテンツをクリップボードにコピー
これはリンクのようなもの <a href="/contact"><h2>お問い合わせ</h1></a> 小文字を使用する必要があります XML/HTML コードコンテンツをクリップボードにコピー
大文字と小文字を混ぜると見た目がさらに悪くなります。 XML/HTML コードコンテンツをクリップボードにコピー
セマンティックマークアップ 「セマンティクス」とは意味に関連することを意味する HTML は意味のあるコンテンツをマークアップする必要があります。つまり、要素は記述するコンテンツと一致する必要があります。 HTML5 では、<header>、<footer>、<nav> などの新しい「セマンティック要素」が導入されています。 適切なコンテンツに適切な要素を使用すると、アクセシビリティが向上します。 タイトルには<h1>、<h2>、<h3>、リストには<ul>または<ol>を使用します。 <article>のタイトルは<h1>で始まる必要があることに注意してください。 <header>、<footer>、<nav>、<aside> の使用 本文を書くには<p>を使用します 強調するには、<i> と <b> の代わりに <em> と <strong> を使用します。 フォームは<label>要素、入力タイプを使用します テキストと要素を混在させるとレイアウトの問題が発生する可能性がある XML/HTML コードコンテンツをクリップボードにコピー
それは次のように表現するのが最も適切である。 XML/HTML コードコンテンツをクリップボードにコピー
レイアウト HTML はスタイルではなく意味に基づいて構造化する必要があります。 レイアウトではなくテキストに <p> 要素を使用します。 行を折り返すために <br> を使用することは避け、代わりにブロックレベル要素と CSS を使用してください。 水平区切り線 <hr> の使用は避けてください。 CSS 境界スタイルを使用して制御します。 不要な DIV を使用しないでください。 W3C では、DIV をソート順序の最後の要素として定義しています。 どの要素がブロックレベル要素であるかを認識し、不要なブロックレベル要素を DIV 内に配置しないようにしてください。 div 内にリストを配置する必要はありません。 レイアウトにテーブルを使用しないでください。 Flex ボックスは広く推奨されているので、可能であれば使用してください。 CSS のパディングとマージンを使用し、ボックス モデルを理解します。 この投稿は HTML に関するものですが、ここでは基本的な CSS のヒントをいくつか紹介します。 インライン CSS は避けてください。パフォーマンス上の理由から、CSS は BUILD 時に Web ページに埋め込むことができます。 IDの重複を避けてください。 複数の要素にスタイルを適用する場合は、子要素ではなく親要素にクラスを使用することをお勧めします。 XML/HTML コードコンテンツをクリップボードにコピー
アクセシビリティ セマンティック要素の使用 下位互換性を提供 リンクにタイトル属性を追加し、リンク テキストと同じコンテンツを使用しないようにします。 入力要素にタイプ属性とプレースホルダー属性を追加する |
<<: CSS--overflow:hidden のプロジェクト例
>>: DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作
前回の記事では、docker compose を使用して FastDfs ファイル サーバーをインス...
1: openssl とは何ですか? その機能は何ですか?適用シナリオは何ですか? Baidu 百科...
1. MySQLサービスをシャットダウンする# service mysqld stop 2. rpm...
テーブルの背景色は、BGCOLOR 属性を通じて設定できます。基本的な構文<テーブル BGCO...
前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...
目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...
効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...
偶然、プロジェクト内でVue.$setが無効であることがわかりましたデータ フィルタリングを追加する...
エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...
以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...
インストール中に遭遇した問題を記録しておきますので、皆様のお役に立てれば幸いです。 1. ダウンロー...
今日、Dockerfile を使用してイメージを作成したときに問題が発生し、イメージの実行後にコンテ...
目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....
目次1. 背景2. テーブルロックによるクエリの遅延3. オンラインでテーブル構造を変更するとどのよ...
これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...