Bagaimana pula dengan javascript

Optimumkan kod untuk meningkatkan prestasi

JavaScript ialah bahasa skrip yang sangat popular yang boleh mencapai pelbagai interaktiviti dan kesan dinamik dalam halaman web. Memandangkan aplikasi web dan aplikasi mudah alih terus berkembang, kod JavaScript juga perlu dioptimumkan secara berterusan untuk meningkatkan prestasi. Artikel ini akan meneroka kaedah pengoptimuman kod JavaScript.

1. Kurangkan operasi DOM

DOM (Document Object Model) ialah salah satu API yang paling biasa digunakan dalam JavaScript, digunakan untuk mencari dan menukar elemen pada halaman web. Walau bagaimanapun, operasi DOM yang kerap boleh mengurangkan prestasi tapak web anda kerana ia adalah operasi yang memakan masa. Untuk mengurangkan operasi DOM, anda boleh menggunakan pembolehubah untuk menyimpan elemen DOM dan menggunakannya apabila diperlukan dan bukannya menggunakan fungsi seperti querySelector() atau getElementById().

Sebagai contoh, jika anda perlu menggunakan elemen yang sama di beberapa tempat, anda boleh menggunakan kod berikut:

const myElement = document.querySelector('.my-element');

Dengan cara ini, setiap kali anda perlu menggunakan elemen, anda hanya perlu untuk memanggil pembolehubah myElement tanpa perlu menanya semula DOM.

2 Elakkan pembolehubah global

Pembolehubah global ialah pembolehubah yang ditakrifkan dalam skop global dan boleh diakses dari mana-mana sahaja. Walau bagaimanapun, pembolehubah global boleh dengan mudah disalah gunakan atau ditindih secara tidak sengaja dalam JavaScript, mengakibatkan kod bersepah dan prestasi berkurangan. Untuk mengelakkan pembolehubah global, anda boleh merangkum kod anda menggunakan IIFE (ungkapan fungsi yang dilaksanakan serta-merta) atau alat modular seperti Webpack atau Rollup. Ini akan mengehadkan skop pembolehubah dan menghalangnya daripada diubah suai secara salah oleh kod lain.

3. Cache hasil pengiraan berulang

Sesetengah pengiraan dalam JavaScript mungkin perlu dilakukan di beberapa tempat. Ini akan menjadi sangat tidak cekap jika ia perlu dikira semula setiap kali pengiraan diperlukan. Caching hasil pengiraan berulang boleh meningkatkan prestasi kod JavaScript dengan ketara.

Sebagai contoh, jika anda mempunyai fungsi yang perlu melakukan pengiraan berulang, anda boleh menggunakan penutupan untuk cache keputusan:

function heavyCalculation() {
    let result;

    return function() {
        if (!result) {
            result = performHeavyCalculation();
        }

        return result;
    };
}

Dengan cara ini, fungsi hanya akan melakukan pengiraan pada panggilan pertama dan simpan hasilnya dalam pembolehubah. Setiap kali ia dipanggil, ia akan mengembalikan hasil cache dan bukannya mengira semula.

4. Gunakan teknologi pendikit dan anti goncang

Ia akan dicetuskan secara berterusan apabila pengguna melakukan sejumlah besar operasi pada halaman web, seperti menatal halaman, mengubah saiz tetingkap, atau memasukkan teks dalam kotak carian. Dalam kes ini, menggunakan teknik pendikit dan nyahlantun boleh membantu mengurangkan bilangan acara, dengan itu meningkatkan prestasi. Teknik ini juga boleh mengurangkan kegagapan dan kelipan pada halaman.

Pendikit bermaksud menggabungkan sejumlah besar acara ke dalam satu acara dalam selang masa yang tetap. Anti goncang bermaksud bahawa dalam tempoh masa tertentu, fungsi tindak balas acara hanya akan dilaksanakan apabila pengguna berhenti beroperasi. Pendikitan dan anti-goncang boleh dicapai menggunakan perpustakaan seperti Lodash.

5. Gunakan ciri baharu berdasarkan ES6

ES6 (ECMAScript 6) ialah versi terkini JavaScript, yang memperkenalkan banyak ciri baharu. Ciri ini boleh menjadikan kod lebih ringkas dan lebih elegan sambil meningkatkan prestasi kod JavaScript. Berikut ialah beberapa ciri baharu ES6:

Fungsi anak panah: Jadikan takrifan fungsi lebih ringkas tanpa membuat skop baharu.

const myFunction = (a, b) => a + b;

Templat literal: Gunakan tanda belakang untuk mencipta rentetan berbilang baris dan rentetan interpolasi.

const myString = `Hello, ${name}`;

Menyahstruktur: Menetapkan nilai tatasusunan atau objek kepada pembolehubah.

const [first, second] = myArray;

let dan const: pembolehubah yang digunakan untuk menentukan skop peringkat blok.

let myVariable = 0;
const myConstant = 'hello';

6. Gunakan Pekerja Web

JavaScript ialah bahasa satu utas, bermakna ia hanya boleh melakukan satu operasi pada satu masa. Apabila melakukan pengiraan berat atau memproses set data yang besar, ini boleh menyebabkan urutan UI disekat dan kelihatan seperti penyemak imbas telah ranap. Untuk menyelesaikan masalah ini, Pekerja Web boleh digunakan.

Pekerja Web ialah skrip JavaScript yang boleh dijalankan di latar belakang dan boleh membantu memisahkan pengiraan dan tugasan yang kompleks daripada urutan UI. Dengan cara ini, urutan UI tidak akan disekat dan prestasi aplikasi web akan dipertingkatkan.

Ringkasan

Pengoptimuman kod JavaScript ialah bahagian penting dalam pengoptimuman prestasi aplikasi web. Artikel ini memperkenalkan beberapa teknik pengoptimuman kod JavaScript biasa, termasuk mengurangkan operasi DOM, mengelakkan pembolehubah global, menyimpan cache hasil pengiraan berulang, menggunakan teknik pendikit dan anti goncang, menggunakan ciri baharu ES6 dan menggunakan Pekerja Web. Apabila kami menggunakan teknik ini untuk mengoptimumkan kod JavaScript, kami boleh menjadikan aplikasi kami lebih cekap sambil memberikan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Bagaimana pula dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!