JavaScript を使用して Web サイトを視覚的に改善しますか?

この記事では、Web サイトを魅力的かつ高速にするさまざまなテクニックについて学びます。これにより、ユーザーのエンゲージメントが高まり、Web サイトの生産性が向上します。

まず JavaScript について理解しましょう。

JavaScriptとは何ですか?

JavaScript は、Web サイトに機能を追加するために使用される Web 開発言語の 1 つです。これにより、Web サイトがインタラクティブで堅牢、より速く、より美しくなります。これは、C や CPP などの Web ブラウザで直接コンパイルできるスクリプト解釈言語であり、コンパイルにコンパイラを必要としません。これが、現代のソフトウェア業界で最も人気のある言語である理由です。

Web サイトを開発するには、HTML、CSS、JavaScript の 3 つの基本言語が必要です。

• HTML は、画像、テキスト、ボタンなどのコンテンツを Web サイトに追加するために使用されます。

• CSS はスタイル セクションで重要な役割を果たします。これは、Web サイト上のすべてのコンテンツにスタイルを適用することを意味します。

• JavaScript は、Web サイトをインタラクティブにするために使用されます。これは、ボタンを押すと Web サイトの色が変化するなど、要素を応答性のあるものにすることを意味します。 HTML と CSS は Web サイトの構造を提供するだけで、Web サイト上でアクションを実行しません。一方、JavaScript は Web サイト上で動的なアクティビティを実行します。

Web サイトにおける最適化の役割

最新の Web アプリケーションを開発する場合、Web サイトの応答速度などの Web サイトのパフォーマンスを分析することが非常に重要です。ユーザーはパフォーマンスの低い Web サイトよりもパフォーマンスの高い Web サイトにアクセスして訪問する可能性が高いため、Web サイトのパフォーマンスは Web サイトの成功における最も重要な要素の 1 つです。

覚えておくべき重要なポイント:

• サイトの速度が遅いほど、エンゲージメントとトラフィックは低くなり、レポートによると、パフォーマンスの低いサイトはパフォーマンスの高いサイトよりもユーザーが 15% 少ないとのことです。

• ユーザー インターフェイスが魅力的でない場合も、エンゲージメントに影響を与える可能性があります。魅力的なデザインと速い読み込み時間を提供する Web サイトはユーザーを引きつけ、戻ってくる可能性が高くなります。

• 過度な Flash コンテンツもアピールの点で好ましくありません。ユーザーは主にシンプルなデザインを好みます。

ウェブサイトのパフォーマンスを測定するために、Google は RAIL モデル -

を提供しています。

このモデルは、Web サイトがどのように見えるか、そしてそれがユーザーの注意にどのような影響を与えるかの構造を提供します。ここで、RAIL は、応答性、アニメーション、アイドル、およびロードを表します。

最適化されていない Web サイトの兆候は、ページの読み込み時に数秒間白い画面が表示され、その後突然ページ全体が読み込まれることがあります。最適化された Web サイトではこのようなことは行われませんが、一部のコンテンツが表示され、次に他の要素/コンテンツが表示されるという段階的な方法でコンテンツがレンダリングされます。

RAIL モデルからパフォーマンスの遅延がユーザーの注意にどのような影響を与えるかを理解しましょう。

• 0 ～ 16ms - 単一フレームが 16 ミリ秒で発生するサイトはユーザーに好まれません。

• 0 ～ 100ms - この時間枠内で望ましい結果が得られた場合、ユーザーはパフォーマンスに満足します。

• 100 ～ 100ms - この範囲内では、わずかな遅延が発生しますが、許容範囲です。

• 1000 ミリ秒以上 - 時間がこの範囲 (1 秒) に収まると、ユーザーは実行中のタスクに集中できなくなります。

• 10000ms 以上 - この時間帯は、ユーザーがサイトのパフォーマンスに不満を抱き、サイトに戻らなくなる可能性があります。

さらに、ネットワーク速度とハードウェアにより、ある程度の遅延も発生します。 Web サイトと同様、強力なマシンでの高速接続は、低速デバイスでの低速接続よりも高速です。

ウェブサイトのパフォーマンスを向上させるにはどうすればよいですか?

Web サイトの開発または保守段階でこれらの要素を考慮しながら、Web サイトのパフォーマンスを向上させるために次の要素を使用します。

＃＃＃１。未使用の JavaScript コードを減らす

長いコードを記述すると、Web ページの読み込みに時間がかかるため、Web アプリケーションを開発するときはコードを最適化することが重要です。 Google Closure Compiler または Uglify JS Code Optimizer を利用すると、未使用の機能、コード、または使用されなくなった機能が表示されます。

＃＃＃例＃＃＃

未使用のコードを削除する前:

リーリー

未使用のコードを削除した後:

リーリー

ここでは、未使用のコードを削除する前に、console ステートメントを作成し、return ステートメントの後にループを実行していることがわかりますが、これは何も行わないため役に立ちません。また、変数は使用されていないため、次のことが可能です。も削除されます。

＃＃＃２。コードサイズを減らす

JavaScript で縮小化を実行してコードを小さくすることができます。これにより、コード ファイルのサイズが削減され、Web サイトの読み込み時間が短縮されます。

例: ブレーク、追加のスペース、コメントなどにより、コード ファイルのサイズが増加します。ユーザーがコードを読むのはほとんど困難ではありませんが、コンピュータの処理速度は効率的になります。

＃＃＃３。 HTTP/2 プロトコルの使用

HTTP プロトコルは、クライアントとサーバーの間で高度なデータ通信機能を実行するように設計されています。 2015 年に、アプリケーション プロトコルの 2 番目のメジャー バージョンが開発されました。このリリースの目標は、シンプルさ、高速パフォーマンス、堅牢性を提供することでインターネット エクスペリエンスを向上させることです。

このプロトコルは JavaScript コードを改善して、一度に複数のリクエストを処理できるようにし、Web サイトの読み込み時間を短縮します。

＃＃＃４。 JavaScript CDN

の使用

CDN はコンテンツ配信ネットワークの略です。当社は、静的コンテンツを含む当社の Web サイトを世界中の拡張されたサービス ネットワークにリンクしています。 Web サイトのコンテンツを保存し、最寄りのサーバーから訪問者にコンテンツを提供します。 CDN を介してファイルが自動的に圧縮および最適化されるため、リソースの消費率が低くなり、Web サイトの速度向上に役立ちます。

＃＃＃５。メモリーリーク＃＃＃

メモリ リークは、関数またはアプリケーションが実行を完了するためにメモリを使用するときに発生しますが、メモリが解放されないため、他のアプリケーションがメモリを待機している可能性があります。新しいオブジェクトごとにメモリを消費しますが、解放しないと、JavaScript はプログラムがメモリを必要としている可能性があると判断します。メモリ リークを回避するには、開発者はこれを考慮し、プログラムのスコープを適切に管理する必要があります。

そして次の操作を実行します:

グローバル変数に null を割り当て、使用後に再割り当てします。

• 外部関数変数をクロージャに取り込むことは避けてください。

• DOM 参照は慎重に扱ってください。

• Web サイトのビジュアルを改善してユーザー インターフェイスを改善するにはどうすればよいですか?

  ＃＃＃１。色＃＃＃
ユーザーが Web サイトにアクセスすると、最初に気づくのはその色です。 Web サイトを開発するとき、デザイナーはインターフェース全体で使用される色のセットである配色を選択します。配色を決めないと、Web サイトの見た目が非常に一貫性がなく、ユーザーが集中力を失い、サイトから離れてしまう可能性があります。また、ブランド アイデンティティも定義します。チュートリアルポイント Web サイトを例にとると、ほとんどの色に緑と黒が含まれていることがわかります。

＃＃＃２。圧縮ファイル

多くのページやアニメーション、複雑なデザインが含まれる Web サイトの読み込みに時間がかかることに気付いたかもしれません。 Web サイトの速度と応答性を向上させるには、大きなファイルや画像の圧縮方法を検討する必要があります。

＃＃＃３。レスポンシブ画像を使用する

写真は Web サイトの重要な部分です。写真は Web サイトの 50% 以上を占めるため、Web サイトの速度が低下する可能性があります。したがって、速度を向上させるには、JPEG または PNG より 30% 小さい Web タイプの画像を使用してください。

＃＃＃４。グループ CSS ファイルとセレクター

ご存知のとおり、CSS です。効果を適用し、Web サイトの目に見えるプロパティを担当します。多数のスタイルシート ページを作成すると、Web サイトのパフォーマンスが低下する可能性もあります。そのため、すべての CSS ファイルを 1 つの XHTML ページにマージすると、マージの前後で Web サイトの速度とパフォーマンスが向上することがわかります。

＃＃＃５。キャッシュ＃＃＃

キャッシュは、データのサブセットを保存するためのテクノロジーです。これは、ユーザーが要求したデータのコピーを保存し、将来再度ユーザーが要求したときに、元のファイルを検索して返すのではなく、キャッシュされたコピーを返すため、データ アクセスを増やすために使用されます。

コンテンツ配信速度の向上に役立ついくつかの種類のキャッシュがあります。

メモリ キャッシュ

- これらのタイプのキャッシュでは、キャッシュされたデータが RAM に保存されるため、アプリケーション内のデータ転送プロセスの速度が向上します。

Web キャッシュ

- このキャッシュ テクノロジには 2 つの用語があります。

• Web クライアント キャッシュ: このタイプのキャッシュは、Web ブラウザー キャッシュとも呼ばれます。クライアント側に保存されます。 Web ページが初めてブラウザに読み込まれると、テキスト、スクリプト、画像、その他のメディアなどのページ リソースが保存され、次回同じページにアクセスするときにブラウザがサーバーからこれらのリソースを読み込まないようになります。しかし、ロードしてください。キャッシュ ストアを表示し、クライアント コンピューターからキャッシュ ストアを取得します。

  Web サーバー キャッシュ - このメカニズムでは、リソースをクライアント マシンではなくサーバーに保存することが目標です。このメカニズムは、Web サイト上でデータを動的に生成し、しばらくしてからそれを読み込むのに役立ちます。この方法は静的コンテンツの場合には役に立ちません。このようなキャッシュはサーバーの過負荷を軽減するのに役立ちます。

• CDN キャッシュ- CDN はコンテンツ配信ネットワークの略です。このキャッシュには、Web ページ、スクリプト、メディア ファイル、スタイル シートなどのリソースがプロキシ サーバーに保存されます。ユーザーがリソースを要求すると、プロキシ サーバーはリソースのコピーが利用可能かどうかを確認します。レプリカが使用可能な場合は、要求元のユーザーにリソースが配信されます。それ以外の場合、要求は関連するサーバーに転送されます。これにより、要求元のユーザーが最も近い利用可能なサーバーにルーティングされる場合、ネットワーク遅延が短縮されます。

  ディスク キャッシュ

  - メモリ キャッシュと同様のメカニズムです。ディスク キャッシュはデータを保存し、アプリケーション内でより高速にアクセスできるようにします。

• したがって、これらのテクノロジーにより、Web サイトは可視性とパフォーマンスの点で非常に最適化されます。

以上がJavaScript を使用して Web サイトを視覚的に改善しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。