Dilarang melakukan reproduksi tanpa izin
1. Pemrosesan perhitungan yang mahal
Mungkin aspek paling kompleks dalam mengembangkan aplikasi Javascript yang kompleks adalah sifat antarmuka pengguna yang bersifat single-thread. Situasi terbaik ketika Javascript menangani interaksi pengguna adalah respons yang lambat, dan situasi terburuk adalah tidak responsif yang menyebabkan browser hang (saat Javascript dijalankan, semua operasi pembaruan di halaman ditangguhkan). Oleh karena itu, sangat penting untuk mengurangi semua operasi kompleks (perhitungan apa pun yang lebih lama dari 100 md) ke tingkat yang dapat dikelola. Selain itu, jika skrip tidak berhenti setelah dijalankan setidaknya selama 5 detik, beberapa browser (seperti Firefox dan Opera) akan menghasilkan kotak prompt untuk memperingatkan pengguna bahwa skrip tidak merespons.
Ini jelas tidak diinginkan, dan menghasilkan antarmuka yang tidak responsif bukanlah hal yang baik. Namun, hal ini hampir pasti terjadi ketika Anda perlu memproses data dalam jumlah besar (seperti memproses ribuan elemen DOM).
Pada saat ini, pengatur waktu sangat berguna. Karena pengatur waktu dapat secara efektif menghentikan sementara eksekusi kode Javascript, pengatur waktu juga dapat mencegah browser menghentikan kode yang dijalankan (selama kode individual tidak cukup untuk menyebabkan browser macet). Dengan mengingat hal ini, kita dapat menggabungkan perhitungan loop normal dan intensif ke dalam perhitungan non-blocking. Mari kita lihat contoh berikut di mana jenis perhitungan ini diperlukan.
Tugas jangka panjang:
<tabel><tbody></tbody></tabel>
// Operasi normal, intensif
var tabel = document.getElementsByTagName("tbody");
untuk ( var saya = 0; saya < 2000; saya++ ) {
var tr = dokumen.createElement("tr");
untuk ( var t = 0; t < 6; t++ ){
var td = dokumen.createElement("td");
td.appendChild(document.createTextNode("" + t));
tr.appendChild(td);
}
tabel.appendChild(tr);
}
}
Dalam contoh ini, kami membuat total 26.000 node DOM dan mengisi angka-angka tersebut ke dalam tabel. Ini terlalu mahal dan kemungkinan besar akan membuat browser terhenti dan mengganggu interaksi pengguna normal. Kita dapat memperkenalkan pengatur waktu ke dalamnya dan mendapatkan hasil yang berbeda, mungkin lebih baik.
Gunakan pengatur waktu untuk membagi tugas yang sudah berjalan lama:
<tabel><tbody></tbody></tabel>
var tabel = document.getElementsByTagName("tbody");
var i = 0, maks = 1999;
setTimeout(fungsi(){
untuk ( var langkah = i + 500; i < langkah; i++ ) {
var tr = dokumen.createElement("tr");
untuk ( var t = 0; t < 6; t++ ){
var td = dokumen.createElement("td");
td.appendChild(document.createTextNode("" + t));
tr.appendChild(td);
}
}
tabel.appendChild(tr);
}
jika ( saya <maks )
setTimeout(argumen.callee, 0 );
}, 0);
Dalam contoh kami yang telah dimodifikasi, kami membagi komputasi intensif menjadi empat bagian, masing-masing menghasilkan 6500 node. Perhitungan ini kemungkinan tidak akan mengganggu aliran normal browser. Skenario terburuknya adalah angka-angka ini dapat disesuaikan kapan saja (misalnya, membuatnya bervariasi antara 250-500, sehingga setiap sel kita akan menghasilkan 3500 node DOM). Namun yang paling mengesankan adalah bagaimana kami mengubah kode kami untuk beradaptasi dengan sistem asinkron yang baru. Kita perlu melakukan lebih banyak pekerjaan untuk memastikan bahwa angka-angka untuk elemen dihasilkan dengan benar (perulangan tidak berakhir selamanya). Kode ini sangat mirip dengan kode asli kami. Perhatikan bahwa kami menggunakan penutupan untuk mempertahankan status iterasi antar fragmen kode. Tanpa penutupan, kode ini pasti akan menjadi lebih kompleks.
Ada perubahan yang jelas dengan menggunakan teknologi ini dibandingkan dengan aslinya. Browser yang hang lama digantikan oleh 4 pembaruan halaman visual. Meskipun browser mencoba mengeksekusi cuplikan kode ini secepat mungkin, browser juga merender perubahan DOM (seperti pembaruan besar-besaran) setelah setiap langkah pengatur waktu. Dalam kebanyakan kasus, pengguna tidak mengetahui jenis pembaruan ini, namun penting untuk diingat bahwa pembaruan tersebut memang terjadi.
Ada satu situasi di mana teknologi ini akan bekerja khusus untuk saya - sebuah aplikasi yang saya buat untuk menghitung jadwal mahasiswa. Pada awalnya, aplikasinya adalah CGI biasa (klien berbicara dengan server, server menghitung jadwal dan mengembalikannya). Tapi saya mengubahnya dan meletakkan semua perhitungan jadwal di klien. Ini adalah tampilan perhitungan jadwal:
Perhitungan ini cukup mahal (ribuan permutasi perlu dilalui untuk menemukan jawaban yang benar). Masalah ini diselesaikan dengan membagi perhitungan jadwal menjadi unit aktual (memperbarui antarmuka pengguna dengan bagian yang telah selesai). Pada akhirnya, pengguna menghadirkan antarmuka pengguna yang cepat, responsif, dan bermanfaat.
Seringkali mengejutkan betapa bermanfaatnya teknologi. Anda akan menemukannya sering digunakan dalam program yang berjalan lama, seperti kotak uji (kita membahasnya di akhir bab ini). Lebih penting lagi, teknologi ini menunjukkan kepada kita betapa mudahnya mengatasi keterbatasan lingkungan browser sekaligus memberikan pengalaman yang kaya kepada pengguna.