HTML 最適化を使用して Web ページを高速化する方法の紹介

Web ページのダウンロード時間を短縮する鍵は、ファイル サイズを減らす方法を見つけることです。複数のページが一部のコンポーネント コンテンツを共有する場合、これらの共通部分を個別に分離することを検討できます。たとえば、複数の HTML ページで使用されるスクリプトを独立して存在させることができます。 ファイルを作成し、次のようにページ内で呼び出します:

引用されたスニペットは次のとおりです:

このようにして、パブリック ファイル一度ダウンロードしてバッファに入れるだけです。次回、パブリック ファイルを含む HTML ページが再度呼び出されるとき、ダウンロード時間は大幅に短縮されます。

スタイルシートのコンテンツをアンダーグラウンドで機能させましょう

CSS は HTML ドレッサーであり、これなしでは美しい Web ページは不可能です。 HTML ページで CSS を参照する方法は数多くあり、方法が異なれば効率も異なります。通常、 の間に定義されたスタイル コントロール コードを抽出し、別のファイルに保存できます。 css ファイルを作成し、 タグまたは @import タグを使用して HTML ページ内で引用します:

以下は引用部分です:

@import url ("mysheet1.css") );

次の 2 点にご注意ください。 CSS ファイルに

貴重なメモリを節約する 2 つの方法

HTML ページが占有するメモリ領域を最小限に抑えることは、ページのダウンロードを高速化する効果的な方法です。この点に関して、次の 2 つの点に注意する必要があります:

1. 同じスクリプト言語を使用する

HTML ページは、JavaScript や VBScript などの複数のスクリプト言語をページに埋め込むことがよくありますが、そのような混合使用は速度を低下させます。ページのアクセス速度。その理由は、複数のスクリプト コードを解釈して実行するには、複数のスクリプト エンジンをメモリにロードする必要があるためです。したがって、同じスクリプト言語を使用してページにコードを記述するようにしてください。

2. IFRAME を上手に使いましょう

単一の IFRAME のみを使用してください。マウスが新しいテーマをポイントしている場合は、IFRAME 要素の SRC属性 を変更するだけで済みます。このようにして、常に 1 つのプレビュー ドキュメントだけがメモリに残ります。

選択して使用するアニメーション位置決め属性

毎日インターネットを閲覧すると、間違いなく多くのアニメーション効果を目にするでしょう。たとえば、かわいいウサギがページ上を行ったり来たりしています... この効果を実現するための中心的なテクノロジーは CCS ポジショニングです。通常、グラフィックの配置の目的を達成するには、element.style.left と element.style.top の 2 つのプロパティを使用します。ただし、これを行うといくつかの問題が発生します。 left 属性は string を返し、それには測定単位 (100px など) が含まれます。したがって、新しい位置座標を設定するには、次のように、まず文字列の戻り値を処理してからそれを割り当てる必要があります:

以下は参照フラグメントです:

dim stringLeft, intLeft

stringLeft = element.style .left

intLeft = parseInt(stringLeft)

intLeft = intLeft + 10

element.style.left = intLeft;

こんな小さなことをするのに、こんなに複雑なコードを書かなければならないと感じているはずですが、もっと簡単な方法はないでしょうか?これらの 4 つのプロパティ: posLeft、posTop、posWidth、posHeight に注目してください。これらは、対応する文字列戻り値のポイント値に対応します。これらのプロパティを使用して、上記のコードで実装された機能を実現するコードを書き換えます:

以下は参照フラグメントです:

element.style.posLeft += 10

コードはより短く、高速です。

ループ複数のアニメーションを制御

アニメーション効果を作成する場合、もちろん、タイマーの使用は切り離せません。通常の方法は、window.setTimeout を使用してページ上に要素を連続的に配置することです。ただし、ページ上に複数のアニメーションを表示する場合、複数のタイマーを設定する必要がありますか?答えはいいえだ！理由は簡単です。タイマー機能は貴重なシステム リソースを大量に消費するからです。ただし、ページ上で複数のアニメーションを制御できるのは、ループを使用することです。ループ内では、対応するアニメーションの位置がさまざまな variable 値に基づいて制御されます。ループ全体で 1 つの window.setTimeout()関数呼び出しのみが使用されます。

Visibility は Display

よりも高速です。画像を表示したり非表示にしたりすると、興味深い効果が得られます。これを実現するには、CSS の Visibility 属性または Display 属性を使用する 2 つの方法があります。絶対的に配置された要素の場合、ダイアログと可視性は同じ効果を持ちます。 2 つの違いは、display:none に設定された要素はドキュメント フローのスペースを占有しなくなりますが、visibility:hidden に設定された要素は元の位置を保持することです。

ただし、絶対に配置された要素を処理したい場合は、可視性を使用した方が高速です。

小さく始める

DHTML Web ページを作成する際の重要なヒントは、小さく始めることです。初めて DHTML ページを作成するときは、そのページで知っているすべての DHTML 機能を使用しようとしないように注意してください。一度に 1 つの新機能を使用して、その結果生じる変更を注意深く観察できます。パフォーマンスの低下に気付いた場合は、その理由をすぐに見つけることができます。

スクリプトを延期

DEFER は、スクリプト プログラムの力における「縁の下の力持ち」です。使ったことがないかもしれませんが、ここでの紹介を読んだ後は、これなしでは生きていけないと思います。これは、スクリプト セグメントにすぐに実行する必要のないコードが含まれていることをブラウザに伝え、SRC 属性と組み合わせて使用​​すると、これらのスクリプトがバックグラウンドでダウンロードされ、コンテンツがフォアグラウンドで表示されるようにすることもできます。通常通りユーザーに。

最後に、次の 2 つの点に注意してください:

1. document.write は直接出力効果を生み出すため、遅延タイプのスクリプト セグメント内で document.write コマンドを呼び出さないでください。

2. また、遅延スクリプトセグメントには、即時実行スクリプトで使用するグローバル変数や関数を含めないでください。

同じ URL で大文字と小文字の一貫性を維持する

UNIX サーバーでは大文字と小文字が区別されることは誰もが知っていますが、知っていましたか? Internet Explorer のバッファでも大文字と小文字の文字列が別々に扱われます。したがって、Web 開発者は、同じリンクの URL 文字列の大文字化を、異なる場所でも一貫して保つようにする必要があります。そうしないと、同じ場所の異なるファイルのバックアップがブラウザのバッファに保存され、同じ場所からコンテンツをダウンロードするリクエストの数も増加します。これらは間違いなく Web アクセスの効率を低下させます。したがって、同じ場所にある URL については、異なるページで URL 文字列の大文字と小文字を一致させてください。

マークアップには始まりと終わりがあるようにしましょう

自分自身の HTML コードを書いたり、他の人の HTML コードを表示したりするとき、私たちは皆、マークアップに始まりと終わりがある状況に遭遇したことがあるはずです。例:

以下は引用部分です:

ヘッドレスタグとテールレスタグの例

• 最初の

• 2番目の

  3番目

明らかに、上記のコードには 3 つの 終了タグがありません。ただし、これによって正しい実行が妨げられることはありません。 HTML には、FRAME、IMG、P などのタグがまだいくつかあります。

ただし、終了タグは完全に記述してください。これにより、HTML コード形式が標準化されるだけでなく、表示も高速化されます。ページの速度。 Internet Explorer では、段落やリスト項目がどこで終わるのかを理解するのに時間がかからないからです。

以下は引用部分です:

gt;ヘッドとテールマークの例

• 最初の
• The 2 番目
• 3 番目

以上がHTML 最適化を使用して Web ページを高速化する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。