Bagian penting dari siklus pengembangan Microsoft adalah penyesuaian kinerja produk. Penyesuaian kinerja juga merupakan salah satu area utama yang harus diperhatikan oleh pengembang. Setelah bertahun-tahun melakukan pengembangan, industri telah belajar banyak tentang cara mengoptimalkan kinerja program Win32.
Salah satu masalah yang dihadapi pengembang saat ini adalah mereka tidak begitu memahami apa yang menyebabkan halaman DTHML dan HTML berjalan cepat atau lambat. Tentu saja, ada beberapa solusi sederhana - seperti tidak menggunakan gambar 2MB. Kami telah menggunakan beberapa teknik menarik lainnya untuk meningkatkan kinerja halaman DHTML. Kami berharap teknik tersebut dapat membantu Anda meningkatkan kinerja halaman Anda sendiri.
Disini saya menggunakan contoh program untuk membuat Tabel. Metode document.createElement() dan element.insertBefore() digunakan untuk membuat tabel dengan 1000 baris (Row). Setiap baris memiliki satu kolom (Sel). Konten yang terdapat di dalam Sel disebut "Teks". Seberapa burukkah kode ini? Berapa banyak ruang untuk penyesuaian yang dimiliki program sekecil itu? Silakan lihat pendahuluan.
Pada awalnya, saya menulis sebuah program yang menurut saya akan cepat. Saya mencoba menghindari beberapa masalah tingkat rendah seperti tidak mendefinisikan variabel secara eksplisit, atau menggunakan VBScript dan JavaScript secara bersamaan dalam satu halaman. Programnya adalah sebagai berikut:
<html>
<tubuh>
<skrip>
var tbl, tbody, tr, td, teks, i, max;
maks = 1000;
tbl = dokumen.createElement("TABEL");
tbl.perbatasan = "1";
tbody = document.createElement("TBODY");
tbl.insertBefore(tbody, null);
document.body.insertBefore(tbl, null);
untuk (i=0; i<maks; i++) {
tr = dokumen.createElement("TR");
td = dokumen.createElement("TD");
teks = dokumen.createTextNode("Teks");
td.insertBefore(teks, null);
tr.masukkanSebelum(td, null);
tbody.insertBefore(tr, null);
}
</skrip>
</tubuh>
</html>
Jalankan program ini pada mesin PII233/64MB memory/NT4.0/IE5.0. Halaman ini dimuat dari mesin ini. Waktu dari mulai memuat halaman hingga halaman benar-benar tenang (semua peristiwa telah dijalankan dan tampilan layar selesai) adalah 2328 milidetik, yang juga merupakan dasar pengujian ini (saya menyebutnya Test1).
Di halaman ini, operasi yang sangat memakan waktu adalah sering mereferensikan objek global, seperti "dokumen", "badan", "jendela", dll. Mengacu pada semua variabel global yang serupa jauh lebih mahal dibandingkan merujuk pada satu variabel lokal.
Jadi saya melakukan upaya perbaikan pertama: cache (Cache) document.body ke dalam variabel lokal "theBody":
menambahkan kode berikut:
var theBody = document.body;
Kemudian ubah baris ini:
document.body.insertBefore(tbl, null);
Ubah menjadi:
theBody.insertBefore(tbl, null);
Lihat sampel kedua.
Modifikasi ini tidak banyak mempengaruhi waktu keseluruhan, hanya mempersingkat 3 ms. Namun telah ditunjukkan bahwa jika ada juga objek document.body dalam loop dan referensinya diubah, manfaatnya akan sangat besar.
Selanjutnya, saya menyimpan objek dokumen dalam cache - dalam pengujian kami, objek dokumen direferensikan sebanyak 3002 kali. Kode yang dimodifikasi adalah sebagai berikut:
<html>
<tubuh>
<skrip>
var tbl, tbody, tr, td, teks, i, max;
maks = 1000;
var theDoc = dokumen;
var theBody = theDoc.body;
tbl = theDoc.createElement("TABEL");
tbl.perbatasan = "1";
tbody = theDoc.createElement("TBODY");
tbl.insertBefore(tbody, null);
theBody.insertBefore(tbl, null);
untuk (i=0; i<maks; i++) {
tr = theDoc.createElement("TR");
td = theDoc.createElement("TD");
text = theDoc.createTextNode("Teks");
td.insertBefore(teks, null);
tr.masukkanSebelum(td, null);
tbody.insertBefore(tr, null);
}
</skrip>
</tubuh>
</html>
Lihat sampel ketiga.
Waktu berjalan ini hanya 2100ms, menghemat sekitar 10% waktu. Menggunakan variabel lokal alih-alih mereferensikan objek dokumen secara langsung menghemat rata-rata 0,4 milidetik setiap kali.
Cara umum untuk mengoptimalkan kinerja adalah dengan menyetel atribut "defer" di tag <SCRIPT> ketika skrip tidak perlu segera dijalankan. (Skrip langsung tidak terdapat dalam blok fungsi, sehingga akan dieksekusi selama proses pemuatan.) Setelah menyetel atribut "defer", IE tidak perlu menunggu skrip dimuat dan dijalankan. Dengan cara ini halaman akan dimuat lebih cepat. Secara umum, ini juga berarti bahwa skrip langsung paling baik ditempatkan di blok fungsi dan menangani fungsi tersebut di pengendali onload dokumen atau objek isi. Properti ini berguna ketika ada beberapa skrip yang perlu dijalankan berdasarkan tindakan pengguna - seperti mengklik tombol atau menggerakkan mouse ke area tertentu. Namun ketika ada beberapa skrip yang perlu dijalankan selama atau setelah halaman dimuat, manfaat menggunakan atribut defer tidaklah besar.
Berikut ini adalah versi modifikasi kode dengan menggunakan atribut defer:
<html>
<tubuh onload="init()">
<penundaan skrip>
fungsi init() {
var tbl, tbody, tr, td, teks, i, max;
maks = 1000;
var theDoc = dokumen;
var theBody = theDoc.body;
tbl = theDoc.createElement("TABEL");
tbl.perbatasan = "1";
tbody = theDoc.createElement("TBODY");
tbl.insertBefore(tbody, null);
theBody.insertBefore(tbl, null);
untuk (i=0; i<maks; i++) {
tr = theDoc.createElement("TR");
td = theDoc.createElement("TD");
text = theDoc.createTextNode("Teks");
td.insertBefore(teks, null);
tr.masukkanSebelum(td, null);
tbody.insertBefore(tr, null);
}
}
</skrip>
</tubuh>
</html>
Lihat sampel keempat
. Ini merupakan peningkatan sebesar 12% dibandingkan pengujian awal dan 2,5% lebih tinggi dibandingkan pengujian sebelumnya.
Metode perbaikan yang kita bahas di bawah ini tentu saja sangat berguna, tetapi sedikit lebih merepotkan. Saat Anda perlu membuat elemen dan kemudian memasukkannya ke dalam struktur mirip pohon, akan lebih efisien untuk memasukkannya langsung ke dalam batang--daripada memasukkannya terlebih dahulu ke dalam subpohon besar lalu memasukkan subpohon besar ke dalam batang. Misalnya, jika Anda membuat tabel dengan satu kolom di setiap baris dan beberapa teks di kolom, Anda dapat melakukan ini:
1. Buat <TR>
2. Buat <TD>
3. Buat node TextNode
4. Masukkan TextNode ke dalam <TD >
5 . Sisipkan <TD> ke dalam <TR>
6. Sisipkan <TR> ke dalam TBODY
Bila lebih lambat dari metode berikut:
1. Buat <TR>
2. Buat <TD>
3. Buat TextNode
4. Sisipkan <TR > Masukkan ke dalam TBODY
5. Masukkan <TD> ke dalam <TR>
6. Masukkan TextNode ke dalam <TD>
Keempat pengujian di atas semuanya menggunakan cara sebelumnya. Kami menggunakan metode terakhir untuk tes kelima. Kodenya adalah sebagai berikut:
<html>
<tubuh onload="init()">
<penundaan skrip>
fungsi init() {
var tbl, tbody, tr, td, teks, i, max;
maks = 1000;
var theDoc = dokumen;
var theBody = theDoc.body;
tbl = theDoc.createElement("TABEL");
tbl.perbatasan = "1";
tbody = theDoc.createElement("TBODY");
tbl.insertBefore(tbody, null);
theBody.insertBefore(tbl, null);
untuk (i=0; i<maks; i++) {
tr = theDoc.createElement("TR");
td = theDoc.createElement("TD");
text = theDoc.createTextNode("Teks");
tbody.insertBefore(tr, null);
tr.masukkanSebelum(td, null);
td.insertBefore(teks, null);
}
}
</skrip>
</tubuh>
</html>
Lihat sampel kelima
hanya membutuhkan 1649ms. Ini merupakan peningkatan 25% dibandingkan pengujian terakhir dan hampir 30% lebih cepat dibandingkan pengujian dasar.
Modifikasi selanjutnya dilakukan menggunakan stylesheet yang sudah jadi. Lebar kolom tabel yang menggunakan style sheet yang sudah jadi atau diatur melalui tag <COL>. Jika tidak ada tag <COL>, maka lebar setiap kolom akan didistribusikan secara merata. Karena tidak perlu menghitung ulang ukuran setiap kolom, dll., penggunaan style sheet sebenarnya meningkatkan kinerja, terutama bila jumlah kolom dalam tabel banyak.
Kode untuk menambahkan style sheet (CSS) sangat sederhana, sebagai berikut:
tbl.style.tableLayout = "fixed";
Lihat sampel keenam.
Karena tabel dalam pengujian kami hanya memiliki satu kolom, perubahan ini hanya meningkatkan kinerja halaman sebesar 1,6%. Jika kolomnya lebih banyak maka peningkatan kinerjanya akan semakin besar.
Dua tes terakhir mengubah cara teks dimasukkan ke dalam tabel. Pada pengujian sebelumnya, pertama-tama kita membuat TextNode lalu memasukkannya ke dalam TD. Di Test7, kami menentukan teks yang disertakan melalui innerText. Kode yang dimodifikasi adalah:
td.innerText = "Text";
Lihat sampel ketujuh.
Yang mengejutkan, perbedaan yang dihasilkan modifikasi ini sangat besar—peningkatan performa sebesar 9% dibandingkan sebelumnya, dan total peningkatan performa sebesar 36% dibandingkan versi aslinya. Waktunya berkisar dari 2323 md pertama hingga 1473 md terakhir.
Sekarang, hampir semua orang tahu bahwa menggunakan element.innerHTML sangat lambat. Untuk melihat betapa lambatnya, saya melakukan satu tes terakhir: menyisipkan teks menggunakan innerHTML, bukan innerText. Hal ini sangat mengurangi kinerja. Waktunya mencapai 3375ms, 80% lebih lambat dari pengujian terakhir dan 45% lebih lambat dari pengujian dasar. Jelas sekali, innerHTML sangat memakan waktu.
Menyetel kinerja halaman HTML mirip dengan menyetel kinerja aplikasi Win32; Anda perlu mengetahui mana yang lambat dan mana yang cepat. Saya harap metode ini dapat membantu Anda meningkatkan kinerja halaman.