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 コードを表示したりするとき、私たちは皆、マークアップに始まりと終わりがある状況に遭遇したことがあるはずです。例:
ヘッダーとテールマークの例
- 1つ目
- 2つ目
- 3つ目
ただし、怠けずに終了タグを完全に記述してください。これにより、HTML コード形式が標準化されるだけでなく、ページの表示速度も向上します。 Internet Explorer では、段落やリスト項目がどこで終わるのかを理解するのに時間がかからないからです。
開始タグと終了タグの例
OK、上記は HTML ページを高速化するための 10 の処理テクニックをリストしていますが、これを説明するのは、本質を真に理解して習得し、そこから推測する必要があります。たとえば、より速く、より良いプログラムを書くことができるでしょうか。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
