Performa pada Javascript adalah cara bagaimana untuk mempercepat kode JavaScript.
Section Artikel
Mengurangi Aktivitas pada Loop
Loop sering digunakan dalam pemrograman.
Setiap statement dalam satu loop, termasuk statement for, dijalankan pada setiap iterasi loop.
Statement atau tugas yang dapat ditempatkan di luar loop akan membuat loop berjalan lebih cepat.
Contoh yang buruk:
Contoh yang baik:
var i;
var l = arr.length;
for (i = 0; i < l; i++) {Contoh kode yang buruk mengakses properti length dari sebuah array setiap kali loop diiterasi.
Sedangkan contoh kode yang lebih baik mengakses properti length di luar loop dan membuat loop berjalan lebih cepat.
Mengurangi Akses DOM
Mengakses DOM pada HTML akan membuat proses eksekusi menjadi sangat lambat, dibandingkan dengan akses statement JavaScript lainnya.
Jika Anda ingin mengakses elemen DOM beberapa kali, akses satu kali, dan gunakan sebagai variabel lokal.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var obj;
obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>
</body>
</html>
Mengurangi Ukuran DOM
Pertahankan jumlah elemen di DOM HTML agar tetap kecil.
Hal ini akan selalu meningkatkan pemuatan halaman, dan mempercepat rendering (tampilan halaman), terutama pada perangkat yang lebih kecil.
Setiap upaya untuk menelusuri DOM (seperti getElementsByTagName) akan mendapatkan keuntungan dari DOM yang lebih kecil.
Hindari Variabel yang Tidak Perlu
Jangan membuat variabel baru jika tidak berencana untuk digunakan menyimpan nilai.
Kita dapat mengganti kode seperti ini:
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;dengan ini:
document.getElementById("demo").innerHTML = firstName + " " + lastName;Tunda Pemuatan JavaScript
Menempatkan skrip JavaScript 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 menentukan bahwa browser tidak boleh mengunduh lebih dari dua komponen secara paralel.
Alternatifnya adalah dengan menggunakan defer = “true” di tag skrip. Atribut defer menentukan bahwa skrip harus dijalankan setelah halaman selesai parsing, tetapi hanya berfungsi untuk skrip eksternal.
Jika memungkinkan, Anda dapat menambahkan script Anda ke halaman dengan kode, setelah halaman dimuat.
Contoh:
<script>
window.onload = function() {
var element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>Hindari Menggunakan with
Hindari menggunakan kata kunci with. Keyword with memiliki efek negatif pada kecepatan. Keyword with juga mengacaukan cakupan JavaScript.
Kata kunci with tidak diperbolehkan dalam mode strict.
