JavaScript でのパフォーマンスの最適化とコード圧縮をマスターする-jsチュートリアル-php.cn

JavaScript でのパフォーマンスの最適化とコード圧縮をマスターする

PHPz

リリース： 2023-11-04 16:19:00

オリジナル

1000 人が閲覧しました

JavaScript でのパフォーマンスの最適化とコード圧縮をマスターする

JavaScript でパフォーマンスの最適化とコード圧縮を習得するには、特定のコードサンプルが必要です

Web アプリケーションの複雑さが増すにつれ、パフォーマンスの変化を改善するために JavaScript コードを最適化することがますます重要になってきています。より重要。同時に、コード圧縮によりファイルサイズが削減され、読み込みが高速化されます。この記事では、いくつかの一般的なパフォーマンス最適化手法とコード圧縮方法を紹介し、具体的なコード例を示します。

1. パフォーマンス最適化のヒント

HTTP リクエストの削減
HTTP リクエストは、Web アプリケーションの読み込み速度における大きなボトルネックです。ファイルを結合して圧縮することで、HTTP リクエストの数を減らすことができます。たとえば、複数の JavaScript ファイルがある場合、ツールを使用してそれらを 1 つのファイルにマージし、ページに対する HTTP リクエストの数を減らすことができます。
```
//将多个文件合并为一个文件
//<script src="file1.js"></script>
//<script src="file2.js"></script>
//<script src="file3.js"></script>

//合并后
//<script src="combined.js"></script>
```
ログイン後にコピー
キャッシュの合理的な使用
キャッシュは、Web アプリケーションのパフォーマンスを向上させる重要な手段です。キャッシュを適切に使用すると、リクエストの繰り返しを回避し、ネットワーク送信時間を短縮できます。 JavaScript では、画像、CSS、JavaScript ライブラリなど、頻繁に変更されないファイルを永続的にキャッシュするように設定できます。
```
//设置缓存过期时间为1年
//<link rel="stylesheet" href="style.css" type="text/css" media="all" />
//Expires: Thu, 31 Dec 2022 23:59:59 GMT

//对于经常变化的文件，可以设置较短的缓存时间
//<script src="main.js" type="text/javascript"></script>
//Cache-Control: max-age=3600
```
ログイン後にコピー

イベント委任の使用
JavaScript では、イベント委任はパフォーマンスを最適化するための一般的な手法です。各子要素ではなくコンテナ要素にイベントをバインドすることで、イベント処理関数の数を減らし、パフォーマンスを向上させることができます。

//原始代码
//<ul id="list">
//  <li>Item1</li>
//  <li>Item2</li>
//  <li>Item3</li>
//</ul>

// for (var i = 0; i < listItems.length; i++) {
//   listItems[i].addEventListener('click', function() {
//     console.log('Clicked item ' + i);
//   });
// }

//优化后的代码
//<ul id="list">
//  <li>Item1</li>
//  <li>Item2</li>
//  <li>Item3</li>
//</ul>

// list.addEventListener('click', function(event) {
//   if (event.target.tagName === 'LI') {
//     console.log('Clicked item ' + event.target.textContent);
//   }
// });

ログイン後にコピー

グローバル変数の使用を避ける
グローバル変数は、JavaScript でのアクセスに時間がかかります。変数をローカルスコープで定義すると、グローバル変数への依存が軽減され、コードの実行効率が向上します。
```
//全局变量
var x = 5;
function foo() {
  console.log(x);
}

//局部变量
function bar() {
  var x = 5;
  console.log(x);
}
```
ログイン後にコピー

2. コード圧縮

コード圧縮は、JavaScript ファイルのサイズを削減する一般的な方法です。コードを圧縮すると、読み込みが高速化されるだけでなく、ネットワーク転送時間も短縮されます。一般的に使用されるコード圧縮方法は次のとおりです:

スペースと改行を削除する
スペースと改行は JavaScript でのコードの実行には影響しません。サイズを削減するツールを使用して削除できます。ファイルのサイズ。
コメントの削除
圧縮プロセス中に、ファイルサイズを減らすために不要なコメントを削除できます。
変数名や関数名を圧縮する
JavaScript で変数名や関数名を実行する場合、元の名前を保持する必要はなく、短い文字列に圧縮することでファイルサイズを小さくできます。

上記は、一般的に使用されるパフォーマンス最適化手法とコード圧縮方法の一部です。これらのテクノロジを合理的に使用すると、JavaScript コードの実行効率が向上し、ファイルサイズが削減され、ページの読み込みが高速化されます。

以上がJavaScript でのパフォーマンスの最適化とコード圧縮をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。