Tingkatkan kecepatan respons klien AJAX

Kemunculan AJAX telah banyak mengubah mode operasi klien aplikasi Web. Hal ini memungkinkan pengguna untuk berkonsentrasi pada pekerjaan mereka tanpa harus sering mengalami penyegaran halaman yang mengganggu. Secara teori, teknologi AJAX dapat mengurangi waktu tunggu operasi pengguna secara signifikan dan menghemat lalu lintas data di jaringan. Namun, hal ini tidak selalu terjadi. Pengguna sering mengeluh bahwa kecepatan respon sistem yang menggunakan AJAX berkurang.
Penulis telah terlibat dalam penelitian dan pengembangan AJAX selama bertahun-tahun dan berpartisipasi dalam pengembangan dorado, platform AJAX yang relatif matang di Tiongkok. Berdasarkan pengalaman penulis, penyebab utama dari hasil ini bukanlah AJAX. Seringkali penurunan kecepatan respons sistem disebabkan oleh desain antarmuka yang tidak masuk akal dan kebiasaan pemrograman yang kurang efisien. Di bawah ini kami akan menganalisis beberapa aspek yang perlu diperhatikan selama proses pengembangan AJAX.

 Penggunaan pemrograman klien dan panggilan prosedur jarak jauh dengan benar.
Pemrograman sisi klien sebagian besar didasarkan pada JavaScript. JavaScript adalah bahasa pemrograman yang ditafsirkan, dan efisiensi pengoperasiannya sedikit lebih rendah dibandingkan Java. Pada saat yang sama, JavaScript berjalan di lingkungan yang sangat dibatasi seperti browser. Oleh karena itu pengembang harus memiliki pemahaman yang jelas tentang logika mana yang dapat dieksekusi di sisi klien.
Bagaimana pemrograman sisi klien harus digunakan dalam aplikasi sebenarnya bergantung pada pengalaman dan penilaian pengembang. Banyak masalah di sini yang hanya bisa dipahami. Karena terbatasnya ruang, di sini kami secara kasar merangkum tindakan pencegahan berikut:

 Sebisa mungkin hindari penggunaan panggilan prosedur jarak jauh, misalnya, hindari penggunaan panggilan prosedur jarak jauh di badan loop.
 Jika memungkinkan, gunakan panggilan prosedur jarak jauh AJAX (panggilan prosedur jarak jauh asinkron).
 Hindari menempatkan operasi data kelas berat di sisi klien. Misalnya: operasi penyalinan data dalam jumlah besar, penghitungan yang memerlukan traversal data dalam jumlah besar, dll.
 Meningkatkan metode operasi objek DOM.
Dalam pemrograman sisi klien, operasi pada objek DOM sering kali paling memakan waktu CPU. Untuk pengoperasian objek DOM, perbedaan performa antara metode pemrograman yang berbeda seringkali sangat besar.
Berikut ini adalah tiga buah kode dengan hasil yang sama persis. Fungsinya untuk membuat tabel berukuran 10x1000 di halaman web. Namun, kecepatan lari mereka sangat berbeda.
/* Kode tes 1 - Waktu yang dibutuhkan: 41 detik*/
var tabel = document.createElement("TABEL");
document.body.appendChild(tabel);
untuk(var saya = 0; saya < 1000; saya++){
var baris = tabel.insertRow(-1);
untuk(var j = 0; j < 10; j++){
var sel = objRow.insertCell(-1);
sel.innerText = "( " + i + " , " + j + " )";
}
}

/* Kode pengujian 2 - Waktu yang dibutuhkan: 7,6 detik*/
var tabel = document.getElementById("TABEL");
document.body.appendChild(tabel);
var tbody = dokumen.createElement("TBODY");
tabel.appendChild(tbody);
untuk(var saya = 0; saya < 1000; saya++){
var baris = dokumen.createElement("TR");
tbody.appendChild(baris);
untuk(var j = 0; j < 10; j++){
var sel = dokumen.createElement("TD");
baris.appendChild(sel);
sel.innerText = "( " + i + " , " + j + " )";
}
}

/* Kode pengujian 3 - waktu yang dibutuhkan: 1,26 detik*/
var tbody = dokumen.createElement("TBODY");
untuk(var saya = 0; saya < 1000; saya++){
var baris = dokumen.createElement("TR");
untuk(var j = 0; j < 10; j++){
var sel = dokumen.createElement("TD");
sel.innerText = "( " + i + " , " + j + " )";
baris.appendChild(sel);
}
tbody.appendChild(baris);
}
var tabel = document.getElementById("TABEL");
tabel.appendChild(tbody);
document.body.appendChild(tabel);
Perbedaan antara "Kode Uji 1" dan "Kode Uji 2" di sini adalah metode API yang berbeda digunakan saat membuat sel tabel. Perbedaan antara "Kode Tes 2" dan "Kode Tes 3" terletak pada urutan pemrosesan yang sedikit berbeda.
Kami tidak dapat menganalisis perbedaan kinerja yang besar antara "Kode Uji 1" dan "Kode Uji 2". Yang diketahui saat ini adalah bahwa insertRow dan insertCell adalah API khusus tabel di DHTML, dan createElement serta appendChild adalah API asli W3C DOM. Yang pertama harus menjadi enkapsulasi dari yang kedua. Namun, kami tidak dapat menyimpulkan bahwa API asli DOM selalu lebih baik daripada API khusus objek. Disarankan agar Anda melakukan beberapa pengujian dasar terhadap kinerjanya ketika Anda perlu sering memanggil API.
Perbedaan performa antara "Kode Tes 2" dan "Kode Tes 3" terutama berasal dari perbedaan urutan pembuatannya. Pendekatan "Kode Uji 2" adalah dengan terlebih dahulu membuat objek