ホームページ > 記事 > ウェブフロントエンド > HTMLコードを最適化してWebページの読み込みを高速化します。
HTMLコードを最適化してWebページの読み込みを高速化します。
- 巴扎黑オリジナル
- 2017-08-21 11:29:122477ブラウズ
Web 開発者は、HTML ページへのアクセスを高速化するために、複雑なコンポーネント テクノロジを習得する必要がありますか?答えは「必ずしもそうではない」です。実際、HTML と DHTML には、シンプルで使いやすいテクニックがたくさんあります。高度なスキルを備えたベテランであっても、プログラミングの初心者であっても、これらを理解することは不可欠です。 M t 明らかに HTML では、Web ページのダウンロード時間を短縮するために「パブリック スクリプト」
を減らす鍵は、ファイル サイズを減らすことです。複数のページで一部のコンポーネント コンテンツを共有する場合は、これらの共通部分を個別に分離することを検討できます。たとえば、複数の HTML ページで使用されるスクリプト プログラムを独立した .js ファイルに記述し、次のようにページ内で呼び出すことができます。
1a726d19958ad1cde9b50ef77d42d125< ;/script>
この方法では、公開ファイルを一度ダウンロードしてバッファに入れるだけで済みます。次回、パブリック ファイルを含む HTML ページが再度呼び出されるとき、ダウンロード時間は大幅に短縮されます。
スタイルシートのコンテンツをアンダーグラウンドで機能させましょう
CSS は HTML デコレーターであり、美しい Web ページには CSS が欠かせません。 HTML ページで CSS を参照する方法は数多くあり、方法が異なれば効率も異なります。通常、c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 の間に定義されたスタイル コントロール コードを抽出し、別の .css ファイルに保存し、HTML ページで 3e76e57fc5dd9b761bdd2082385f4936 タグまたは @import タグを使用します。
c9ccee2e6ea535a969eb3f532ad9fe89
@import url("mysheet1.css");
531ac245ce3e4fe3d50054a55f265927
に c9ccee2e6ea535a969eb3f532ad9fe89 タグを含める必要はありません。 .css ファイル ;2. @import タグと LINK タグは HTML ページの HEAD 部分で定義する必要があります。
貴重なメモリを節約する 2 つの方法
HTML ページが占有するメモリ領域を最小限に抑えることは、ページのダウンロードを高速化する効果的な方法です。この点に関して、注意が必要な問題が 2 つあります:
1. 同じスクリプト言語を使用する
HTML ページは、スクリプト プログラムのサポートから切り離すことができません。 JavaScript や VBScript など。ただし、お気づきでしょうか。この混合使用により、ページのアクセス速度が遅くなります。その理由は、複数のスクリプト コードを解釈して実行するには、複数のスクリプト エンジンをメモリにロードする必要があるためです。したがって、同じスクリプト言語を使用してページにコードを記述するようにしてください。
2. IFrame を上手に使いましょう
36879df9ec853b781d355f37a71b3fa0 タグを使用したことがありますか?とても良い機能です。 HTML ドキュメントに 2 ページ目のコンテンツを含める場合、通常は 16a3272e017844f82176ca6782b05081 タグを使用します。しかし、36879df9ec853b781d355f37a71b3fa0 を使用すると、すべてが簡単になります。たとえば、ドキュメント プレビュー ページを作成するには、左側に一連のトピックを配置し、プレビューするドキュメントを含む IFRAME を右側に配置します。左側の各トピック リンク上にマウスが移動すると、新しい IFRAME が作成されます。右側で作成されたドキュメントをプレビューします。そうすることで、コード効率は間違いなく効率的ですが、同時に処理が重くなり、最終的には速度が遅くなります。
それは問題ではありません。解決策はあります。単一の IFRAME を使用するだけです。マウスが新しいテーマをポイントしている場合は、IFRAME 要素の SRC 属性を変更するだけで済みます。このようにして、常に 1 つのプレビュー ドキュメントだけがメモリに残ります。
アニメーションの配置属性を選択します
毎日インターネットを閲覧していると、間違いなく多くのアニメーション効果を目にするでしょう。たとえば、かわいいウサギがページ上を行ったり来たりしています... この効果を実現するためのコアテクノロジーは CCS ポジショニングです。通常、グラフィックの配置の目的を達成するには、element.style.left と element.style.top の 2 つのプロパティを使用します。ただし、これを行うといくつかの問題が発生します。left 属性は文字列を返し、それには測定単位 (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.poslect+= 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 コードを表示したりするとき、タグに始まりと終わりがある状況に遭遇したことがあるはずです。例:
ただし、怠けずに終了タグを完全に記述してください。これにより、HTML コード形式が標準化されるだけでなく、ページの表示速度も向上します。 Internet Explorer は、段落やリスト項目がどこで終わるかを理解するのに時間を費やさないからです。
🎜を減らす鍵は、ファイル サイズを減らすことです。複数のページで一部のコンポーネント コンテンツを共有する場合は、これらの共通部分を個別に分離することを検討できます。たとえば、複数の HTML ページで使用されるスクリプト プログラムを独立した .js ファイルに記述し、次のようにページ内で呼び出すことができます。
1a726d19958ad1cde9b50ef77d42d125< ;/script>
この方法では、公開ファイルを一度ダウンロードしてバッファに入れるだけで済みます。次回、パブリック ファイルを含む HTML ページが再度呼び出されるとき、ダウンロード時間は大幅に短縮されます。
スタイルシートのコンテンツをアンダーグラウンドで機能させましょう
CSS は HTML デコレーターであり、美しい Web ページには CSS が欠かせません。 HTML ページで CSS を参照する方法は数多くあり、方法が異なれば効率も異なります。通常、c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 の間に定義されたスタイル コントロール コードを抽出し、別の .css ファイルに保存し、HTML ページで 3e76e57fc5dd9b761bdd2082385f4936 タグまたは @import タグを使用します。
c9ccee2e6ea535a969eb3f532ad9fe89
@import url("mysheet1.css");
531ac245ce3e4fe3d50054a55f265927
に c9ccee2e6ea535a969eb3f532ad9fe89 タグを含める必要はありません。 .css ファイル ;2. @import タグと LINK タグは HTML ページの HEAD 部分で定義する必要があります。
貴重なメモリを節約する 2 つの方法
HTML ページが占有するメモリ領域を最小限に抑えることは、ページのダウンロードを高速化する効果的な方法です。この点に関して、注意が必要な問題が 2 つあります:
1. 同じスクリプト言語を使用する
HTML ページは、スクリプト プログラムのサポートから切り離すことができません。 JavaScript や VBScript など。ただし、お気づきでしょうか。この混合使用により、ページのアクセス速度が遅くなります。その理由は、複数のスクリプト コードを解釈して実行するには、複数のスクリプト エンジンをメモリにロードする必要があるためです。したがって、同じスクリプト言語を使用してページにコードを記述するようにしてください。
2. IFrame を上手に使いましょう
36879df9ec853b781d355f37a71b3fa0 タグを使用したことがありますか?とても良い機能です。 HTML ドキュメントに 2 ページ目のコンテンツを含める場合、通常は 16a3272e017844f82176ca6782b05081 タグを使用します。しかし、36879df9ec853b781d355f37a71b3fa0 を使用すると、すべてが簡単になります。たとえば、ドキュメント プレビュー ページを作成するには、左側に一連のトピックを配置し、プレビューするドキュメントを含む IFRAME を右側に配置します。左側の各トピック リンク上にマウスが移動すると、新しい IFRAME が作成されます。右側で作成されたドキュメントをプレビューします。そうすることで、コード効率は間違いなく効率的ですが、同時に処理が重くなり、最終的には速度が遅くなります。
それは問題ではありません。解決策はあります。単一の IFRAME を使用するだけです。マウスが新しいテーマをポイントしている場合は、IFRAME 要素の SRC 属性を変更するだけで済みます。このようにして、常に 1 つのプレビュー ドキュメントだけがメモリに残ります。
アニメーションの配置属性を選択します
毎日インターネットを閲覧していると、間違いなく多くのアニメーション効果を目にするでしょう。たとえば、かわいいウサギがページ上を行ったり来たりしています... この効果を実現するためのコアテクノロジーは CCS ポジショニングです。通常、グラフィックの配置の目的を達成するには、element.style.left と element.style.top の 2 つのプロパティを使用します。ただし、これを行うといくつかの問題が発生します。left 属性は文字列を返し、それには測定単位 (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.poslect+= 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 コードを表示したりするとき、タグに始まりと終わりがある状況に遭遇したことがあるはずです。例:
<P>有头无尾标记举例
<UL>
<LI>第一个
<LI>第二个
<LI>第三个
</UL> 上記のコードでは、3 つの終了タグ cbf331b4cac0bfbcf2a714e444b23b14 が欠落していることは明らかです。ただし、これによって正しい実行が妨げられることはありません。 HTML には、FRAME、IMG、P など、このようなタグが他にもあります。 ただし、怠けずに終了タグを完全に記述してください。これにより、HTML コード形式が標準化されるだけでなく、ページの表示速度も向上します。 Internet Explorer は、段落やリスト項目がどこで終わるかを理解するのに時間を費やさないからです。
<P>有头有尾标记举例</P>
<UL>
<LI>第一个</LI>
<LI>第二个</LI>
<LI>第三个</LI>
</UL>、上記は HTML ページを高速化するための 10 の処理テクニックをリストしたものです。これらを説明するのは非常に簡単ですが、本質を真に理解して習得し、1 つの例から推論することによってのみ、より高速でより優れたプログラムを作成できます。
-->
以上がHTMLコードを最適化してWebページの読み込みを高速化します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。