Kinerja JavaScript
Cara mempercepat kode JavaScript Anda.
Kurangi Aktivitas di Loop
Loop sering digunakan dalam pemrograman.
Setiap pernyataan dalam sebuah loop, termasuk pernyataan for, dieksekusi untuk setiap iterasi dari loop tersebut.
Pernyataan atau tugas yang dapat ditempatkan di luar loop akan membuat loop berjalan lebih cepat.
Buruk:
for (let i = 0; i < arr.length; i++) {
Kode yang lebih baik:
let l = arr.length;
for (let i = 0; i < l; i++) {
Kode buruk mengakses properti panjang array setiap kali loop diulang.
Kode yang lebih baik mengakses properti length di luar loop dan membuat loop berjalan lebih cepat.
Kurangi Akses DOM
Mengakses DOM HTML sangat lambat, dibandingkan dengan pernyataan JavaScript lainnya.
Jika Anda berharap untuk mengakses elemen DOM beberapa kali, akses sekali, dan gunakan sebagai variabel lokal:
Contoh
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Kurangi Ukuran DOM
Jaga agar jumlah elemen dalam DOM HTML tetap kecil.
Ini akan selalu meningkatkan pemuatan halaman, dan mempercepat rendering (tampilan halaman), terutama pada perangkat yang lebih kecil.
Setiap upaya untuk mencari DOM (seperti getElementsByTagName) akan mendapat manfaat dari DOM yang lebih kecil.
Hindari Variabel yang Tidak Perlu
Jangan membuat variabel baru jika Anda tidak berencana untuk menyimpan nilai.
Seringkali Anda dapat mengganti kode seperti ini:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Dengan ini:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Tunda Pemuatan JavaScript
Menempatkan skrip Anda di bagian bawah badan halaman memungkinkan browser memuat halaman terlebih dahulu.
Saat skrip sedang diunduh, browser tidak akan memulai unduhan lainnya. Selain itu, semua aktivitas penguraian dan rendering mungkin diblokir.
Spesifikasi HTTP mendefinisikan bahwa browser tidak boleh mengunduh lebih dari dua komponen secara paralel.
Alternatifnya adalah menggunakan defer="true"tag skrip. Atribut defer menetapkan bahwa skrip harus dieksekusi setelah halaman selesai diurai, tetapi hanya berfungsi untuk skrip eksternal.
Jika memungkinkan, Anda dapat menambahkan skrip Anda ke halaman dengan kode, setelah halaman dimuat:
Contoh
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Hindari Menggunakan dengan
Hindari menggunakan withkata kunci. Ini memiliki efek negatif pada kecepatan. Itu juga mengacaukan cakupan JavaScript.
Kata withkunci tidak diperbolehkan dalam mode ketat.