HTML - 高速化と高速化 (パート 1)

Web 開発者は、HTML ページへのアクセスを高速化するために、複雑なコンポーネント テクノロジを習得する必要がありますか?答えは「必ずしもそうではない」です。実際、HTML と DHTML には、シンプルで使いやすいテクニックがたくさんあります。高度なスキルを備えたベテランであっても、プログラミングの初心者であっても、これらを理解することは不可欠です。

明らかに HTML、隠された「共通スクリプト」

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

<script src="myfile.js">&lt ;/script>

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

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

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

<style>
@import url("mysheet1.css");
</style>


1. <style> タグを含める必要はありません。ファイル; 2 、 @import および LINK タグは HTML ページの HEAD セクションで定義する必要があります。

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

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

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

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

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

<IFRAME> タグを使用したことがありますか?とても良い機能です。 HTML ドキュメントに 2 ページ目のコンテンツを含める場合、通常は <FRAMESET> タグを使用します。しかし、<IFRAME> を使用すると、すべてが簡単になります。たとえば、ドキュメント プレビュー ページを作成するには、左側に一連のトピックを配置し、プレビューするドキュメントを含む 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.posLeft += 10

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

上記は HTML 高速化と再高速化 (パート 1) の内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。