Seperangkat teknik untuk mempercepat DHTML
Penulis：Eve Cole
Waktu Pembaruan：2009-06-20 16:59:57
HTML Dinamis (DHTML) di Microsoft? Di Internet Explorer 4.0
Diperkenalkan untuk membuat model pemrograman baru tersedia bagi penulis dan pengembang web. Sejak itu, penulis Web telah melakukannya
Manfaatkan sepenuhnya fitur canggih ini untuk menyediakan konten, gaya, dan pemosisian dinamis sehingga pengguna web dapat melakukannya
Rasakan fitur interaktif yang kaya. Fleksibilitas DHTML berarti biasanya ada banyak cara untuk mengimplementasikannya
Ide Anda. Memahami bagaimana proses penguraian dan komponen tampilan HTML Internet Explorer
untuk membantu Anda menentukan cara terbaik untuk menyelesaikan pekerjaan. Artikel ini menjelaskan beberapa fungsi DHTML
dampak signifikan terhadap kinerja dan memberikan beberapa tips untuk meningkatkan kinerja halaman.
Kumpulan perubahan DHTML
Pada halaman web DHTML, cara paling efektif untuk meningkatkan kinerja adalah dengan meningkatkan
Perubahan konten. Ada beberapa cara memperbarui halaman web, yang penting untuk dipahami. Kongke
Dilihat dari masukan pengguna, penulis Web dapat menggunakan blok teks HTML atau mereka dapat menggunakan DHTML
Model Objek (Bahasa Inggris) atau Model Objek Dokumen W3C (DOM) (Bahasa Inggris) untuk mengakses HTML individual
elemen. Setiap kali Anda mengubah konten HTML, penguraian dan tampilan HTML Internet Explorer
Semua komponen tampilan harus mengatur ulang representasi internal halaman, menghitung ulang tata letak dokumen dan dokumen
streaming dan tampilkan perubahan ini. Meskipun kinerja sebenarnya ditentukan oleh konten halaman Web dan perubahan yang Anda buat
, namun operasi ini relatif mahal. Jika Anda menggunakan blok teks HTML, bukan individual
Untuk mengakses elemen, parser HTML harus dipanggil, yang akan menyebabkan overhead kinerja tambahan. Terima HTML
Metode dan properti teks mencakup insertAdjacentHTML (Bahasa Inggris) dan pasteHTML (Bahasa Inggris)
teks), serta atribut innerHTML (Bahasa Inggris) dan outerHTML (Bahasa Inggris).
Tip 1: Buat perubahan pada konten HTML dalam fungsi skrip. Jika desain Anda menggunakan
Jika Anda memiliki beberapa event handler (misalnya sebagai respons terhadap gerakan mouse), pembaruan harus terpusat
mengubah.
Fakta penting lainnya tentang penguraian dan tampilan komponen HTML adalah setelah skrip mengembalikan kontrol (mis.
Saat pengendali kejadian skrip keluar, atau saat metode seperti setTimeout (Bahasa Inggris) dipanggil),
Komponen ini akan menghitung ulang tata letak dan menampilkan halaman web. Sekarang Anda tahu tentang Internet Explorer
Cara menangani perubahan, di bawah ini akan mulai meningkatkan kinerja halaman web Anda.
Tip 2: Buat string HTML dan buat satu perubahan pada dokumen, bukan beberapa perubahan
kali diperbarui. Jika konten HTML tidak diperlukan, pertimbangkan untuk menggunakan
properti innerText (Bahasa Inggris).
Dalam contoh berikut, metode yang lebih lambat memanggil HTML setiap kali properti innerHTML disetel
penganalisa. Untuk meningkatkan kinerja, Anda dapat membuat string terlebih dahulu lalu menetapkannya ke innerHTML
milik.
lambat:
divUpdate.innerHTML = "";
untuk (var i=0; i<100; i++)
{
divUpdate.innerHTML += "Ini adalah metode yang lebih lambat!";
}
cepat:
var str="";
untuk (var i=0; i<100; i++)
{
str += "Karena menggunakan string, cara ini lebih cepat!";
}
divUpdate.innerHTML = str;
Gunakan teks dalam
Model objek DHTML mengakses teks elemen HTML melalui atribut innerText (Bahasa Inggris).
konten, sedangkan DOM W3C menyediakan node teks anak independen. Langsung melalui atribut innerText
Perbarui konten elemen secara permanen, lebih cepat daripada memanggil metode DOM createTextNode (Bahasa Inggris).
Tip 3: Gunakan properti innerText untuk memperbarui konten teks.
Contoh berikut menunjukkan cara menggunakan properti innerText untuk meningkatkan kinerja.
lambat:
simpul var;
untuk (var i=0; i<100; i++)
{
node = dokumen.createElement( "SPAN" );
node.appendChild( document.createTextNode( "Gunakan createText
Simpul() ") );
divUpdate.appendChild(simpul);
}
cepat:
simpul var;
untuk (var i=0; i<100; i++)
{
node = dokumen.createElement( "SPAN" );
node.innerText = "Gunakan properti innerText";
divUpdate.appendChild(simpul);
}
Tambahkan satu elemen menggunakan DOM
Seperti disebutkan sebelumnya, menerapkan metode akses teks HTML akan menyebabkan parser HTML dipanggil, dari
Ini akan mengurangi kinerja. Jadi menggunakan createElement (Bahasa Inggris) dan insertAdjacent
Metode Elemen (Bahasa Inggris) menambahkan elemen lebih cepat daripada memanggil metode insertAdjacentHTML satu kali.
Tip 4: Panggil metode createElement dan insertAdjacentElement lebih cepat daripada memanggil
Metode insertAdjacentHTML cepat.
Mengelompokkan pembaruan DHTML dan memanggil metode insertAdjacentHTML satu kali dapat ditingkatkan
Performa, namun terkadang lebih efisien jika membuat elemen langsung dari DOM. Dalam skenario di bawah, Anda bisa
untuk mencoba kedua metode dan menentukan mana yang lebih cepat.
lambat:
untuk (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " Gunakan sisipan
HTML Berdekatan() " );
}
cepat:
simpul var;
untuk (var i=0; i<100; i++)
{
node = dokumen.createElement( "SPAN" );
node.innerText = "Gunakan insertAdjacentElement() ";
divUpdate.insertAdjacentElement( "beforeEnd", simpul );
}
Memperluas opsi dalam elemen SELECT
Untuk aturan sebelumnya yang menggunakan metode teks HTML, OPSI dalam jumlah besar (Bahasa Inggris)
Pengecualian adalah ketika elemen ditambahkan ke SELECT (Bahasa Inggris). Saat ini, gunakan innerHTML
Properti lebih efisien daripada memanggil metode createElement untuk mengakses kumpulan opsi.
Tip 5: Gunakan innerHTML untuk menambahkan sejumlah besar opsi ke elemen SELECT.
Gunakan operasi penggabungan string untuk membuat teks HTML elemen SELECT, lalu gunakan ini
Tips untuk mengatur atribut innerHTML. Untuk opsi dalam jumlah besar, operasi penggabungan string juga dapat dilakukan
mempengaruhi kinerja. Dalam hal ini, buat array dan panggil gabungan Microsoft JScript
(Bahasa Inggris) Metode untuk melakukan penggabungan akhir teks HTML elemen OPTION.
lambat:
var memilih;
divUpdate.innerHTML = "〈PILIH ID='selUpdate'〉";
untuk (var i=0; i<1000; i++)
{
opt = document.createElement( "OPSI" );
selUpdate.options.add(memilih);
opt.innerText = "Item" + i + "Item";
}
cepat:
var str="〈PILIH ID='selUpdate'〉";
untuk (var i=0; i<1000; i++)
{
str += "〈OPSI〉th" + i + " item〈/OPTION〉";
}
str+= "";
divUpdate.innerHTML = str;
Lebih cepat:
var arr = Array baru(1000);
untuk (var i=0; i<1000; i++)
{
arr[i] = "〈OPSI〉th" + i + " item〈/OPTION〉";
}
divUpdate.innerHTML = "〈PILIH ID='selUpdate'〉" + arr.join() + "
";
Perbarui tabel dengan DOM
Menggunakan metode DOM untuk menyisipkan baris dan sel tabel lebih baik dibandingkan menggunakan insertRow (Bahasa Inggris) dan insert
Metode Cell (Bahasa Inggris) (bagian dari model objek tabel DHTML) lebih efisien. terutama di
Saat membuat tabel besar, perbedaan efisiensi menjadi lebih jelas.
Tip 6: Gunakan metode DOM untuk membuat tabel besar.
lambat:
baris var;
sel var;
untuk (var i=0; i<100; i++)
{
baris = tblUpdate.insertRow();
untuk (var j=0; j<10; j++)
{
sel = baris.insertCell();
cell.innerText = "Baris " + i + " , sel " + j + " ";
}
}
cepat:
baris var;
sel var;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild(tbody);
untuk (var i=0; i<100; i++)
{
baris = dokumen.createElement( "TR" );
tbody.appendChild( baris );
untuk (var j=0; j<10; j++)
{
sel = dokumen.createElement( "TD" );
baris.appendChild( sel );
cell.innerText = "Baris " + i + " , sel " + j + " ";
}
}
Tulis sekali, gunakan banyak
Jika situs web Anda menggunakan skrip untuk melakukan operasi umum, pertimbangkan untuk menambahkan fungsi ini
Dapat ditempatkan dalam file terpisah sehingga dapat digunakan kembali oleh beberapa halaman Web. Dalam melakukan hal itu, tidak hanya
Dengan demikian, ini dapat meningkatkan pemeliharaan kode dan menyimpan file skrip di cache browser
Itu hanya perlu diunduh secara lokal satu kali ketika pengguna mengunjungi situs. Letakkan aturan gaya yang umum digunakan secara terpisah
Manfaat yang sama dapat diperoleh dalam file.
Tip 7: Gunakan kembali skrip dengan memasukkan kode yang sering digunakan ke dalam tindakan atau file mandiri
Untuk memanfaatkan penggunaan kembali skrip dengan lebih baik, tempatkan operasi skrip yang sering digunakan ke dalam add-in DHTML.
kode atau perilaku elemen (Bahasa Inggris). Perilaku memberikan cara yang efisien untuk menggunakan kembali skrip dan
Buat komponen yang diakses dari HTML dan memungkinkan Anda menggunakan objek, metode, properti, dan peristiwa Anda sendiri
Model objek DHTML yang diperluas. Untuk behavior yang tidak menggunakan fitur viewlink (Bahasa Inggris) bisa
Pertimbangkan untuk menggunakan fitur perilaku ringan di Internet Explorer 5.5
Enkapsulasi kode yang lebih efisien. Juga, jika kode skrip Anda dalam SCRIPT (Bahasa Inggris)
Di blok, kinerja yang lebih tinggi akan dicapai.
Jangan terlalu banyak menggunakan atribut dinamis
Properti dinamis (Bahasa Inggris) memberi penulis web cara untuk menggunakan ekspresi sebagai nilai properti.
Ekspresi dievaluasi pada saat runtime dan nilai yang dihasilkan diterapkan ke atribut. Ini adalah fitur yang hebat. ini
fitur dapat digunakan untuk mengurangi jumlah skrip pada halaman, tetapi karena ekspresi harus dievaluasi ulang secara berkala, dan
Ekspresi ini sering kali dikaitkan dengan nilai properti lainnya, sehingga dapat berdampak negatif pada performa. Semacam ini
Hal ini terutama berlaku untuk properti pemosisian.
Tip 8: Batasi penggunaan properti dinamis.
Pengikatan data berfungsi dengan baik
Pengikatan data (Bahasa Inggris) adalah fitur canggih yang memungkinkan Anda menggabungkan hasil kueri database
Konten buah atau pulau data XML (dalam bahasa Inggris), terikat pada elemen HTML di halaman Web. Anda tidak punya
Perlu kembali ke server untuk mengekstrak data, dapat menyediakan fungsi penyortiran dan penyaringan data, serta data yang berbeda
tampilan data. Bayangkan sebuah halaman Web yang menampilkan data perusahaan sebagai diagram garis, diagram batang, atau diagram lingkaran
grafik, juga memiliki tombol untuk mengurutkan data berdasarkan kantor, produk, atau tahap penjualan, dan semuanya
Fungsi ini hanya perlu mengakses server satu kali untuk mengimplementasikannya.
Tip 9: Gunakan pengikatan data untuk memberikan tampilan klien yang kaya atas data Anda.
Jangan atur atribut expando pada objek dokumen
Atribut expando (Bahasa Inggris) dapat ditambahkan ke objek apa pun. Properti ini sangat berguna, bisa
untuk menyimpan informasi dalam halaman Rabu saat ini dan menyediakan cara lain untuk memperluas model objek DHTML
Hukum. Misalnya, Anda dapat menetapkan atribut yang diklik ke elemen DHTML dan menggunakan atribut ini untuk meminta pengguna
Elemen mana yang diklik pengguna. Saat membesarkan suatu acara, Anda juga dapat menggunakan atribut expando untuk
Penangan peristiwa memberikan informasi yang lebih kontekstual. Tidak peduli bagaimana Anda menggunakan atribut expando, potong
Ingatlah untuk tidak mengaturnya pada objek dokumen (Bahasa Inggris). Jika Anda melakukan ini, saat Anda berkunjung
Saat meminta properti ini, dokumen tersebut harus melakukan operasi perhitungan ulang tambahan.
Tip 10: Atur atribut expando pada objek window (Bahasa Inggris).
lambat:
untuk (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "Item" + i + "Item";
tmp = window.document.myProperty;
}
cepat:
untuk (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "Barang" + i + "Barang";
tmp = jendela.Propertiku;
}
Hindari mengganti aturan kelas dan gaya
Mengganti aturan kelas dan gaya adalah operasi yang sangat mahal yang memerlukan perhitungan ulang dan penyesuaian keseluruhan
Tata letak dokumen. Jika situs Web Anda menggunakan style sheet untuk memberikan tampilan konten alternatif, Anda bisa
Untuk mempertimbangkan secara langsung memodifikasi objek gaya (Bahasa Inggris) dari elemen yang akan diubah, daripada memodifikasi elemen tersebut
atribut className (Bahasa Inggris) atau objek styleSheet (Bahasa Inggris) yang terkait dengan kelas.
Tip 11: Saat mengubah tampilan konten, modifikasi objek gaya secara langsung.
Ciutkan rentang teks sebelum menemukan induk
Objek TextRange (Bahasa Inggris) mewakili yang dipilih pengguna atau diambil dari elemen HTML
Area teks, seperti BODY (Bahasa Inggris). Dengan memanggil metode parentElement (Bahasa Inggris),
Dapat mengidentifikasi induk dari rentang teks. Untuk rentang teks yang kompleks, panggil parentElement
Sebelum melakukan metode, akan lebih efisien jika memanggil metode collaps (Bahasa Inggris) terlebih dahulu.
Tip 12: Perkecil rentang teks sebelum mengakses metode parentElement.
Dikutip dari http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN
