HTML 最適化のヒント

高洛峰オリジナル: 2017-02-27 10:39:31795ブラウズ

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

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

1. HTML5 ドキュメントタイプを使用します。次は空のファイルです:

<!DOCTYPE html>  
<html>  
  
<head>  
 <title>Recipes: pesto</title>  
</head>  
  
<body>  
  
  <h1>Pesto</h1>  
  
  <p>Pesto is good!</p>  
  
</body>  
</html>

2. ドキュメントの先頭で 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 属性を持つスクリプト要素は、順番に実行されることが保証されません。

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

index.html:

<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 ドキュメントタイプを使用する

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

フォーマットの一貫性により HTML コードが簡単になります。デバッグを読み、理解し、最適化する。

セマンティクスとは、意味に関連するものを指します。HTML では、ページのコンテンツからセマンティクスを確認できます。要素と属性の命名は、コンテンツの役割と機能をある程度表現します。 HTML5 では、1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、c787b9a589a3ece771e842a6176cf8e9 などの新しいセマンティック要素が導入されています。

コードを記述するために適切な要素を選択すると、コードの可読性が保証されます:

使用4a249f0d628e2318394fd9b75b4636b1(c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355…)表示标题，ff6d136ddc5fdfeffaf53ff6ee95f185或c34106e0b4e09414b63b2ea253ff83d6实现列表；
注意使用23c3de37f2f9ebcb477c4a90aac6fffd 标签之前应添加4a249f0d628e2318394fd9b75b4636b1标签；
选择合适的HTML5语义元素如1aa9e5d373740b65a0cc8f0a02150c53，c37f8231a37e88427e62669260f0074d,c787b9a589a3ece771e842a6176cf8e9,15221ee8cba27fc1d7a26c47a001eb9b；
使用e388a4556c0f65e1904146cc1a846bee描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。
使用907fae80ddef53131f3292ee4f81644b和8e99a69fbe029cd4e2b854e244eab143标签替代5a8028ccc7a7e27417bff9f05adf5932和a4b561c25d9afb9ac8dc4d70affff419标签。
使用2e1cf0710519d5598b1f0f14c36ba674元素，输入类型，占位符及其他属性来强制验证。
将文本和元素混合，并作为另一元素的子元素，会导致布局错误。

例如：

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

换种写法会更好：

   1: e388a4556c0f65e1904146cc1a846bee
   2:    62f4dd80875f0d2585fe00dc94f97b94Name:8c1ecd4bb896b2264e0711597d40766cb8ecd12412814ff6993a9b9f10fe1177
   3: 94b3e26ee717c64999d7867364b1b4a3

布局

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

使用e388a4556c0f65e1904146cc1a846bee元素修饰文本，而不是布局；默认e388a4556c0f65e1904146cc1a846bee是自动提供边缘，而且其他样式也是浏览器默认提供的。
避免使用0c6dc11e160d3b678d68754cc175188a分行，可以使用block元素或CSS显示属性来代替。
避免使用f32b48428a809b51f04d3228cdf461fa来添加水平线，可使用CSS的border-bottom 来代替。
不到关键时刻不要使用p标签。
尽量少用Tables来布局。
可以多使用Flex Box
使用CSS 来调整边距等。

CSS

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

避免内联css
最多使用ID类一次
当涉及多个元素时，可使用Class来实现。

以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理

更多HTML优化技巧相关文章请关注PHP中文网！

声明：

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

前の記事：HTMLタグのネストルールの詳細な概要次の記事：HTMLタグのネストルールの詳細な概要

続きを見る

HTML 最適化のヒント

関連記事