Teknik Pengoptimuman Prestasi JavaScript yang Terbukti untuk Apl Web Lebih Pantas

Pengoptimuman prestasi JavaScript adalah penting untuk mencipta aplikasi web yang pantas dan responsif. Sebagai pembangun, saya mendapati bahawa melaksanakan strategi ini boleh meningkatkan kelajuan dan kecekapan kod JavaScript dengan ketara.

Meminimumkan manipulasi DOM ialah faktor utama dalam mengoptimumkan prestasi JavaScript. Model Objek Dokumen (DOM) ialah perwakilan struktur HTML halaman web, dan memanipulasinya boleh menjadi mahal dari segi pengiraan. Untuk mengurangkan kesan operasi DOM, saya sentiasa cuba untuk mengemas kini kelompok dan menggunakan serpihan dokumen.

Berikut ialah contoh cara menggunakan serpihan dokumen untuk meminimumkan manipulasi DOM:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('div');
    element.textContent = `Item ${i}`;
    fragment.appendChild(element);
}
document.body.appendChild(fragment);

Dengan menggunakan serpihan dokumen, kami boleh melaksanakan semua operasi DOM dalam ingatan dan kemudian menambahkan serpihan itu pada DOM dalam satu operasi, mengurangkan bilangan aliran semula dan mengecat semula.

Melaksanakan pemuatan malas ialah satu lagi strategi berkesan untuk meningkatkan prestasi JavaScript. Teknik ini melibatkan memuatkan sumber dan melaksanakan skrip hanya apabila ia diperlukan, dan bukannya memuatkan segala-galanya terlebih dahulu. Pendekatan ini boleh meningkatkan masa pemuatan awal dengan ketara, terutamanya untuk aplikasi besar.

Berikut ialah contoh mudah malas memuatkan imej:

function lazyLoadImage(img) {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    observer.observe(img);
}

document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);

Kod ini menggunakan Intersection Observer API untuk memuatkan imej hanya apabila ia kelihatan, mengurangkan masa pemuatan halaman awal.

Menggunakan Pekerja Web ialah strategi yang berkuasa untuk meningkatkan prestasi JavaScript, terutamanya untuk tugasan intensif pengiraan. Pekerja Web membenarkan kami menjalankan skrip dalam urutan latar belakang, memastikan urutan utama responsif dan menghalang UI membeku.

Berikut ialah contoh menggunakan Pekerja Web untuk melakukan pengiraan berat:

// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
    console.log('Result:', event.data);
};
worker.postMessage({ number: 1000000 });

// worker.js
self.onmessage = function(event) {
    const result = fibonacci(event.data.number);
    self.postMessage(result);
};

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

Dalam contoh ini, kami memuatkan pengiraan nombor Fibonacci yang besar kepada Pekerja Web, menghalangnya daripada menyekat urutan utama.

Mengoptimumkan gelung dan lelaran adalah penting untuk meningkatkan kelajuan pelaksanaan JavaScript. Menggunakan kaedah tatasusunan yang sesuai dan mengelakkan lelaran yang tidak perlu boleh membuat perbezaan yang ketara dalam prestasi.

Pertimbangkan contoh mengoptimumkan gelung ini:

// Unoptimized
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

// Optimized
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

Versi yang dioptimumkan menggunakan kaedah pengurangan, yang biasanya lebih cepat dan lebih ringkas daripada gelung tradisional.

Melaksanakan mekanisme caching ialah satu lagi strategi berkesan untuk meningkatkan prestasi JavaScript. Dengan menyimpan data yang kerap diakses dalam memori atau storan setempat, kami boleh mengurangkan bilangan permintaan pelayan dan mempercepatkan aplikasi kami.

Berikut ialah contoh mekanisme caching mudah:

const cache = new Map();

async function fetchData(url) {
    if (cache.has(url)) {
        return cache.get(url);
    }
    const response = await fetch(url);
    const data = await response.json();
    cache.set(url, data);
    return data;
}

Fungsi ini menyemak sama ada data yang diminta berada dalam cache sebelum membuat permintaan rangkaian, yang berpotensi menjimatkan masa dan sumber.

Memanfaatkan alatan pembangun penyemak imbas adalah penting untuk mengenal pasti dan menyelesaikan isu prestasi dalam aplikasi JavaScript. Alat ini memberikan cerapan yang tidak ternilai tentang masa pelaksanaan, penggunaan memori dan potensi kesesakan.

Sebagai contoh, menggunakan tab Chrome DevTools Performance, kami boleh merekodkan profil prestasi dan menganalisis tempat kod kami menghabiskan paling banyak masa:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('div');
    element.textContent = `Item ${i}`;
    fragment.appendChild(element);
}
document.body.appendChild(fragment);

Dengan membungkus fungsi kami dengan console.time dan console.timeEnd, kami boleh mengukur masa pelaksanaannya dalam konsol penyemak imbas.

Menggunakan pemisahan kod ialah teknik yang berkuasa untuk mengoptimumkan prestasi JavaScript, terutamanya dalam aplikasi besar. Dengan memecahkan berkas JavaScript kami kepada bahagian yang lebih kecil dan hanya memuatkan kod yang diperlukan untuk setiap laluan atau ciri, kami boleh mengurangkan masa pemuatan awal dengan ketara.

Berikut ialah contoh cara kami boleh melaksanakan pemisahan kod dalam aplikasi React menggunakan import dinamik:

function lazyLoadImage(img) {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    observer.observe(img);
}

document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);

Dalam contoh ini, LazyComponent hanya dimuatkan apabila MyComponent dipaparkan, mengurangkan saiz berkas awal.

Strategi ini membentuk asas yang kukuh untuk mengoptimumkan prestasi JavaScript, tetapi penting untuk diingat bahawa pengoptimuman prestasi ialah proses yang berterusan. Apabila aplikasi kami berkembang dan berkembang, kami perlu sentiasa memantau dan memperhalusi kod kami untuk memastikan prestasi optimum.

Satu strategi yang saya dapati amat berkesan ialah penggunaan hafalan untuk pengiraan yang mahal. Memoisasi melibatkan caching hasil panggilan fungsi dan mengembalikan hasil cache apabila input yang sama berlaku lagi. Ini boleh mempercepatkan fungsi yang kerap dipanggil dengan hujah yang sama dengan ketara.

Berikut ialah contoh fungsi yang dihafal:

// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
    console.log('Result:', event.data);
};
worker.postMessage({ number: 1000000 });

// worker.js
self.onmessage = function(event) {
    const result = fibonacci(event.data.number);
    self.postMessage(result);
};

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

Satu lagi aspek penting pengoptimuman prestasi JavaScript ialah pengurusan memori yang cekap. JavaScript menggunakan pengumpulan sampah automatik, tetapi kita masih boleh menghadapi kebocoran memori jika kita tidak berhati-hati. Satu punca biasa kebocoran ingatan ialah pendengar acara yang dilupakan.

Untuk mengelakkan perkara ini, kami hendaklah sentiasa mengalih keluar pendengar acara apabila mereka tidak diperlukan lagi:

// Unoptimized
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

// Optimized
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

Fungsi ini menambah pendengar acara yang mengalih keluar dirinya secara automatik selepas dicetuskan sekali, menghalangnya daripada kekal dalam ingatan.

Apabila bekerja dengan set data yang besar, menggunakan struktur data yang sesuai boleh meningkatkan prestasi dengan ketara. Contohnya, menggunakan Set dan bukannya Array untuk menyemak keahlian boleh menjadi lebih pantas untuk koleksi besar:

const cache = new Map();

async function fetchData(url) {
    if (cache.has(url)) {
        return cache.get(url);
    }
    const response = await fetch(url);
    const data = await response.json();
    cache.set(url, data);
    return data;
}

Operasi Set biasanya lebih pantas, terutamanya untuk set data yang besar.

Teknik lain yang saya rasa berguna ialah nyahlantun atau pendikitkan panggilan fungsi, terutamanya untuk pengendali acara yang mungkin dicetuskan dengan kerap (seperti tatal atau ubah saiz acara). Nyahlantun memastikan bahawa fungsi hanya dipanggil selepas tempoh masa tertentu telah berlalu sejak ia digunakan kali terakhir, manakala pendikit mengehadkan kekerapan fungsi boleh dipanggil.

Berikut ialah contoh fungsi nyahlantun:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('div');
    element.textContent = `Item ${i}`;
    fragment.appendChild(element);
}
document.body.appendChild(fragment);

Fungsi nyahlantun ini hanya akan log 'Saiz semula!' selepas tetingkap berhenti mengubah saiz selama 250 milisaat.

Apabila bekerja dengan operasi tak segerak, menggunakan Janji atau async/menunggu boleh membawa kepada kod yang lebih mudah dibaca dan diselenggara berbanding dengan pendekatan berasaskan panggil balik. Walau bagaimanapun, adalah penting untuk mengendalikan ralat dengan betul untuk mengelakkan penolakan janji yang tidak dikendalikan, yang boleh menyebabkan isu prestasi:

function lazyLoadImage(img) {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    observer.observe(img);
}

document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);

Fungsi ini dengan betul mengendalikan kemungkinan ralat dalam operasi pengambilan, menghalangnya daripada menyebabkan masalah di tempat lain dalam aplikasi.

Apabila berurusan dengan senarai atau jadual yang besar, melaksanakan penatalan maya boleh meningkatkan prestasi dengan ketara. Penatalan maya hanya melibatkan pemaparan item yang pada masa ini boleh dilihat dalam port pandangan, yang boleh mengurangkan bilangan elemen DOM dengan banyak dan meningkatkan prestasi penatalan:

Senarai Maya kelas {
    pembina(bekas, itemHeight, renderItem) {
        ini.bekas = bekas;
        this.itemHeight = itemHeight;
        this.renderItem = renderItem;
        this.item = [];
        this.scrollTop = 0;
        this.visibleItems = [];

        this.container.addEventListener('scroll', this.onScroll.bind(this));
    }

    setItems(item) {
        this.item = item;
        this.container.style.height = `${item.length * this.itemHeight}px`;
        this.render();
    }

    onScroll() {
        this.scrollTop = this.container.scrollTop;
        this.render();
    }

    render() {
        const startIndex = Math.floor(this.scrollTop / this.itemHeight);
        const endIndex = Math.min(this.items.length - 1, startIndex Math.ceil(this.container.clientHeight / this.itemHeight));

        this.visibleItems = [];
        untuk (biar i = startIndex; i <= endIndex; i ) {
            item const = this.item[i];
            const atas = i * this.itemHeight;
            this.visibleItems.push(this.renderItem(item, atas));
        }

        this.container.innerHTML = this.visibleItems.join('');
    }
}

const list = new VirtualList(document.getElementById('list'), 50, (item, atas) => 
    `<div>



<p>Pelaksanaan tatal maya ini boleh mengendalikan senarai dengan beribu-ribu item sambil mengekalkan prestasi tatal yang lancar.</p><p>Kesimpulannya, mengoptimumkan prestasi JavaScript ialah proses pelbagai rupa yang memerlukan perhatian kepada pelbagai aspek seni bina kod dan aplikasi kami. Dengan melaksanakan strategi ini dan memantau serta memperhalusi kod kami secara berterusan, kami boleh mencipta aplikasi JavaScript yang pantas, cekap dan responsif yang memberikan pengalaman pengguna yang sangat baik. Ingat, pengoptimuman prestasi ialah proses yang berterusan dan sentiasa dikemas kini dengan amalan dan alatan terbaik terkini adalah penting untuk mengekalkan aplikasi JavaScript berprestasi tinggi.</p>


<hr>

<h2>
  
  
  Ciptaan Kami
</h2>

<p>Pastikan anda melihat ciptaan kami:</p>

<p><strong>Pusat Pelabur</strong> | <strong>Hidup Pintar</strong> | <strong>Epos & Gema</strong> | <strong>Misteri Membingungkan</strong> | <strong>Hindutva</strong> | <strong>Pembangunan Elit</strong> | <strong>Sekolah JS</strong></p>


<hr>

<h3>
  
  
  Kami berada di Medium
</h3>

<p><strong>Tech Koala Insights</strong> | <strong>Dunia Epok & Gema</strong> | <strong>Medium Pusat Pelabur</strong> | <strong>Medium Misteri Membingungkan</strong> | <strong>Sains & Zaman Sederhana</strong> | <strong>Hindutva Moden</strong></p>


          

            
        

Atas ialah kandungan terperinci Teknik Pengoptimuman Prestasi JavaScript yang Terbukti untuk Apl Web Lebih Pantas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!