HTML最適化により、Webページが高速化されます

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

<scriptsrc = myfile.js> </script>

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

CSSはHTMLドレスアップであり、美しいWebページにはそれなしではありません。 HTMLページにCSSを参照するには多くの方法があり、さまざまな方法の効率が異なります。通常、<style> </style>の間で定義されているスタイルコントロールコードを抽出し、別の.cssファイルに保存してから、<link>タグまたは@importタグのHTMLページで参照できます。

<style>

@importurl（mysheet1.css）;

</style>

2ポイントに注意してください：1。<style>タグを.cssファイルに含める必要はありません。 2。@importおよびリンクタグは、HTMLページのヘッド部分で定義する必要があります。

HTMLページで占めるメモリスペースを最小化することは、ページのダウンロードをスピードアップする効果的な方法です。この点で、注意を払うべき2つの問題があります。

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

<iframe>タグを使用しましたか？とても素晴らしい機能です。 2番目のページのコンテンツをHTMLドキュメントに含めたい場合は、通常の方法は<Frameset>タグを使用することです。しかし、<iframe>では、すべてがシンプルになります。たとえば、ドキュメントプレビューページを開発するには、左側に一連のトピックを配置し、右側にiframeを配置できます。これには、プレビューするドキュメントが含まれています。マウスが左側の各トピックリンクを通過したら、右側に新しいiframeを作成してドキュメントをプレビューします。そうすることで、コードの効率は間違いなく効率的ですが、同時に大量の処理と最終的に遅い速度につながります。

単一のiframeのみを使用します。マウスが新しいトピックを指している場合、iframe要素のSRC属性を変更するだけです。このようにして、いつでもメモリのままになるプレビュードキュメントは1つだけです。

毎日オンラインでページを閲覧すると、間違いなく多くのアニメーション効果が表示されます。たとえば、かわいい小さなウサギがページ上を行き来しています...この効果を達成するためのコアテクノロジーは、CCSポジショニングです。通常、element.style.leftとelement.style.topを使用して、グラフィックポジショニングの目的を実現します。ただし、これを行うといくつかの問題が発生します。左のプロパティには文字列を返し、測定単位（100pxなど）が含まれます。したがって、新しい位置座標を設定するには、次のように値を割り当てる前に、最初に文字列の返品値を処理する必要があります。

dimstringleft、intleft

stringleft = element.style.left

intleft = parseint（stringleft）

intleft = intleft 10

element.style.left = intleft;

あなたは間違いなく、このような小さなことをするためにそのような複雑なコードを書かなければならないと感じるでしょう。もっと簡潔な方法はありますか？これらの4つのプロパティを見てください：POSLEFT、POSTOP、POSWIDTH、およびPOSHEIGHTは、対応する文字列戻り値のポイントの数に対応しています。 OK、これらのプロパティを使用してコードを書き換えて、上記のコードで実装された関数を実装します。

element.style.posleft = 10

コードは短いですが、より速いです！

もちろん、アニメーション効果に関しては、タイマーの使用は切り離せません。通常の方法は、Window.settimeoutを使用してページ上の要素を継続的に見つけることです。ただし、表示するページに複数のアニメーションがある場合、複数のタイマーを設定する必要がありますか？答えはノーです！理由は簡単です。タイマー関数は、多くの貴重なシステムリソースを消費します。ただし、ページ上の複数のアニメーションを制御できます。トリックはループを使用することです。ループでは、異なる変数値に応じて対応するアニメーションの位置を制御すると、1つのWindow.settimeout（）関数呼び出しのみがループ全体で使用されます。

写真を表示して表示し、時々興味深い効果を作成します。これを達成するには、CSSの可視性属性または表示属性を使用するには、2つの方法があります。絶対的な位置要素の場合、Diplayと視認性は同じ効果があります。 2つの違いは、表示する要素を表示することです。ドキュメントストリームのスペースを占有するものはありませんが、視認性に設定された要素：非表示は元の位置に残ります。

ただし、絶対的な位置の要素に対処したい場合は、可視性を使用する方が速くなります。

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

Deferは、スクリプトプログラムの強力な機能の中で、名もないヒーローです。あなたはそれを使用したことがないかもしれませんが、ここで紹介を読んだ後、私はあなたがそれなしでは生きられないと信じています。スクリプトセグメントにはすぐに実行する必要のないコードが含まれていることをブラウザに伝え、SRC属性と併せて、これらのスクリプトを背景にダウンロードできるようにすることもでき、フォアグラウンドのコンテンツは通常ユーザーに表示されます。

1. document.writeが直接出力効果を生成するため、defer-typeスクリプトブロックでdocument.writeコマンドを呼び出しないでください。

2。さらに、Defer Scriptブロックですぐにスクリプトを実行するために使用するグローバル変数または関数を含めないでください。

UNIXサーバーはケースに敏感であることは誰もが知っていますが、Internet Explorerのバッファーもケースストリングを異なる方法で扱うことをご存知ですか。したがって、Web開発者として、同じリンクのURL文字列のケースの一貫性をさまざまな場所に保持することを忘れないでください。それ以外の場合、同じ場所にある異なるファイルのバックアップがブラウザのバッファに保存され、同じ場所にコンテンツをダウンロードするリクエストの数も増加します。これらはすべて、間違いなくWebアクセス効率を低下させます。覚えておいてください：同じ場所にあるURLは、異なるページでURL文字列のケースの一貫性を保持してください。

他の人のHTMLコードを自分で書いたり表示したりするとき、マークに終わりがない状況に遭遇したに違いありません。例えば：

<p>ヘッドとテールマークがない例

<ul>

<li>最初

<li> 2番目

<li> 3番目

</ul>

明らかに、上記のコードには3つの</li> ENDタグがありません。しかし、これはそれが適切に実行されるのを妨げません。 HTMLには、フレーム、IMG、Pなどのタグがいくつかあります。

しかし、怠け者にならないでください。エンドマークをそのまま書いてください。これにより、HTMLコード形式の標準になるだけでなく、ページの表示速度を高速化します。インターネットエクスプローラーは、段落またはリストアイテムが終了する場所の審査と計算に時間を費やさないためです。

<p>ヘッドマークとテールマークを使用した例</p>

<ul>

<li>最初の</li>

<li> second </li>

<li>サード</li>

</ul>

わかりました、上記は、HTMLページをスピードアップするための10の処理手法をリストしています。これらを説明するのは簡単ですが、それの本質を真に理解し、習得し、より速くより良いプログラムを書くことができます。