検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >知っておくべきHTML最適化のヒント

知っておくべきHTML最適化のヒント

高洛峰
高洛峰オリジナル
2017-03-12 17:18:131200ブラウズ

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

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

HTML コードの複雑さとページ要素の数を効果的に減らすにはどうすればよいですか? この記事では、主にこの問題を解決し、ページの読み込みを高速化し、次のことを可能にする簡潔で明確な HTML コードを記述する方法を紹介します。さまざまなデバイスでうまく動作します。

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

  • 構造の分離: コンテンツのスタイルではなく、HTML を使用して構造を追加します。

  • クリーンに保ちます: ワークフローにコード検証ツールを追加します。 ; ツールを使用するか、スタイル ウィザードでコード構造と書式設定を維持します

  • 新しい言語を学びましょう: 要素構造とセマンティック マークアップを取得します。

  • アクセシビリティの確保: ARIA 属性やフォールバック属性などを使用します。

  • テスト: Web サイトを複数のデバイスで適切に実行できるようにし、エミュレーターやパフォーマンス ツールを使用します。

知っておくべきHTML最適化のヒント

HTML、CSS、JavaScriptの関係

HTMLは、ページの構造とコンテンツを調整するために使用されるマークアップ言語です。 HTML を使用してスタイル コンテンツを変更したり、ヘッダー タグにテキスト コンテンツを入力したりすることはできないため、コードが長く複雑になります。代わりに、CSS を使用してレイアウト要素と外観を変更する方が適切です。 HTML 要素 デフォルトの外観はブラウザのデフォルトのスタイルシートによって定義されます。たとえば、Chrome では、h1 タグ要素は 32 ピクセル倍の太字フォントでレンダリングされます。

3 つの一般的なデザイン ルール:

  1. HTML を使用してページ構造を構築し、CSS を使用してページのプレゼンテーションを変更し、JavaScript を使用してページ機能を実装します。 CSS ZenGarden は動作の分離を非常にうまく示しています。

  2. CSS または JavaScript で実装できる場合は、使用する HTML コードを減らします。

  3. 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 情報を準備します。これは、ページ読み込みパフォーマンスの向上に役立ちます。

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

<body>

  ...

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

</body>


Defer および async 属性を使用する async 属性を持つ Script 要素は、順番に実行されることが保証されません。

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

<head>
  
  ...

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

</head>

<body onload="init()">

  ...

  <button onclick="handleFoo()">Foo</button>

  ...

</body>

js/local.js:

<head>

  ...

</head>

<body>

  ...

  <button id="foo">Foo</button>

  ...

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

</body>


Verification

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

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


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

HTML5 ドキュメント タイプ

を使用して、HTML 階層を維持しやすくし、開いたままの状態でネストされた要素を回避します
    。

    • 各要素の終了タグを必ず追加してください。

    • 不要なコードを削除します。自己終了要素の終了タグを追加する必要はありません。ブール属性には値を割り当てる必要はなく、存在する場合は True になります。

  • コード形式

    • HTML コードを読みやすくし、理解し、最適化し、デバッグしやすくします。

  • 语义标记

    语义指意义相关的事物，HTML 可从页面内容中看出语义：元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素，如

    ，
    及

    选择合适的元素来编写代码可保证代码的易读性：

    • 使用

      (

      ,

      …)表示标题，
        或
        实现列表

    • 注意使用

      标签之前应添加

      标签；

    • 选择合适的HTML5语义元素如

      ，
      ,

    • 使用

      描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。

    • 使用和标签替代和标签。

    • 使用

    • 将文本和元素混合，并作为另一元素的子元素，会导致布局错误，

    例如：

    <p>Name: <input type="text" id="name"></p>


    换种写法会更好：


       1:  <p>
       2:    <label>Name:</label><input>
       3:  </p>


     <br>

    布局

    要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。

    • 使用

      元素修饰文本，而不是布局；默认

      是自动提供边缘，而且其他样式也是浏览器默认提供的。

    • 避免使用
      分行，可以使用block元素或CSS显示属性来代替。

    • 避免使用

      来添加水平线，可使用CSS的border-bottom 来代替。

    • 不到关键时刻不要使用p标签。

    • 尽量少用Tables来布局。

    • 可以多使用Flex Box

    • 使用CSS 来调整边距等。

    CSS

    虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：

    • 避免内联css

    • 最多使用ID类 一次

    • 当涉及多个元素时，可使用Class来实现。

    以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理，因此我们在日常开发中，能够考虑到用户体验，后期维护等方面，则会产生更高效的开发。在进行前端开发时，不忘借助开发工具来助力开发过程。新一代HTML5 / JavaScript UI控件Wijmo，大而全面的前端开发工具包，为企业应用提供更加灵活的操作体验，现已全面支持Angular 2。

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

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

関連記事

続きを見る