Di antara saran (i) dari JavaScript tentang meningkatkan kinerja situs web, beberapa saran diajukan untuk meningkatkan kinerja situs web dari permintaan HTTP ke rendering halaman. Artikel ini adalah ringkasan dari perspektif kinerja JavaScript setelah mempelajari buku lain oleh Steve Sounders, "Panduan Lanjutan untuk Konstruksi Situs Web Kinerja Tinggi".
Kinerja JavaScript adalah kunci untuk mengimplementasikan aplikasi web berkinerja tinggi
--Steve Sounders
1. Memanfaatkan rantai lingkup JS
Rantai Lingkup
Saat menjalankan sepotong kode JavaScript (kode atau fungsi global), mesin JavaScript akan membuat ruang lingkup untuk itu, juga dikenal sebagai konteks eksekusi. Setelah halaman dimuat, ruang lingkup global akan dibuat terlebih dahulu, dan kemudian setiap fungsi akan dieksekusi, ruang lingkup yang sesuai akan ditetapkan, sehingga membentuk rantai ruang lingkup. Setiap ruang lingkup memiliki rantai ruang lingkup yang sesuai, kepala rantai adalah ruang lingkup global, dan ekor rantai adalah ruang lingkup fungsi saat ini.
Tujuan dari rantai ruang lingkup adalah untuk menguraikan pengidentifikasi. Ketika fungsi dibuat (tidak dieksekusi), ini, argumen, parameter bernama dan semua variabel lokal dalam fungsi akan ditambahkan ke ruang lingkup saat ini. Ketika JavaScript perlu menemukan variabel x (proses ini disebut resolusi variabel), pertama -tama akan mencari apakah ada atribut x dari ujung rantai dalam rantai ruang lingkup, yaitu, ruang lingkup saat ini. Jika tidak ditemukan, terus cari di sepanjang rantai lingkup sampai kepala rantai, yaitu, rantai lingkup global, dan variabel tidak ditemukan, diyakini bahwa tidak ada variabel X pada rantai ruang lingkup kode ini, dan pengecualian referensi (referensi) pengecualian dilemparkan.
Mengelola kedalaman rantai ruang lingkup adalah cara sederhana untuk meningkatkan kinerja hanya dengan sedikit pekerjaan. Kita harus menghindari kecepatan eksekusi yang lambat karena pertumbuhan rantai ruang lingkup yang tidak disengaja.
Gunakan variabel lokal (rantai lingkup pendek sebanyak mungkin)
Jika kita memahami konsep rantai ruang lingkup, maka kita harus jelas bahwa variabel parsing mesin JavaScript terkait dengan kedalaman rantai lingkup. Jelas, variabel lokal berada di ujung rantai dan memiliki kecepatan akses tercepat. Oleh karena itu, pengalaman yang baik adalah: Ketika variabel non-lokal digunakan lebih dari sekali, silakan gunakan variabel lokal untuk menyimpannya, misalnya:
Function changeNv () {document.geteLementById ('myDiv'). className = 'diubah'; document.geteLementById ('myDiv'). style.height = 150;}Di sini, elemen dom mydiv direferensikan dua kali. Untuk referensi yang lebih cepat, kita harus menyimpannya dengan variabel lokal. Manfaat melakukan ini tidak hanya memperpendek rantai ruang lingkup, tetapi juga menghindari pertanyaan duplikat elemen DOM:
Function changeNv () {var myDivstyle = document.geteLementById ('myDiv'). style; myDiv.classname = 300; myDiv.style.height = 150;}Hindari menggunakan dengan (jangan tumbuh rantai lingkup)
Secara umum, selama eksekusi kode, rantai ruang lingkup fungsi diperbaiki, tetapi dengan sementara dapat meningkatkan rantai ruang lingkup fungsi. Dengan digunakan untuk menampilkan properti objek sebagai variabel lokal untuk membuatnya mudah diakses, misalnya:
var user = {name: 'vicfeel', usia: '23 '}; function showuser () {var local = 0; dengan (pengguna) {console.log ("name" + name); console.log ("usia" + usia); console.log (lokal);}} showuser ();Dalam contoh ini, dengan ruang lingkup sementara ditambahkan ke ujung rantai ruang lingkup showuser, yang menyimpan semua sifat objek pengguna, yaitu rantai lingkup dengan kode meningkat. Dalam kode ini, variabel lokal seperti perubahan lokal dari objek pertama di akhir rantai ke yang kedua, yang secara alami memperlambat akses pengidentifikasi. Sampai pernyataan dengan dengan rantai lingkup melanjutkan pertumbuhan. Karena cacat dengan ini, kita harus mencoba menghindari menggunakan kata kunci dengan.
2 kontrol aliran yang lebih masuk akal
Seperti bahasa pemrograman lainnya, JavaScript memiliki beberapa pernyataan kontrol aliran (loop, kondisi, dll.), Dan menggunakan pernyataan yang sesuai pada setiap tautan dapat sangat meningkatkan kecepatan berjalan skrip.
Penilaian kondisi cepat
Ketika datang ke penilaian bersyarat, cara pertama untuk menghindari:
if(value == 0){return result0;}else if(value == 1){return result1;}else if(value == 2){return result2;}else if(value == 3){return result3;}else if(value == 4){return result4;}else if(value == 5){return result5;}else if(value == 6){return result6;}else{return Hasil7;}Masalah utama dengan metode ini menggunakan IF untuk penilaian bersyarat adalah bahwa levelnya terlalu dalam. Ketika saya ingin nilai = 7, waktu mengkonsumsi lebih lama dari nilai = 0, yang sangat kehilangan kinerja dan merupakan keterbacaan yang buruk.
Cara yang lebih baik untuk membuat penilaian dengan Switch.
swithc (value) {case 0: return result0; case 1: return result1; case 2: return result2; case 3: return result3; case 4: return result4; case 5: return result5; case 6: return result6; default: return result7;}Ini tidak hanya meningkatkan keterbacaan, tetapi juga membutuhkan waktu kueri yang lebih cepat daripada IF. Tetapi jika jika lebih cepat dari beralih jika hanya satu atau dua kondisi
Dalam JavaScript, ada cara lain untuk meminta kondisional. Contoh sebelumnya adalah mengembalikan nilai yang berbeda sesuai dengan nilai, yang kebetulan dapat menggunakan array untuk mengimplementasikan permintaan pemetaan tabel hash.
// Tentukan array var result = [result0, result1, result2, result3, result4, result5, result6, result7]; // query hasil hasil pengembalian [nilai];
Metode array ini lebih efektif ketika rentang kueri besar, karena tidak harus mendeteksi batas atas dan bawah, dan hanya perlu mengisi nilai indeks untuk meminta. Keterbatasannya adalah bahwa kondisi tersebut sesuai dengan nilai tunggal daripada serangkaian operasi. Oleh karena itu, kita harus secara komprehensif menggabungkan situasi aktual, memilih metode penilaian yang tepat, dan memaksimalkan kinerja.
Siklus cepat
Ada 4 metode loop di JavaScript untuk loop, do-while loop, sementara loop dan loop for-in. Berikut adalah metode daur ulang yang sangat umum digunakan:
var values = [1,2,3,4,5]; untuk (var i = 0; i <values.length; i ++) {proses (nilai [i]);}Kita dapat melihat bahwa optimalisasi yang paling jelas dari kode ini adalah nilai. Panjang. Setiap loop saya harus dibandingkan dengan panjang nilai. Atribut kueri lebih memakan waktu daripada variabel lokal. Jika jumlah loop lebih besar, semakin memakan waktu. Oleh karena itu, dapat dioptimalkan seperti ini:
var values = [1,2,3,4,5]; var length = values.length; // Panjang array penyimpanan variabel lokal untuk (var i = 0; i <panjang; i ++) {proses (nilai [i]);}Kode ini juga dapat terus mengoptimalkan, mengurangi variabel loop menjadi 0 alih -alih menambah panjang total.
var values = [1,2,3,4,5]; var length = values.length; for (var i = panjang; i-;) {// berkurang ke 0process (nilai [i]);}Di sini, ujung loop diubah untuk dibandingkan dengan 0, sehingga kecepatan setiap loop lebih cepat. Bergantung pada kompleksitas loop, perubahan sederhana ini dapat menghemat sekitar 50% dari waktu daripada sebelumnya.