ホームページ > 記事 > ウェブフロントエンド > 高パフォーマンスの HTML アプリケーションを作成するためのいくつかの提案_HTML/Xhtml_Web ページの制作
高パフォーマンスの HTML アプリケーションを作成するためのいくつかの提案_HTML/Xhtml_Web ページの制作
- WBOYオリジナル
- 2016-05-16 16:36:281081ブラウズ
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 ドキュメント タイプを使用します:
- >
- <html>
- <頭>
- <タイトル>レシピ: ペスト タイトル>
- 頭>
- <ボディ>
- <h1>ペストh1>
- <p>ペストは美味しいです!p>
- ボディ>
- html>
head 要素など、ページの上部で CSS ファイルを引用します:
-
私のペストレシピ - "/css/global.css">
- "css/local.css">
このようにして、ブラウザーは、わかりにくいページ レイアウトをレンダリングすることなく、HTML を解析する前にスタイルをプリロードできます。
本文を閉じる前に、ページの一番下に JavaScript を配置します。これにより、JavaScript が読み込まれる前にブラウザがページをレンダリングできるため、ページのレンダリング時間が短縮されます: