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

Dec 16, 2016 pm 02:15 PM

複数のアニメーションのループ制御

アニメーション効果を作成する場合、もちろんタイマーの使用は切り離せません。通常の方法は、window.setTimeout を使用してページ上に要素を連続的に配置することです。ただし、ページ上に複数のアニメーションを表示する場合、複数のタイマーを設定する必要がありますか?答えはいいえだ!理由は簡単です。タイマー機能は貴重なシステム リソースを大量に消費するからです。ただし、ページ上で複数のアニメーションを制御できるのは、ループを使用することです。ループ内では、対応するアニメーションの位置がさまざまな変数値に基づいて制御されます。ループ全体で window.setTimeout() 関数呼び出しが 1 つだけ使用されます。

可視性は表示よりも高速です

画像を表示したり非表示にしたりすると、興味深い効果が得られます。これを実現するには 2 つの方法があります。CSS の可視性属性を使用するか、表示属性を使用します。絶対的に配置された要素の場合、ダイアログと可視性は同じ効果を持ちます。 2 つの違いは、display:none に設定された要素はドキュメント フローのスペースを占有しなくなりますが、visibility:hidden に設定された要素は元の位置を保持することです。

ただし、絶対に配置された要素を処理したい場合は、可視性を使用した方が高速です。

小さく始める

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

スクリプトのDEFER

DEFERは、スクリプトプログラムの強力な機能の中でも「縁の下の力持ち」です。使ったことがないかもしれませんが、ここでの紹介を読んだ後は、これなしでは生きていけないと思います。これは、スクリプト セグメントにすぐに実行する必要のないコードが含まれていることをブラウザーに伝え、SRC 属性と組み合わせて使用​​すると、これらのスクリプトがバックグラウンドでダウンロードされ、フォアグラウンドのコンテンツが表示されるようにすることもできます。通常通りユーザーに。
HTML - 高速化と高速化 (パート 2)

最後に 2 つの点に注意してください:

1. document.write は直接出力効果を生み出すため、defer タイプのスクリプトセグメントで document.write コマンドを呼び出さないでください。

2. また、遅延スクリプトセグメントには、即時実行スクリプトで使用されるグローバル変数や関数を含めないでください。

同じ URL で大文字と小文字の一貫性を維持する

UNIX サーバーでは大文字と小文字が区別されることは誰もが知っていますが、知っていましたか? Internet Explorer のバッファでも大文字と小文字の文字列が別々に扱われます。したがって、Web 開発者は、同じリンクの URL 文字列の大文字化を、異なる場所でも一貫して保つようにする必要があります。そうしないと、同じ場所の異なるファイルのバックアップがブラウザのバッファに保存され、同じ場所からコンテンツをダウンロードするリクエストの数も増加します。これらは間違いなく Web アクセスの効率を低下させます。したがって、同じ場所にある URL については、異なるページで URL 文字列の大文字と小文字を一致させてください。

マークアップには始まりと終わりがあるようにしましょう

自分自身の HTML コードを書いたり、他の人の HTML コードを表示したりするとき、私たちは皆、マークアップに始まりと終わりがある状況に遭遇したことがあるはずです。例:

ヘッダーとテールマークの例

    1つ目
  • 2つ目
  • 3つ目
です。当然のことですが、上記のコードには 3 つの 終了タグがありません。ただし、これはその正しい実行を妨げるものではありません。 HTML には、FRAME、IMG、P など、このようなタグが他にもあります。

ただし、怠けずに終了タグを完全に記述してください。これにより、HTML コード形式が標準化されるだけでなく、ページの表示速度も向上します。 Internet Explorer では、段落やリスト項目がどこで終わるのかを理解するのに時間がかからないからです。

開始タグと終了タグの例


  • 最初のタグ

  • 3 番目の



  • OK、上記は HTML ページを高速化するための 10 の処理テクニックをリストしていますが、これを説明するのは、本質を真に理解して習得し、そこから推測する必要があります。たとえば、より速く、より良いプログラムを書くことができるでしょうか。
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

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

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

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

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

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

    HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

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

    HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

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

    HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

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

    HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

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

    HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

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

    HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

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

    HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

    HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

    HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

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

    See all articles