Kuasai pengoptimuman prestasi dan pemampatan kod dalam JavaScript

Menguasai pengoptimuman prestasi dan pemampatan kod dalam JavaScript memerlukan contoh kod khusus

Memandangkan aplikasi web terus meningkat dalam kerumitan, kod JavaScript pengoptimuman semakin menjadi semakin penting untuk meningkatkan prestasi. Pada masa yang sama, pemampatan kod boleh mengurangkan saiz fail dan mempercepatkan pemuatan. Artikel ini akan memperkenalkan beberapa teknik pengoptimuman prestasi biasa dan kaedah pemampatan kod, dan memberikan contoh kod khusus.

1. Petua pengoptimuman prestasi

1. Kurangkan permintaan HTTP
   permintaan HTTP merupakan halangan utama dalam kelajuan memuatkan aplikasi web. Dengan menggabungkan dan memampatkan fail, bilangan permintaan HTTP boleh dikurangkan. Contohnya, apabila terdapat berbilang fail JavaScript, anda boleh menggunakan alatan untuk menggabungkannya menjadi satu fail untuk mengurangkan bilangan permintaan HTTP untuk halaman tersebut.

   //将多个文件合并为一个文件
   //<script src="file1.js"></script>
   //<script src="file2.js"></script>
   //<script src="file3.js"></script>
   
   //合并后
   //<script src="combined.js"></script>

   Salin selepas log masuk

2. Penggunaan cache yang munasabah
   Cache ialah cara penting untuk meningkatkan prestasi aplikasi web. Penggunaan cache yang munasabah boleh mengelakkan permintaan berulang dan mengurangkan masa penghantaran rangkaian. Dalam JavaScript, fail yang tidak kerap berubah boleh ditetapkan untuk dicache secara kekal, seperti imej, CSS dan perpustakaan 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

   Salin selepas log masuk

3. Menggunakan perwakilan acara
   Dalam JavaScript, perwakilan acara ialah teknik biasa untuk mengoptimumkan prestasi. Dengan mengikat acara kepada elemen kontena dan bukannya setiap elemen kanak-kanak, anda boleh mengurangkan bilangan fungsi pengendalian acara dan meningkatkan prestasi.

   //原始代码
   //<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);
   //   }
   // });

   Salin selepas log masuk

4. Elakkan menggunakan pembolehubah global
   Pembolehubah global lebih perlahan untuk diakses dalam JavaScript. Apabila pembolehubah ditakrifkan dalam skop tempatan, pergantungan pada pembolehubah global boleh dikurangkan dan kecekapan pelaksanaan kod boleh dipertingkatkan.

   //全局变量
   var x = 5;
   function foo() {
     console.log(x);
   }
   
   //局部变量
   function bar() {
     var x = 5;
     console.log(x);
   }

   Salin selepas log masuk

2. Pemampatan kod

Mampatan kod ialah kaedah biasa untuk mengurangkan saiz fail JavaScript. Kod mampat bukan sahaja mempercepatkan pemuatan, tetapi juga mengurangkan masa pemindahan rangkaian. Berikut ialah beberapa kaedah pemampatan kod yang biasa digunakan:

1. Alih keluar ruang dan baris baharu
   Ruang dan baris baharu tidak menjejaskan pelaksanaan kod dalam JavaScript dan boleh dialih keluar melalui alatan , mengurangkan saiz fail.
2. Padam komen
   Semasa proses pemampatan, komen yang tidak berguna boleh dipadamkan untuk mengurangkan saiz fail.
3. Mampatkan nama pembolehubah dan fungsi
   Apabila nama pembolehubah dan fungsi dilaksanakan dalam JavaScript, tidak perlu mengekalkan nama asal Anda boleh mengurangkan saiz fail dengan memampatkannya ke dalam rentetan pendek.

Di atas ialah beberapa teknik pengoptimuman prestasi yang biasa digunakan dan kaedah pemampatan kod saya harap ia akan membantu anda. Dengan menggunakan teknologi ini secara rasional, anda boleh meningkatkan kecekapan pelaksanaan kod JavaScript, mengurangkan saiz fail dan mempercepatkan pemuatan halaman.

Atas ialah kandungan terperinci Kuasai pengoptimuman prestasi dan pemampatan kod dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!