高パフォーマンスの HTML アプリケーションを作成する-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

高パフォーマンスの HTML アプリケーションを作成する

高洛峰

Feb 28, 2017 pm 01:14 PM

html

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

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

貧弱な HTML は、常にインターネットの中核言語であるにもかかわらず、常に無視されます。

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

HTML の複雑さとページ上の要素の数を減らしても、解析時間は大幅に改善されません。しかし、HTML は、非常に高速な Web ページを構築し、さまざまなデバイスに適応し、成功に影響を与える重要な要素です。
この記事では、簡潔でクリーンな HTML の書き方を学び、迅速に読み込まれ、複数のデバイスをサポートし、デバッグと保守が容易な Web サイトを作成できるようにします。

コード、特に HTML を記述する唯一の方法はありません。これは一般的な経験にすぎませんが、これが唯一の正しい選択ではありません。
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 を使用します。

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

HTML5 ドキュメントタイプを使用します:

<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>

  <h1>Pesto</h1>
  <p>Pesto is good!</p>

</body>
</html>

ログイン後にコピー

head 要素など、ページの上部にある CSS ファイルを参照します:

<head>   
  <title>My pesto recipe</title>   
  <link rel="/css/global.css">   
  <link rel="css/local.css">   
</head>

ログイン後にコピー

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

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

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

</body>

ログイン後にコピー

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

index.html:   

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

</head>

<body onload="init()">
  ...   
  <button onclick="handleFoo()">Foo</button>
  ...   
</body>

ログイン後にコピー

これははるかに優れています:

<head>   
  ...   
</head>   

<body>   
  ...   
  <button id="foo">Foo</button>   
  ...   
  <script src="js/local.js">   
</body>   

　　js/local.js:   

init();   
var fooButton =   
    document.querySelector(&#39;#foo&#39;);   
fooButton.onclick = handleFoo();

ログイン後にコピー

正当なHTML

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

しかし、だからと言って手放す理由にはなりません。有効な HTML はデバッグが容易で、ファイルサイズが小さくなる傾向があり、高速で表示されるため、使用するリソースが少なくなります。 HTML が無効であると、レスポンシブデザインの実装が困難になります。

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

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

HTML5ドキュメントタイプを使用します。

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

<p id="foobar">
...   
</p> <!-- foobar ends -->

ログイン後にコピー

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

<p>Pesto is good to eat...   
<p>...and pesto is easy to make.

ログイン後にコピー

ただし、次の記述方法はエラーを回避し、段落の階層をより明確にすることができます。

...そしてペストは簡単に作ることができます。

items 要素 (li) は、非常に賢いプログラマーの中には、何があってもリスト要素 (ul) を閉じなければならないように、このように書く人もいます。

<ul>
  <li>Basil   
  <li>Pine nuts   
  <li>Garlic   
</ul>

ログイン後にコピー

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

<!-- 错误: liable to cause layout grief -->
<video src="foo.webm" />

<!-- 正确 -->
<video src="foo.webm">
  <p>Video element not supported.</p>
</video>

ログイン後にコピー

逆に、不要なコードを削除することで HTML ページはよりクリーンになります

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

属性の設定には値がありませんはい、属性が追加されない場合 (この場合、自動的に再生されず、コントロールがありません)、

ビデオには属性がありません

<video src="foo.webm">

ログイン後にコピー

以下の 2 つですより良い

<video src="foo.webm" autoplay="false" controls="false">
<video src="foo.webm" autoplay="true" controls="true">

ログイン後にコピー

これはより読みやすいです

<video src="foo.webm" autoplay controls>

ログイン後にコピー

スタイルレットとスクリプトタグはtype属性を必要としません; デフォルトはcssとjavascriptです

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

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>

ログイン後にコピー

　　增强可读性，如，第一眼看上去就像是个标题

<h2><a href="/contact">Contact</a><h2>

ログイン後にコピー

　　而这种则像个链接

Contact

　　应该使用小写

<A HREF="/">Home</A>

ログイン後にコピー

　　大小写混合看上去更恶心

<H2>Pesto</h2>

ログイン後にコピー

　语义标记

　　“语义”意思是跟含义相关

　　HTML应该标记有意义的内容：元素和描述的内容相符。

　　HTML5引入了一些新的‘语义元素’像

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所
3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法
4週間前 By DDD

Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7658

15

CakePHP チュートリアル

1393

52

Steamのアカウント名の形式は何ですか

91

11

Win11 Activation Key Permanent

73

19

NYTの接続はヒントと回答です

39

156

もっと見る

Related knowledge

HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM
HTML テーブルレイアウトのガイド。ここでは、HTML テーブルレイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキータグが構文でどのように機能するか、および実装例について説明します。

HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM
HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM
HTML オンクリックボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles