12 tips untuk meningkatkan kinerja aplikasi JavaScript

Kinerja adalah salah satu masalah paling penting yang dihadapi pengembang web atau aplikasi web. Tidak seorang pun akan senang dengan aplikasi, atau halaman yang telah memuat selama berabad-abad, yang macet karena beban yang berlebihan. Pengguna situs web tidak siap untuk menunggu terlalu lama untuk unduhan mereka atau membawa halaman mereka ke dalam kondisi kerja. Menurut Kissmetrics , 47% pengunjung mengharapkan situs web dimuat dalam waktu kurang dari 2 detik. 40% pengunjung akan meninggalkan situs jika butuh lebih dari 3 detik untuk memuatnya.



Penulis materi, terjemahan yang kami terbitkan hari ini, mengatakan bahwa, dengan memperhitungkan angka-angka di atas, menjadi jelas bahwa kinerja adalah sesuatu yang harus selalu diingat oleh pengembang web. Berikut adalah 12 tips untuk meningkatkan kinerja proyek JS.

1. Gunakan mekanisme caching browser

Ada dua cara utama untuk melakukan cache data menggunakan browser. Yang pertama adalah penggunaan API JavaScript JavaScript Cache, yang ditangani oleh pekerja layanan. Yang kedua adalah cache HTTP biasa.

Script sering digunakan untuk mengatur akses ke objek tertentu. Jika Anda menyimpan referensi ke objek yang sering perlu Anda akses dalam variabel, dan juga jika Anda menggunakan variabel ini dalam operasi berulang yang memerlukan akses ke objek, Anda dapat meningkatkan kinerja kode.

2. Optimalkan kode untuk lingkungan yang menjalankannya

Untuk menilai secara memadai perbaikan yang dilakukan pada program, disarankan untuk membentuk satu set lingkungan tempat pengukuran dapat dilakukan.

Dalam praktiknya, Anda tidak akan dapat melakukan studi kinerja kode, misalnya, di semua versi mesin JS yang ada, serta mengoptimalkan kode untuk semua lingkungan di mana ia dapat berjalan. Tetapi harus dicatat bahwa kode pengujian di lingkungan mana pun juga bukan praktik terbaik. Pendekatan semacam itu dapat memberikan hasil yang menyimpang. Oleh karena itu, penting untuk membuat satu set lingkungan di mana kode kemungkinan besar akan berjalan, dan menguji proyek di lingkungan ini.

3. Singkirkan kode JS yang tidak digunakan

Menghapus kode yang tidak digunakan dari proyek akan meningkatkan tidak hanya waktu pemuatan peramban untuk skrip, tetapi juga waktu yang diperlukan peramban untuk menganalisis dan menyusun kode. Untuk menghilangkan kode yang tidak digunakan, Anda harus memperhatikan fitur-fitur proyek. Jadi, jika Anda menemukan beberapa fungsi yang pengguna tidak gunakan, pertimbangkan untuk menghapusnya dari proyek, dan pada saat yang sama pertimbangkan kode JS yang terkait dengannya. Akibatnya, situs akan memuat lebih cepat, itu akan lebih cepat untuk mempersiapkan pekerjaan di browser. Ini akan memiliki efek menguntungkan pada tayangan yang akan dialami pengguna dengan situs. Ketika menganalisis suatu proyek, perlu diingat bahwa, misalnya, perpustakaan tertentu yang termasuk dalam komposisinya mungkin dimasukkan di dalamnya secara tidak sengaja. Sangat mungkin tidak digunakan di dalamnya. Layak untuk dihilangkan. Hal yang sama berlaku untuk penggunaan dependensi tertentu yang mengimplementasikan apa yang sudah diterapkan di browser modern. Akibatnya, beralih ke fitur peramban standar yang digandakan oleh ketergantungan ini akan membantu menyingkirkan kode yang tidak perlu.

4. Hemat memori

Perlu berusaha untuk memastikan bahwa proyek web hanya menggunakan memori itu, yang tanpanya mereka benar-benar tidak dapat melakukannya. Faktanya adalah bahwa pengembang tidak dapat mengetahui sebelumnya berapa banyak memori yang dapat diakses oleh aplikasinya pada perangkat tertentu. Jika aplikasi secara tidak adil menggunakan sejumlah besar memori, ini menciptakan peningkatan beban pada mekanisme manajemen memori mesin JS browser. Secara khusus, ini berlaku untuk pemulung. Panggilan pengumpulan sampah sering memperlambat program. Ini secara negatif mempengaruhi kegunaan proyek.

5. Gunakan mekanisme pemuatan yang ditangguhkan untuk skrip kecil

Pengguna ingin laman web dimuat secepat mungkin. Tetapi tidak mungkin bahwa seluruh kode JS proyek diperlukan untuk tampilan awal halaman. Jika pengguna perlu melakukan beberapa tindakan (misalnya, klik pada elemen atau buka beberapa tab dalam aplikasi) untuk mengaktifkan kode tertentu, maka pemuatan kode ini dapat ditunda setelah menyelesaikannya setelah pemuatan awal halaman dan sumber daya yang paling penting.

Dengan pendekatan ini, Anda dapat menghindari browser memuat dan mengkompilasi sejumlah besar kode-JS di awal, yaitu, menghindari memperlambat output halaman yang disebabkan oleh kebutuhan untuk melakukan operasi ini. Setelah pengunduhan semua yang paling penting selesai, Anda dapat mulai mengunduh kode tambahan. Akibatnya, ketika pengguna membutuhkan kode ini, itu sudah akan tersedia baginya. Menurut model RAIL , Google merekomendasikan untuk menjalankan sesi pemuatan naskah yang malas dengan durasi sekitar 50 ms. Dengan pendekatan ini, operasi pemuatan kode tidak akan memengaruhi interaksi pengguna dengan halaman.

6. Hindari kebocoran memori

Jika kebocoran memori terjadi di aplikasi Anda, ini akan mengakibatkan halaman yang dimuat meminta lebih banyak memori dari browser. Akibatnya, konsumsi memori halaman ini dapat mencapai tingkat yang akan mempengaruhi kinerja seluruh sistem. Anda sendiri mungkin menghadapi masalah yang sama (dan Anda mungkin tidak menyukainya). Ada kemungkinan bahwa halaman di mana ada kebocoran memori berisi semacam penampil gambar - seperti slider atau "carousel".

Menggunakan Alat Pengembang Chrome, Anda dapat menganalisis situs Anda dari kebocoran memori. Ini dilakukan dengan memeriksa indikator menggunakan tab Performance. Biasanya, kebocoran memori berasal dari fragmen DOM yang dihapus dari halaman, tetapi terkait dengan beberapa variabel. Ini mencegah pengumpul sampah dari membersihkan memori yang ditempati oleh data dalam fragmen DOM yang tidak perlu.

7. Jika Anda perlu melakukan komputasi berat, gunakan pekerja web

Dari bahan-bahan sumber daya MDN, Anda dapat mengetahui bahwa pekerja web memungkinkan Anda untuk menjalankan kode di utas latar belakang yang terpisah dari utas utama aplikasi web. Keuntungan dari pendekatan ini adalah perhitungan yang berat dapat dilakukan dalam utas terpisah. Ini memungkinkan utas utama (biasanya bertanggung jawab untuk memelihara antarmuka pengguna) untuk mengeksekusi tanpa memblokir atau memperlambat.

Pekerja web memungkinkan Anda untuk melakukan perhitungan yang menggunakan prosesor secara intensif, sambil tidak menghalangi aliran antarmuka pengguna. Teknologi ini memungkinkan Anda untuk membuat utas baru dan memberi mereka tugas, yang memiliki efek menguntungkan pada kinerja aplikasi. Dengan pendekatan ini, tugas yang membutuhkan waktu lama untuk diselesaikan tidak menghalangi pelaksanaan tugas lain. Saat melakukan tugas serupa di utas utama, tugas lain diblokir.

8. Jika Anda mengakses elemen DOM beberapa kali, simpan tautan ke dalam variabel

Mendapatkan referensi ke elemen DOM adalah operasi yang lambat. Jika Anda akan mengakses elemen beberapa kali, yang terbaik adalah menyimpan tautan ke dalam variabel lokal. Tetapi di sini penting untuk diingat bahwa jika elemen, tautan yang disimpan dalam variabel, kemudian dihapus dari DOM, Anda perlu menghapus tautan itu dari variabel. Misalnya, Anda bisa melakukan ini dengan menulis null ke variabel. Ini akan menghindari kebocoran memori.

9. Berusaha keras untuk mendeklarasikan variabel dalam lingkup yang sama di mana mereka akan digunakan.

JavaScript, ketika mencoba mengakses suatu variabel, pertama-tama mencari variabel itu di lingkup lokal. Jika tidak muncul di sana, pencarian akan dilanjutkan dalam cakupan, di mana cakupan lokal tertanam. Ini terjadi sampai variabel global diperiksa. Menyimpan variabel dalam cakupan lokal mempercepat akses ke sana.

Coba, tanpa kebutuhan khusus, untuk tidak menggunakan kata kunci var ketika mendeklarasikan variabel. Sebagai gantinya, gunakan kata kunci let dan const masing-masing untuk mendeklarasikan variabel dan konstanta. Mereka berbeda dalam ruang lingkup blok dan beberapa fitur berguna lainnya. Perhatikan penggunaan variabel dalam fungsi, cobalah untuk memastikan bahwa variabel yang Anda akses di dalam fungsi adalah lokal untuk itu. Waspadai masalah yang dapat menyebabkan deklarasi variabel global.

10. Cobalah untuk tidak menggunakan variabel global

Variabel global ada selama skrip dijalankan. Variabel lokal hancur ketika ruang lingkup lokal hancur. Oleh karena itu, variabel global harus digunakan hanya ketika itu benar-benar diperlukan.

11. Terapkan dalam optimasi kode JavaScript yang akan Anda terapkan pada program yang ditulis dalam bahasa lain

• Selalu gunakan algoritma dengan kompleksitas komputasi sekecil mungkin, pecahkan masalah menggunakan struktur data yang optimal.
• Optimalkan algoritma yang digunakan untuk mendapatkan hasil yang sama dengan perhitungan lebih sedikit.
• Hindari panggilan rekursif.
• Desain potongan komputasi berulang sebagai fungsi.
• Sederhanakan perhitungan matematika.
• Gunakan array pencarian alih-alih beralih / konstruksi kasus.
• Berusaha keras untuk memastikan bahwa kondisi yang diperiksa dalam konstruksi bersyarat lebih sering mengambil nilai sebenarnya. Ini berkontribusi pada penggunaan kemampuan prosesor yang lebih efisien untuk pelaksanaan instruksi secara proaktif.
• Jika Anda memiliki kesempatan untuk menggunakan operator bitwise untuk melakukan tindakan tertentu, lakukan ini. Melakukan perhitungan seperti itu membutuhkan lebih sedikit sumber daya prosesor.

12. Gunakan alat penelitian kinerja aplikasi

Untuk menjelajahi berbagai aspek proyek web, alat Mercusuar dapat direkomendasikan. Dia menilai aplikasi berdasarkan indikator berikut: Kinerja, Aplikasi Web Progresif, Aksesibilitas, Praktik Terbaik, SEO. Mercusuar tidak hanya memberi tanda, tetapi juga memberikan rekomendasi untuk meningkatkan proyek. Alat analisis produktivitas lain, Google PageSpeed , dibuat untuk membantu pengembang menjelajahi situs mereka dan melihat bagaimana mereka dapat meningkatkan.

Baik Lighthouse dan PageSpeed ​​bukanlah alat yang sempurna, tetapi penggunaannya membantu untuk melihat masalah yang, pada pandangan pertama, bisa berubah menjadi tidak terlihat.

Di menu Chrome, Anda dapat menemukan perintah yang membuka pengelola tugas. Ini menampilkan informasi tentang sumber daya sistem yang digunakan oleh tab browser terbuka. Anda dapat memperoleh informasi lebih rinci tentang apa yang terjadi di laman dengan membuka tab Kinerja Alat Pengembang Chrome (peramban lain memiliki alat serupa). Tab ini memungkinkan Anda untuk menganalisis banyak indikator yang terkait dengan kinerja situs.


Tab Kinerja di Alat Pengembang Chrome

Selama pengumpulan informasi kinerja halaman menggunakan Chrome, Anda dapat mengonfigurasi prosesor dan sumber daya jaringan yang tersedia untuk halaman, yang memungkinkan Anda mengidentifikasi dan memperbaiki masalah.


Analisis kinerja halaman Chrome

Untuk menganalisis situs web lebih mendalam, Anda dapat menggunakan Waktu Navigasi API. Ini memungkinkan Anda untuk mengukur berbagai indikator secara langsung dalam kode aplikasi.

Jika Anda mengembangkan proyek sisi server menggunakan JavaScript menggunakan Node.js, maka Anda dapat menggunakan platform NodeSource untuk analisis mendalam aplikasi Anda. Pengukuran yang dilakukan oleh alat-alat platform ini berdampak kecil pada proyek. Di lingkungan Node.js, seperti di browser, banyak masalah dapat muncul - seperti kebocoran memori yang sama. Analisis proyek berdasarkan Node.js membantu mengidentifikasi dan memperbaiki masalah dengan kinerjanya.

Ringkasan

Penting untuk menjaga keseimbangan antara optimalisasi kode dan keterbacaan. Kode ditafsirkan oleh komputer, tetapi orang harus mendukungnya. Oleh karena itu, kode tersebut harus dapat dimengerti tidak hanya untuk komputer, tetapi juga untuk manusia.

Selain itu, penting untuk diingat bahwa kinerja harus selalu diperhitungkan, tetapi seharusnya tidak lebih penting daripada memastikan pengoperasian kode yang bebas dari kesalahan dan mengimplementasikan kapabilitas aplikasi yang dibutuhkan pengguna.

Pembaca yang budiman! Bagaimana Anda mengoptimalkan proyek JS Anda?