HTML を最適化して Web ページを高速化する方法

明らかに HTML、隠された「共通スクリプト」 Web ページのダウンロード時間を短縮する鍵は、ファイル サイズを減らす方法を見つけることです。複数のページが一部のコンポーネント コンテンツを共有する場合、これらの共通部分を個別に分離することを検討できます。例: 複数の HTML ページで使用されるスクリプト プログラムを独立した .js ファイルに記述し、次のようにページ内で呼び出すことができます「共通スクリプト」を密かに横断する明白な HTML

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

この方法では、パブリック ファイルを 1 回ダウンロードしてバッファに入れるだけで済みます。次回、パブリック ファイルを含む HTML ページが再度呼び出されるとき、ダウンロード時間は大幅に短縮されます。
スタイルシートのコンテンツをアンダーグラウンドで機能させましょう
CSS は HTML ドレッサーであり、美しい Web ページには CSS が欠かせません。 HTML ページで CSS を参照する方法は数多くあり、方法が異なれば効率も異なります。通常、 の間に定義されたスタイル コントロール コードを抽出し、別の .css ファイルに保存し、HTML ページで タグまたは @import タグを使用します。
​                                                                                                                         
2 つの点に注意してください:

1. .css ファイルに

2. @import タグと LINK タグは HTML ページの HEAD セクションに定義する必要があります。

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

1. 同じスクリプト言語を使用する HTML ページは、JavaScript や VBScript などのスクリプト プログラムのサポートと切り離すことができません。ただし、お気づきでしょうか。この混合使用により、ページのアクセス速度が遅くなります。その理由は、複数のスクリプト コードを解釈して実行するには、複数のスクリプト エンジンをメモリにロードする必要があるためです。したがって、同じスクリプト言語を使用してページにコードを記述するようにしてください。

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


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

これらの 4 つの属性: posLeft、posTop、posWidth、posHeight に注目してください。これらは、対応する文字列戻り値のポイント値に対応します。さて、これらのプロパティを使用してコードを書き直して、上記のコードで実装された関数を実現しましょう。
element.style.posLeft =10
コードが短くなり、高速になります。
複数のアニメーションのループ制御
アニメーション効果を作成する場合、もちろんタイマーの使用は切り離せません。通常の方法は、window.setTimeout を使用してページ上に要素を連続的に配置することです。ただし、ページ上に複数のアニメーションを表示する場合、複数のタイマーを設定する必要がありますか?答えはいいえだ！理由は簡単です。タイマー機能は貴重なシステム リソースを大量に消費するからです。ただし、ページ上で複数のアニメーションを制御できるのは、ループを使用することです。ループ内では、対応するアニメーションの位置がさまざまな変数値に基づいて制御されます。ループ全体で window.setTimeout() 関数呼び出しが 1 つだけ使用されます。
表示よりも高速です
画像を表示したり非表示にしたりすると、興味深い効果が得られます。これを実現するには、CSS の可視性属性を使用するか、表示属性を使用するかの 2 つの方法があります。絶対的に配置された要素の場合、ダイアログと可視性は同じ効果を持ちます。 2 つの違いは、display:none に設定された要素はドキュメント フローのスペースを占有しなくなりますが、visibility:hidden に設定された要素は元の位置を保持することです。
ただし、絶対に配置された要素を処理したい場合は、可視性を使用した方が高速です。
小さく始めてください
DHTML Web ページを作成する際の重要なヒントは、小さく始めてください。初めて DHTML ページを作成するときは、そのページで知っているすべての DHTML 機能を使用しようとしないように注意してください。一度に 1 つの新機能を使用して、その結果生じる変更を注意深く観察できます。パフォーマンスの低下に気付いた場合は、その理由をすぐに見つけることができます。
スクリプトの DEFER 化
DEFER は、スクリプト プログラムの強力な機能の中でも「縁の下の力持ち」です。使ったことがないかもしれませんが、ここでの紹介を読んだ後は、これなしでは生きていけないと思います。これは、スクリプト セグメントにすぐに実行する必要のないコードが含まれていることをブラウザに伝え、SRC 属性と組み合わせて使用​​すると、これらのスクリプトがバックグラウンドでダウンロードされ、コンテンツがフォアグラウンドで表示されるようにすることもできます。通常通りユーザーに。
最後に 2 つの点に注意してください:
1. document.write は直接出力効果を生み出すため、遅延タイプのスクリプト セグメントで document.write コマンドを呼び出さないでください。
2. また、遅延スクリプトセグメントには、即時実行スクリプトで使用されるグローバル変数や関数を含めないでください。
同じ URL で大文字と小文字の一貫性を維持します
UNIX サーバーでは大文字と小文字が区別されることは誰もが知っていますが、知っていましたか? Internet Explorer のバッファでも大文字と小文字の文字列が別々に扱われます。したがって、Web 開発者は、同じリンクの URL 文字列の大文字化を、異なる場所でも一貫して保つようにする必要があります。そうしないと、同じ場所の異なるファイルのバックアップがブラウザのバッファに保存され、同じ場所からコンテンツをダウンロードするリクエストの数も増加します。これらは間違いなく Web アクセスの効率を低下させます。したがって、同じ場所にある URL については、異なるページで URL 文字列の大文字と小文字を一致させてください。

マークアップには始まりと終わりがあるようにしましょう
自分の HTML コードを書いたり、他の人の HTML コードを表示したりするとき、マークアップに始まりと終わりがある状況に遭遇したことがあるはずです。例:
​                   。
明らかに、上記のコードには 3 つの 終了タグがありません。ただし、これによって正しい実行が妨げられることはありません。 HTML には、FRAME、IMG、P など、このようなタグが他にもあります。
ただし、怠けずに終了タグを完全に記述してください。これにより、HTML コード形式が標準化されるだけでなく、ページの表示速度も向上します。 Internet Explorer では、段落やリスト項目がどこで終わるのかを理解するのに時間がかからないからです。
​                  

開始記号と終了記号の例

最初のもの

1

上記は HTML ページを高速化するための 10 の処理テクニックをリストしたものです。これらを説明するのは非常に簡単ですが、その本質を真に理解して習得し、1 つの例から推論することによってのみ、より高速でより優れたプログラムを作成できます。                                                                                           

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