この記事では、Web サイトを魅力的かつ高速にするさまざまなテクニックについて学びます。これにより、ユーザーのエンゲージメントが高まり、Web サイトの生産性が向上します。
まず 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 サイトの成功における最も重要な要素の 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 コードを減らす＃＃＃例＃＃＃
未使用のコードを削除する前:リーリー
ここでは、未使用のコードを削除する前に、console ステートメントを作成し、return ステートメントの後にループを実行していることがわかりますが、これは何も行わないため役に立ちません。また、変数は使用されていないため、次のことが可能です。も削除されます。＃＃＃２。コードサイズを減らす
JavaScript で縮小化を実行してコードを小さくすることができます。これにより、コード ファイルのサイズが削減され、Web サイトの読み込み時間が短縮されます。
このプロトコルは JavaScript コードを改善して、一度に複数のリクエストを処理できるようにし、Web サイトの読み込み時間を短縮します。
＃＃＃４。 JavaScript CDN
の使用メモリ リークは、関数またはアプリケーションが実行を完了するためにメモリを使用するときに発生しますが、メモリが解放されないため、他のアプリケーションがメモリを待機している可能性があります。新しいオブジェクトごとにメモリを消費しますが、解放しないと、JavaScript はプログラムがメモリを必要としている可能性があると判断します。メモリ リークを回避するには、開発者はこれを考慮し、プログラムのスコープを適切に管理する必要があります。
グローバル変数に null を割り当て、使用後に再割り当てします。
外部関数変数をクロージャに取り込むことは避けてください。
DOM 参照は慎重に扱ってください。
Web サイトのビジュアルを改善してユーザー インターフェイスを改善するにはどうすればよいですか?
＃＃＃１。色＃＃＃写真は Web サイトの重要な部分です。写真は Web サイトの 50% 以上を占めるため、Web サイトの速度が低下する可能性があります。したがって、速度を向上させるには、JPEG または PNG より 30% 小さい Web タイプの画像を使用してください。
＃＃＃４。グループ CSS ファイルとセレクター＃＃＃５。キャッシュ＃＃＃
キャッシュは、データのサブセットを保存するためのテクノロジーです。これは、ユーザーが要求したデータのコピーを保存し、将来再度ユーザーが要求したときに、元のファイルを検索して返すのではなく、キャッシュされたコピーを返すため、データ アクセスを増やすために使用されます。
メモリ キャッシュ
- これらのタイプのキャッシュでは、キャッシュされたデータが RAM に保存されるため、アプリケーション内のデータ転送プロセスの速度が向上します。Web キャッシュ
- このキャッシュ テクノロジには 2 つの用語があります。Web サーバー キャッシュ - このメカニズムでは、リソースをクライアント マシンではなくサーバーに保存することが目標です。このメカニズムは、Web サイト上でデータを動的に生成し、しばらくしてからそれを読み込むのに役立ちます。この方法は静的コンテンツの場合には役に立ちません。このようなキャッシュはサーバーの過負荷を軽減するのに役立ちます。
CDN キャッシュ- CDN はコンテンツ配信ネットワークの略です。このキャッシュには、Web ページ、スクリプト、メディア ファイル、スタイル シートなどのリソースがプロキシ サーバーに保存されます。ユーザーがリソースを要求すると、プロキシ サーバーはリソースのコピーが利用可能かどうかを確認します。レプリカが使用可能な場合は、要求元のユーザーにリソースが配信されます。それ以外の場合、要求は関連するサーバーに転送されます。これにより、要求元のユーザーが最も近い利用可能なサーバーにルーティングされる場合、ネットワーク遅延が短縮されます。
ディスク キャッシュ
- メモリ キャッシュと同様のメカニズムです。ディスク キャッシュはデータを保存し、アプリケーション内でより高速にアクセスできるようにします。したがって、これらのテクノロジーにより、Web サイトは可視性とパフォーマンスの点で非常に最適化されます。
以上がJavaScript を使用して Web サイトを視覚的に改善しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
