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