HTMLの最適化によりWebページの速度が向上

明らかな HTML、隠された「公開スクリプト」
Web ページのダウンロード時間を短縮する鍵は、ファイルサイズを縮小する方法を見つけることです。複数のページで共通のコンテンツが共有されている場合は、これらの共通部分を分離することを検討できます。たとえば、複数の HTML ページで使用されるスクリプトを独立した .js ファイルに記述し、次のようにページ内で呼び出すことができます。
<scriptsrc="myfile.js"></script>
この方法では、共通ファイルは一度ダウンロードするだけで、その後はバッファに格納されます。次回パブリックファイルを含む HTML ページを呼び出すと、ダウンロード時間が大幅に短縮されます。
スタイルシートのコンテンツを地下に隠す
CSS は HTML の装飾であり、これがなければ美しい Web ページは作成できません。 HTML ページで CSS を参照する方法は多数あり、方法によって効率が異なります。通常、<style></style> の間に定義されているスタイル制御コードを抽出し、別の .css ファイルに保存し、<LINK> タグまたは @import タグを使用して HTML ページで参照することができます。
<スタイル>
インポートURL: mysheet1.css
</スタイル>
次の 2 点に注意してください。1. .css ファイルに <style> タグを含める必要はありません。2. @import タグと LINK タグは、HTML ページの HEAD セクションで定義する必要があります。
貴重なメモリを節約する 2 つの方法<br /> HTML ページが占有するメモリ領域を最小限に抑えることは、ページのダウンロードを高速化する効果的な方法です。この点に関して、注意が必要な問題が 2 つあります。
1. 同じスクリプト言語を使用する
HTML ページはスクリプトプログラムのサポートなしでは動作しません。JavaScript や VBScript など、複数のスクリプト言語をページに埋め込むこともよくあります。しかし、この混在使用によってページへのアクセスが遅くなることに気づいているでしょうか。その理由は、複数のスクリプトコードを解釈して実行するには、複数のスクリプトエンジンをメモリにロードする必要があるためです。したがって、ページ内にコードを記述する際には、同じスクリプト言語を使用するようにしてください。
2. IFrameを使用する
<IFRAME> タグを使用したことがありますか?とても素晴らしい機能ですね。 HTML ドキュメントに 2 ページ目のコンテンツを含める場合、通常は <FRAMESET> タグを使用します。しかし、<IFRAME> を使用すると、すべてが簡単になります。たとえば、ドキュメントのプレビューページを開発する場合、左側に一連のトピックを配置し、右側にプレビューするドキュメントを含む IFRAME を配置できます。マウスが左側の各トピックリンクを通過すると、右側にドキュメントをプレビューするための新しい IFRAME が作成されます。そうすることでコードは効率化されますが、処理が重くなり、最終的には速度が低下します。
単一の IFRAME のみを使用します。マウスが新しいトピックを指している場合は、IFRAME 要素の SRC 属性を変更するだけです。この方法では、常に 1 つのプレビュードキュメントのみがメモリに保持されます。
最適なアニメーション配置属性を選択します<br /> 毎日 Web を閲覧すると、多くのアニメーション効果が必ず目に入ります。たとえば、かわいいウサギがページ上を行ったり来たり歩く…この効果を実現するための中核技術が CCS ポジショニングです。通常、グラフィックの配置の目的を達成するには、element.style.left プロパティと element.style.top プロパティを使用します。ただし、これによっていくつかの問題が発生します。left プロパティは、測定単位 (100px など) を含む文字列を返します。したがって、新しい位置座標を設定するには、次のように、まず文字列の戻り値を処理してから割り当てる必要があります。
dimstringLeft、intLeft
文字列Left=要素.style.left
intLeft=parseInt(stringLeft)
int左=int左10
要素のスタイルは左から順にintLeft、intLeft。
こんなに小さなことを行うのに、こんなに複雑なコードを書かなければならないと感じているに違いありません。もっと簡単な方法はないでしょうか?対応する文字列の戻り値のポイント値に対応する posLeft、posTop、posWidth、posHeight の 4 つのプロパティを確認します。さて、これらのプロパティを使用してコードを書き直し、上記と同じことを実現してみましょう。
要素.style.pos左 =10
コードが小さくなり、速度が速くなります。
複数のアニメーションのループ制御<br /> アニメーション効果を作成する場合、タイマーの使用は当然欠かせません。通常の方法は、window.setTimeout を使用してページ上の要素を継続的に検索することです。ただし、ページに複数のアニメーションを表示する場合は、複数のタイマーを設定する必要がありますか?答えはノーです!理由は簡単です。タイマー機能は貴重なシステムリソースを大量に消費するからです。ただし、ページ上の複数のアニメーションを制御することは可能です。その秘訣はループを使用することです。ループでは、対応するアニメーションの位置はさまざまな変数値に応じて制御され、ループ全体で 1 つの window.setTimeout() 関数呼び出しのみが使用されます。
表示はディスプレイよりも速い
画像を表示したり消したりすると、興味深い効果を生み出すことができます。これを実現するには、CSS visibility プロパティを使用するか、display プロパティを使用するかの 2 つの方法があります。絶対配置された要素の場合、display と visibility は同じ効果を持ちます。 2 つの違いは、display:none に設定された要素はドキュメントフローのスペースを占有しなくなるのに対し、visibility:hidden に設定された要素は元の位置を維持したままになることです。
ただし、絶対位置に配置された要素を扱う場合は、visibility を使用する方が高速です。
小さく始める<br /> DHTML Web ページを作成するための重要なヒントは、小さく始めることです。 DHTML ページを初めて作成するときは、知っているすべての DHTML 機能をページで使用しないようにしてください。一度に 1 つの新機能のみを使用し、結果として生じる変更を注意深く観察することができます。パフォーマンスの低下に気付いた場合は、その理由をすぐに見つけることができます。
DEFER スクリプト
DEFER は、スクリプトプログラムの強力な機能の中でも、目立たない存在です。使ったことがないかもしれませんが、ここで紹介を読んだ後は、これなしでは生きていけないと思います。これは、スクリプトセグメントにすぐに実行する必要がないコードが含まれていることをブラウザに通知し、SRC 属性と組み合わせて使用すると、フォアグラウンドコンテンツがユーザーに通常どおり表示される一方で、これらのスクリプトがバックグラウンドでダウンロードされるようにすることもできます。
最後に、次の 2 点に注意してください。
1. document.write は直接的な出力効果を生成するため、defer スクリプトセグメントで document.write コマンドを呼び出さないでください。
2. また、即時実行されるスクリプトで使用されるグローバル変数や関数を、遅延スクリプトセグメントに含めないでください。
同じ URL の大文字と小文字の一貫性を保つ<br /> UNIX サーバーが大文字と小文字を区別することはよく知られていますが、Internet Explorer のバッファーも大文字と小文字の文字列を別々に扱うことをご存知でしたか。したがって、Web 開発者は、同じリンクの URL 文字列の大文字と小文字を異なる場所で一貫して使用することを忘れないようにする必要があります。そうしないと、同じ場所にある異なるファイルのバックアップがブラウザのバッファに保存され、同じ場所にあるコンテンツをダウンロードする要求の数が増加します。これらは間違いなく Web アクセスの効率を低下させます。したがって、同じ場所にある URL については、異なるページで URL 文字列の大文字と小文字の表記を統一することを忘れないでください。

タグに始まりと終わりを持たせる<br /> 自分で HTML コードを書いたり、他の人の HTML コードを見たりするときに、タグに始まりはあるが終わりがない状況に遭遇したことがあるはずです。例えば：
先頭はあるが末尾がないタグの例
<UL>
<LI>最初の
<LI>2番目
<LI>3番目
</UL>
明らかに、上記のコードには </LI> 終了タグが 3 つ欠落しています。しかし、これによって正しく実行されなくなるわけではありません。 HTML には、FRAME、IMG、P など、他にも同様のタグがいくつかあります。
ただし、怠けずに終了タグを完全に記述してください。これにより、HTML コードの形式が標準化されるだけでなく、ページの表示速度も速くなります。 Internet Explorer では、段落またはリスト項目が終了する場所を決定して計算するのに時間がかかりません。
<P>ヘッドタグとテールタグの例</P>
<UL>
<LI>まず</LI>
<LI>2番目</LI>
<LI>3番目</LI>
</UL>
さて、上記は HTML ページを高速化するための 10 個の処理手法の一覧です。これらを説明するのは簡単ですが、その本質を本当に理解して習得し、他の状況に適用することによってのみ、より高速で優れたプログラムを作成できます。

<<: Vue3 の使用 (パート 1) Vue CLI プロジェクトの作成

>>: MySQL で not in を使用して null 値を含める問題を解決する