Petua JAVASCRIPT_javascript berprestasi tinggi yang anda tidak tahu

Artikel ini akan berkongsi beberapa amalan terbaik untuk JavaScript yang cekap untuk meningkatkan pemahaman semua orang tentang prinsip asas dan pelaksanaan JS.

Storan Data

Masalah klasik dalam sains komputer adalah untuk mendapatkan prestasi baca dan tulis yang terbaik dengan menukar lokasi storan data Dalam JavaScript, lokasi storan data akan memberi kesan yang ketara pada prestasi kod. – Jika anda boleh menggunakan {} untuk mencipta objek, jangan gunakan Objek baharu Jika anda boleh menggunakan [] untuk mencipta tatasusunan, jangan gunakan Tatasusunan baharu. Kelajuan akses literal dalam JS lebih tinggi daripada kelajuan objek. – Semakin dalam pembolehubah berada dalam rantaian skop, semakin lama masa yang diperlukan untuk mengaksesnya. Untuk pembolehubah jenis ini, anda boleh menyimpannya menggunakan pembolehubah tempatan melalui caching untuk mengurangkan bilangan akses kepada rantai skop - tidak banyak perbezaan antara menggunakan notasi titik (object.name) dan operator (object[name]), sahaja Safari akan Terdapat perbezaan, klik sentiasa lebih cepat

Gelung

Gelung biasa dalam JS termasuk jenis berikut:

for(var i = 0; i < 10; i++) { // do something} 
for(var prop in object) { // for loop object}  
[1,2].forEach(function(value, index, array) { // 基于函数的循环})

Tidak dinafikan bahawa kaedah pertama adalah asli, mempunyai penggunaan prestasi terendah dan terpantas. Kaedah kedua untuk masuk akan menghasilkan lebih banyak overhed (pembolehubah tempatan) untuk setiap lelaran, dan kelajuannya hanya 1/7 daripada kaedah pertama Kaedah ketiga jelas menyediakan kaedah gelung yang lebih mudah, tetapi kelajuannya Hanya 1/8 daripada kitaran biasa. Oleh itu, anda boleh memilih kaedah kitar semula yang sesuai mengikut situasi projek anda.

Perwakilan Acara

Bayangkan menambahkan acara pada setiap teg A pada halaman Adakah kami akan menambah onClick pada setiap teg? Apabila terdapat sejumlah besar elemen dalam halaman yang perlu diikat pada pengendali acara yang sama, keadaan ini mungkin menjejaskan prestasi. Setiap peristiwa terikat meningkatkan beban pada halaman atau semasa masa jalan. Untuk aplikasi bahagian hadapan yang kaya, terlalu banyak ikatan akan menduduki terlalu banyak memori pada halaman dengan interaksi yang berat. Cara yang mudah dan elegan ialah delegasi acara. Ia ialah aliran kerja berasaskan peristiwa: tangkap lapisan demi lapisan, capai sasaran dan gelembung lapisan demi lapisan. Memandangkan terdapat mekanisme menggelegak untuk acara, kami boleh mengendalikan acara daripada semua elemen kanak-kanak dengan mengikat acara ke lapisan luar.

document.getElementById('content').onclick = function(e) { 
  e = e || window.event;  
  var target = e.target || e.srcElement;  //如果不是 A标签，我就退出  
  if(target.nodeNmae !=== 'A') { return }  //打印A的链接地址  
  console.log(target.href) }

Lukis semula dan susun semula

Selepas penyemak imbas memuat turun HTMl, CSS dan JS, ia akan menjana dua pepohon: pepohon DOM dan pepohon pemaparan. Apabila sifat geometri Dom berubah, seperti lebar, tinggi, warna dan kedudukan Dom, penyemak imbas perlu mengira semula sifat geometri elemen dan membina semula pepohon pemaparan Proses ini dipanggil lukisan semula dan penyusunan semula.

bodystyle = document.body.style; 
bodystyle.color = red; 
bodystyle.height = 1000px; 
bodystyke.width = 100%;

Mengubah suai tiga atribut dalam kaedah di atas akan menyebabkan penyemak imbas mengalir semula dan melukis semula tiga kali Dalam sesetengah kes, mengurangkan aliran semula ini boleh meningkatkan prestasi pemaparan penyemak imbas. Kaedah yang disyorkan adalah seperti berikut, hanya lakukan satu operasi dan selesaikan tiga langkah:

bodystyle = document.body.style; 
bodystyle.cssText 'color:red;height:1000px;width:100%';

Pemuatan JavaScript

IE8, Firefox3.5 dan Chrome2 semuanya membenarkan fail JavaScript dimuat turun. Jadi tidak akan menyekat teg lain daripada memuat turun. Malangnya, proses muat turun JS masih akan menyekat muat turun sumber lain, seperti gambar. Walaupun penyemak imbas terkini telah meningkatkan prestasi dengan membenarkan muat turun selari, penyekatan skrip tetap menjadi masalah. Oleh itu, adalah disyorkan untuk meletakkan semua teg di bahagian bawah teg untuk meminimumkan kesan pada pemaparan keseluruhan halaman dan mengelakkan pengguna daripada melihat kosong

Pengaturan prestasi tinggi fail JS

Sekarang semua orang tahu bahawa berbilang teg akan mempengaruhi kelajuan pemaparan halaman, tidaklah sukar untuk memahami bahawa "mengurangkan HTTP yang diperlukan untuk pemaparan halaman" ialah peraturan klasik untuk mempercepatkan tapak web. Oleh itu, menggabungkan semua fail JS dalam persekitaran pengeluaran akan mengurangkan bilangan permintaan dan dengan itu mempercepatkan pemaparan halaman. Selain menggabungkan fail JS, kami juga boleh memampatkan fail JS. Mampatan merujuk kepada menanggalkan bahagian fail yang tidak berkaitan dengan menjalankan fail. Kandungan yang dilucutkan termasuk aksara ruang putih dan ulasan. Proses pengubahsuaian biasanya boleh mengurangkan saiz fail sebanyak separuh. Terdapat juga beberapa alat pemampatan yang akan mengurangkan panjang pembolehubah setempat, seperti:

var myName = "foo" + "bar"; 
//压缩后变成 
var a = "foobar";

Cache fail JS

Caching komponen HTTP boleh meningkatkan pengalaman pengguna untuk lawatan balik ke tapak web. Pelayan web menggunakan "Pengepala respons HTTP Tamat tempoh" untuk memberitahu pelanggan berapa lama sumber harus dicache. Sudah tentu, caching mempunyai kelemahannya sendiri: apabila aplikasi anda dinaik taraf, anda perlu memastikan pengguna memuat turun kandungan statik terkini. Masalah ini boleh diselesaikan dengan menukar nama fail sumber statik. Anda mungkin melihat penyemak imbas merujuk jsapplication-20151123201212.js dalam persekitaran pengeluaran Ini menyimpan fail JS baharu sebagai cap waktu untuk menyelesaikan masalah cache tidak dikemas kini.

Ringkasan

Sudah tentu, JS yang cekap bukan sahaja mempunyai bidang ini yang boleh dipertingkatkan Jika kita boleh mengurangkan beberapa kehilangan prestasi, kita boleh menggunakan JavaScript untuk membangunkan dengan lebih cekap.

Semua yang anda tidak tahu tentang JAVASCRIPT berprestasi tinggi, kini anda tahu!